@versini/ui-toggle 6.3.0 → 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, splitBackground, }: 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

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-toggle v6.3.0
+  @versini/ui-toggle v7.0.0
   © 2026 gizmette.com
 */
 
@@ -21,13 +21,8 @@ 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");
 };
 // Aqua-style split background overlay for the toggle knob:
 // - Top half: flat white overlay (light, uniform)
@@ -84,16 +79,14 @@ const getWrapperClasses = ({ className })=>{
 const getToggleWrapperClasses = ()=>{
     return "relative inline-block";
 };
-const getToggleClasses = ({ mode, focusMode, labelHidden, className, noBorder, narrow, labelMode, labelPosition = "right", subLabel, splitBackground })=>{
+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,
@@ -123,11 +116,10 @@ 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, splitBackground = false })=>{
+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,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-toggle",
-	"version": "6.3.0",
+	"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": "af3ee18b6fc3d57977ec331df0ce151794e29342"
+	"gitHead": "a295349019d1512796f266bba535de383f12b6ee"
 }