@versini/ui-togglegroup 6.0.0 → 6.0.2

package/dist/components/index.d.ts

@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
 import type { ToggleGroupItemProps } from './ToggleGroupTypes';
 import type { ToggleGroupProps } from './ToggleGroupTypes';
 
-export declare const ToggleGroup: ({ children, value, onValueChange, disabled, focusMode, size, defaultValue, className, ...otherProps }: ToggleGroupProps) => JSX.Element;
+export declare const ToggleGroup: ({ children, value, onValueChange, disabled, size, defaultValue, className, ...otherProps }: ToggleGroupProps) => JSX.Element;
 
 export declare const TOGGLEGROUP_CLASSNAME = "av-togglegroup";
 

package/dist/components/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-togglegroup v6.0.0
+  @versini/ui-togglegroup v6.0.2
   © 2026 gizmette.com
 */
 
@@ -17,46 +17,47 @@ const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
 
 
 const ToggleGroupContext = react.createContext({
-    size: "medium",
-    focusMode: "system"
+    size: "medium"
 });
 
 
 
 
-const getToggleGroupItemFocusClasses = ({ focusMode })=>{
-    return clsx("focus:outline-none", "focus:ring-2", "focus:ring-inset", {
-        "focus:ring-focus-light": focusMode === "light",
-        "focus:ring-focus-dark": focusMode === "dark",
-        "focus:ring-focus-light dark:focus:ring-focus-dark": focusMode === "alt-system",
-        "focus:ring-focus-dark dark:focus:ring-focus-light": focusMode === "system"
-    });
+const getToggleGroupItemFocusClasses = ()=>{
+    return clsx("focus:outline-none", "focus:ring-2", "focus:ring-inset", "focus:ring-focus-dark");
 };
 const getToggleGroupItemActiveClasses = ()=>{
-    return clsx("data-[state=on]:bg-surface-lightest data-[state=on]:text-copy-dark dark:data-[state=on]:bg-surface-dark dark:data-[state=on]:text-copy-light");
+    return clsx("data-[state=on]:bg-surface-lightest data-[state=on]:text-copy-dark", "dark:data-[state=on]:bg-surface-dark dark:data-[state=on]:text-copy-light");
 };
 const getToggleGroupItemSizeClasses = ({ size })=>{
     return clsx({
-        "h-5 px-2": size === "small",
-        "h-6 px-3": size === "medium",
-        "h-7 px-4": size === "large"
+        "h-full px-1 sm:px-2": size === "small",
+        "h-full px-3": size === "medium",
+        "h-full px-4": size === "large"
+    });
+};
+const getToggleGroupSizeClasses = ({ size })=>{
+    return clsx({
+        "h-6": size === "small",
+        "h-8": size === "medium",
+        "h-12": size === "large"
     });
 };
 const getToggleGroupItemWrapperClasses = ()=>{
     return clsx(TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME, "relative", "[&>button]:rounded-none", "first:[&>button]:rounded-l-md", "last:[&>button]:rounded-r-md", "border-r border-border-medium last:border-r-0");
 };
-const getToggleGroupItemClasses = ({ focusMode, size })=>{
+const getToggleGroupItemClasses = ({ size })=>{
     return {
         wrapperClass: getToggleGroupItemWrapperClasses(),
-        itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "flex items-center justify-center bg-transparent", "transition duration-200 ease", getToggleGroupItemSizeClasses({
+        itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "text-sm cursor-pointer", "flex items-center justify-center bg-transparent", "transition duration-200 ease", getToggleGroupItemSizeClasses({
             size
-        }), getToggleGroupItemFocusClasses({
-            focusMode
-        }), getToggleGroupItemActiveClasses())
+        }), getToggleGroupItemFocusClasses(), getToggleGroupItemActiveClasses())
     };
 };
-const getToggleGroupClasses = ({ className })=>{
-    return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex", "rounded-md", "border border-border-medium", "bg-surface-light text-copy-dark/70", className);
+const getToggleGroupClasses = ({ className, size })=>{
+    return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex", "rounded-md", "border border-border-medium", "bg-surface-light text-copy-dark/70", getToggleGroupSizeClasses({
+        size
+    }), className);
 };
 
 
@@ -64,13 +65,13 @@ const getToggleGroupClasses = ({ className })=>{
 
 
 
-const ToggleGroup = ({ children, value, onValueChange, disabled, focusMode = "system", size = "medium", defaultValue, className, ...otherProps })=>{
+const ToggleGroup = ({ children, value, onValueChange, disabled, size = "medium", defaultValue, className, ...otherProps })=>{
     const toggleGroupClasses = getToggleGroupClasses({
-        className
+        className,
+        size
     });
     const contextValue = {
-        size,
-        focusMode
+        size
     };
     return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
         value: contextValue,
@@ -87,9 +88,8 @@ const ToggleGroup = ({ children, value, onValueChange, disabled, focusMode = "sy
     });
 };
 const ToggleGroupItem = ({ value, disabled, children })=>{
-    const { size, focusMode } = useContext(ToggleGroupContext);
+    const { size } = useContext(ToggleGroupContext);
     const { itemClass, wrapperClass } = getToggleGroupItemClasses({
-        focusMode,
         size
     });
     return /*#__PURE__*/ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-togglegroup",
-	"version": "6.0.0",
+	"version": "6.0.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -47,5 +47,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "3534e50d79273f5731868c07f114faeb0ff04bf5"
+	"gitHead": "1c5ed3b2e06d6ba847cd311955e18faba8888d7d"
 }