@versini/ui-togglegroup 7.0.2 → 8.0.0

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.2
+  @versini/ui-togglegroup v8.0.0
   © 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,12 +27,8 @@ const ToggleGroupContext = react.createContext({
 const getToggleGroupItemFocusClasses = ()=>{
     return clsx("focus:outline-none", "focus:ring-2", "focus:ring-inset", "focus:ring-focus-dark");
 };
-// Aqua-style split background overlay:
-// - Top half: flat white overlay (light, uniform)
-// - Bottom half: starts darker, gradually lightens toward the bottom edge
-const BG_SPLIT_OVERLAY = "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 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 && 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({
@@ -51,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
         }))
     };
 };
@@ -72,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,
@@ -95,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.2",
+	"version": "8.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -34,10 +34,14 @@
 		"test:coverage:ui": "vitest --coverage --ui",
 		"test:coverage": "vitest run --coverage",
 		"test:watch": "vitest",
-		"test": "vitest run"
+		"test": "vitest run",
+		"test:visual": "playwright test -c playwright-ct.config.ts",
+		"test:visual:report": "playwright show-report playwright-report",
+		"test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+		"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",
@@ -47,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7cec17f37e7c539ba81294ec754563b4e5733ce8"
+	"gitHead": "0c985a7fdf2ab23b36c43b42663d9625d0ccb4c5"
 }