@versini/ui-togglegroup 5.3.2 → 6.0.0

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, mode, focusMode, size, defaultValue, className, ...otherProps }: ToggleGroupProps) => JSX.Element;
+export declare const ToggleGroup: ({ children, value, onValueChange, disabled, focusMode, size, defaultValue, className, ...otherProps }: ToggleGroupProps) => JSX.Element;
 
 export declare const TOGGLEGROUP_CLASSNAME = "av-togglegroup";
 
@@ -10,6 +10,6 @@ export declare const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
 
 export declare const TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME = "av-togglegroup-item-wrapper";
 
-export declare const ToggleGroupItem: ({ value, disabled }: ToggleGroupItemProps) => JSX.Element;
+export declare const ToggleGroupItem: ({ value, disabled, children, }: ToggleGroupItemProps) => JSX.Element;
 
 export { }

package/dist/components/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-togglegroup v5.3.2
+  @versini/ui-togglegroup v6.0.0
   © 2026 gizmette.com
 */
 
@@ -18,28 +18,22 @@ const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
 
 const ToggleGroupContext = react.createContext({
     size: "medium",
-    focusMode: "system",
-    mode: "system"
+    focusMode: "system"
 });
 
 
 
 
 const getToggleGroupItemFocusClasses = ({ focusMode })=>{
-    return clsx("focus:outline", "focus:outline-2", "focus:outline-offset", {
-        "focus:outline-focus-light": focusMode === "light",
-        "focus:outline-focus-dark": focusMode === "dark",
-        "focus:outline-focus-light dark:focus:outline-focus-dark": focusMode === "alt-system",
-        "focus:outline-focus-dark dark:focus:outline-focus-light": focusMode === "system"
+    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 getToggleGroupItemActiveClasses = ({ mode })=>{
-    return clsx({
-        "data-[state=on]:bg-surface-medium": mode === "dark",
-        "data-[state=on]:bg-surface-lightest": mode === "light",
-        "data-[state=on]:bg-surface-lightest dark:data-[state=on]:bg-surface-medium": mode === "system",
-        "data-[state=on]:bg-surface-medium dark:data-[state=on]:bg-surface-lightest": mode === "alt-system"
-    });
+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");
 };
 const getToggleGroupItemSizeClasses = ({ size })=>{
     return clsx({
@@ -48,35 +42,21 @@ const getToggleGroupItemSizeClasses = ({ size })=>{
         "h-7 px-4": size === "large"
     });
 };
-const getToggleGroupItemWrapperClasses = ({ mode })=>{
-    return clsx(TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME, "px-1", "relative", "border-r", "last:border-transparent", "has-[button[aria-checked='true']]:border-transparent", "has-[+_*_button[aria-checked='false']]:border-border-medium", {
-        "border-surface-light": mode === "light",
-        "border-surface-darker": mode === "dark",
-        "border-surface-light dark:border-surface-darker": mode === "system",
-        "border-surface-darker dark:border-surface-light": mode === "alt-system"
-    });
+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, mode, size })=>{
+const getToggleGroupItemClasses = ({ focusMode, size })=>{
     return {
-        wrapperClass: getToggleGroupItemWrapperClasses({
-            mode
-        }),
-        itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "flex items-center justify-center bg-transparent", "rounded-xs", "transition duration-200 ease", getToggleGroupItemSizeClasses({
+        wrapperClass: getToggleGroupItemWrapperClasses(),
+        itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "flex items-center justify-center bg-transparent", "transition duration-200 ease", getToggleGroupItemSizeClasses({
             size
         }), getToggleGroupItemFocusClasses({
             focusMode
-        }), getToggleGroupItemActiveClasses({
-            mode
-        }))
+        }), getToggleGroupItemActiveClasses())
     };
 };
-const getToggleGroupClasses = ({ mode, className })=>{
-    return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex p-1", "rounded-xs", {
-        "bg-surface-light text-copy-dark": mode === "light",
-        "bg-surface-darker text-copy-lighter": mode === "dark",
-        "bg-surface-light text-copy-dark dark:bg-surface-darker dark:text-copy-lighter": mode === "system",
-        "bg-surface-darker text-copy-lighter dark:bg-surface-light dark:text-copy-dark": mode === "alt-system"
-    }, className);
+const getToggleGroupClasses = ({ className })=>{
+    return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex", "rounded-md", "border border-border-medium", "bg-surface-light text-copy-dark/70", className);
 };
 
 
@@ -84,15 +64,13 @@ const getToggleGroupClasses = ({ mode, className })=>{
 
 
 
-const ToggleGroup = ({ children, value, onValueChange, disabled, mode = "system", focusMode = "system", size = "medium", defaultValue, className, ...otherProps })=>{
+const ToggleGroup = ({ children, value, onValueChange, disabled, focusMode = "system", size = "medium", defaultValue, className, ...otherProps })=>{
     const toggleGroupClasses = getToggleGroupClasses({
-        mode,
         className
     });
     const contextValue = {
         size,
-        focusMode,
-        mode
+        focusMode
     };
     return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
         value: contextValue,
@@ -108,11 +86,10 @@ const ToggleGroup = ({ children, value, onValueChange, disabled, mode = "system"
         })
     });
 };
-const ToggleGroupItem = ({ value, disabled })=>{
-    const { size, focusMode, mode } = useContext(ToggleGroupContext);
+const ToggleGroupItem = ({ value, disabled, children })=>{
+    const { size, focusMode } = useContext(ToggleGroupContext);
     const { itemClass, wrapperClass } = getToggleGroupItemClasses({
         focusMode,
-        mode,
         size
     });
     return /*#__PURE__*/ jsx("div", {
@@ -121,7 +98,7 @@ const ToggleGroupItem = ({ value, disabled })=>{
             disabled: disabled,
             className: itemClass,
             value: value,
-            children: value
+            children: children ?? value
         })
     });
 };

package/package.json

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