@versini/ui-togglegroup 7.0.3 → 8.0.1

package/dist/components/index.d.ts

@@ -3,7 +3,7 @@ import type * as ToggleGroupRadix from '@radix-ui/react-toggle-group';
 
 declare type Size = "small" | "medium" | "large";
 
-export declare const ToggleGroup: ({ children, value, onValueChange, disabled, size, defaultValue, className, splitBackground, }: ToggleGroupProps) => JSX.Element;
+export declare const ToggleGroup: ({ children, value, onValueChange, disabled, size, defaultValue, className, flat, }: ToggleGroupProps) => JSX.Element;
 
 export declare const TOGGLEGROUP_CLASSNAME = "av-togglegroup";
 
@@ -45,11 +45,11 @@ declare type ToggleGroupProps = {
      */
     className?: string;
     /**
-     * Whether or not to render the active item with a split background
-     * gradient overlay (aqua-style).
+     * Whether to render the ToggleGroup with a flat solid background
+     * instead of the default Aqua-style gradient overlay.
      * @default false
      */
-    splitBackground?: boolean;
+    flat?: boolean;
 };
 
 export { }

package/dist/components/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-togglegroup v7.0.3
+  @versini/ui-togglegroup v8.0.1
   © 2026 gizmette.com
 */
 
@@ -18,7 +18,7 @@ const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
 
 const ToggleGroupContext = react.createContext({
     size: "medium",
-    splitBackground: false
+    flat: false
 });
 
 
@@ -27,8 +27,8 @@ const ToggleGroupContext = react.createContext({
 const getToggleGroupItemFocusClasses = ()=>{
     return clsx("focus:outline-none", "focus:ring-2", "focus:ring-inset", "focus:ring-focus-dark");
 };
-const getToggleGroupItemActiveClasses = ({ splitBackground })=>{
-    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", splitBackground && "av-bg-split-overlay");
+const getToggleGroupItemActiveClasses = ({ flat })=>{
+    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", !flat && "av-bg-split-overlay");
 };
 const getToggleGroupItemSizeClasses = ({ size })=>{
     return clsx({
@@ -47,13 +47,13 @@ const getToggleGroupSizeClasses = ({ size })=>{
 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 = ({ size, splitBackground })=>{
+const getToggleGroupItemClasses = ({ size, flat })=>{
     return {
         wrapperClass: getToggleGroupItemWrapperClasses(),
         itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "text-sm cursor-pointer", "flex items-center justify-center bg-transparent", "transition duration-200 ease", getToggleGroupItemSizeClasses({
             size
         }), getToggleGroupItemFocusClasses(), getToggleGroupItemActiveClasses({
-            splitBackground
+            flat
         }))
     };
 };
@@ -68,14 +68,14 @@ const getToggleGroupClasses = ({ className, size })=>{
 
 
 
-const ToggleGroup = ({ children, value, onValueChange, disabled, size = "medium", defaultValue, className, splitBackground = false })=>{
+const ToggleGroup = ({ children, value, onValueChange, disabled, size = "medium", defaultValue, className, flat = false })=>{
     const toggleGroupClasses = getToggleGroupClasses({
         className,
         size
     });
     const contextValue = {
         size,
-        splitBackground
+        flat
     };
     return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
         value: contextValue,
@@ -91,10 +91,10 @@ const ToggleGroup = ({ children, value, onValueChange, disabled, size = "medium"
     });
 };
 const ToggleGroupItem = ({ value, disabled, children })=>{
-    const { size, splitBackground } = useContext(ToggleGroupContext);
+    const { size, flat } = useContext(ToggleGroupContext);
     const { itemClass, wrapperClass } = getToggleGroupItemClasses({
         size,
-        splitBackground
+        flat
     });
     return /*#__PURE__*/ jsx("div", {
         className: wrapperClass,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-togglegroup",
-	"version": "7.0.3",
+	"version": "8.0.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -41,15 +41,15 @@
 		"test:visual:ui": "playwright test -c playwright-ct.config.ts --ui"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "9.1.0"
+		"@versini/ui-types": "10.0.0"
 	},
 	"dependencies": {
 		"@radix-ui/react-toggle-group": "1.1.11",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.2.2"
+		"tailwindcss": "4.2.4"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "738b2918169bc39087fc7dc4b04752970b06087e"
+	"gitHead": "d2dedb845254fccb7fbb6a5e0249e263c7951a7a"
 }