@versini/ui-toggle 6.2.3 → 7.0.0

package/README.md

@@ -139,7 +139,6 @@ function SettingsPanel() {
 | `name`          | `string`                                        | -          | Form field name (required).                                       |
 | `onChange`      | `(checked: boolean) => void`                    | -          | Callback fired when checked state changes.                        |
 | `checked`       | `boolean`                                       | `false`    | Controlled checked state.                                         |
-| `focusMode`     | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | Focus ring color mode.                                            |
 | `labelHidden`   | `boolean`                                       | `false`    | Visually hide the label (still accessible).                       |
 | `labelPosition` | `"left" \| "right"`                             | `"right"`  | Position of the label relative to the toggle.                     |
 | `mode`          | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | Color mode/theme.                                                 |

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, labelMode, className, noBorder, narrow, noHaptic, labelPosition, subLabel, splitBackground, }: ToggleProps) => JSX.Element;
 
 export declare const TOGGLE_CLASSNAME = "av-toggle";
 
@@ -27,11 +27,6 @@ declare type ToggleProps = {
      * @default false
      */
     checked?: boolean;
-    /**
-     * The type of focus for the Button. This will change the color
-     * of the focus ring around the Button.
-     */
-    focusMode?: "dark" | "light" | "system" | "alt-system";
     /**
      * Whether or not to render the label and sub-label.
      * @default false
@@ -70,6 +65,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.3
+  @versini/ui-toggle v7.0.0
   © 2026 gizmette.com
 */
 
@@ -21,20 +21,20 @@ const getToggleBaseClasses = ({ narrow })=>{
     }, // Smooth background/border transition when toggling
     "transition-colors duration-300 ease-in-out motion-reduce:transition-none");
 };
-const getToggleKnobFocusClasses = ({ focusMode })=>{
-    return clsx("peer-focus:outline", "peer-focus:outline-2", "peer-focus:outline-offset-2", {
-        "peer-focus:outline-focus-dark": focusMode === "dark",
-        "peer-focus:outline-focus-light": focusMode === "light",
-        "peer-focus:outline-focus-light dark:peer-focus:outline-focus-dark": focusMode === "alt-system",
-        "peer-focus:outline-focus-dark dark:peer-focus:outline-focus-light": focusMode === "system"
-    });
+const getToggleKnobFocusClasses = ()=>{
+    return clsx("peer-focus:outline", "peer-focus:outline-2", "peer-focus:outline-offset-2", "peer-focus:outline-focus-dark");
 };
-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,19 +79,18 @@ const getWrapperClasses = ({ className })=>{
 const getToggleWrapperClasses = ()=>{
     return "relative inline-block";
 };
-const getToggleClasses = ({ mode, focusMode, labelHidden, className, noBorder, narrow, labelMode, labelPosition = "right", subLabel })=>{
+const getToggleClasses = ({ mode, labelHidden, className, noBorder, narrow, labelMode, labelPosition = "right", subLabel, splitBackground })=>{
     return {
         toggle: clsx(getToggleBaseClasses({
             narrow
         }), getToggleColorClasses({
             mode,
             noBorder
-        }), getToggleKnobFocusClasses({
-            focusMode
-        }), getToggleKnobOffClasses({
+        }), getToggleKnobFocusClasses(), getToggleKnobOffClasses({
             narrow
         }), getToggleKnobOnClasses({
-            narrow
+            narrow,
+            splitBackground
         })),
         label: getLabelClasses({
             labelHidden,
@@ -117,18 +116,18 @@ 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", labelMode, className, noBorder = false, narrow = false, noHaptic = false, labelPosition = "right", subLabel, splitBackground = false })=>{
     const { haptic } = useHaptic();
     const toggleClasses = getToggleClasses({
         mode,
-        focusMode,
         labelHidden,
         className,
         noBorder,
         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.3",
+	"version": "7.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -37,7 +37,7 @@
 		"test": "vitest run"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "8.4.0"
+		"@versini/ui-types": "9.0.0"
 	},
 	"dependencies": {
 		"@versini/ui-hooks": "6.1.1",
@@ -47,5 +47,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "08f46d8b356d5cfbb4e58dca300428ed6bb03789"
+	"gitHead": "a295349019d1512796f266bba535de383f12b6ee"
 }