@versini/ui-togglegroup 6.0.3 → 6.1.0

package/dist/components/index.d.ts

@@ -1,8 +1,9 @@
 import { JSX } from 'react/jsx-runtime';
-import type { ToggleGroupItemProps } from './ToggleGroupTypes';
-import type { ToggleGroupProps } from './ToggleGroupTypes';
+import type * as ToggleGroupRadix from '@radix-ui/react-toggle-group';
 
-export declare const ToggleGroup: ({ children, value, onValueChange, disabled, size, defaultValue, className, ...otherProps }: ToggleGroupProps) => JSX.Element;
+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_CLASSNAME = "av-togglegroup";
 
@@ -12,4 +13,43 @@ export declare const TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME = "av-togglegroup-item-w
 
 export declare const ToggleGroupItem: ({ value, disabled, children, }: ToggleGroupItemProps) => JSX.Element;
 
+declare type ToggleGroupItemProps = ToggleGroupRadix.ToggleGroupItemProps;
+
+declare type ToggleGroupProps = {
+    /**
+     * The content of the component (ToggleGroupItem elements).
+     */
+    children: React.ReactNode;
+    /**
+     * The controlled value of the pressed item.
+     */
+    value?: string;
+    /**
+     * The value of the item to show as pressed when initially rendered.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether or not the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the component.
+     */
+    size?: Size;
+    /**
+     * The classes to apply to the component.
+     */
+    className?: string;
+    /**
+     * Whether or not to render the active item with a split background
+     * gradient overlay (aqua-style).
+     * @default false
+     */
+    splitBackground?: boolean;
+};
+
 export { }

package/dist/components/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-togglegroup v6.0.3
+  @versini/ui-togglegroup v6.1.0
   © 2026 gizmette.com
 */
 
@@ -17,7 +17,8 @@ const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
 
 
 const ToggleGroupContext = react.createContext({
-    size: "medium"
+    size: "medium",
+    splitBackground: false
 });
 
 
@@ -26,8 +27,12 @@ const ToggleGroupContext = react.createContext({
 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");
+// 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 getToggleGroupItemSizeClasses = ({ size })=>{
     return clsx({
@@ -46,12 +51,14 @@ 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 })=>{
+const getToggleGroupItemClasses = ({ size, splitBackground })=>{
     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())
+        }), getToggleGroupItemFocusClasses(), getToggleGroupItemActiveClasses({
+            splitBackground
+        }))
     };
 };
 const getToggleGroupClasses = ({ className, size })=>{
@@ -65,13 +72,14 @@ const getToggleGroupClasses = ({ className, size })=>{
 
 
 
-const ToggleGroup = ({ children, value, onValueChange, disabled, size = "medium", defaultValue, className, ...otherProps })=>{
+const ToggleGroup = ({ children, value, onValueChange, disabled, size = "medium", defaultValue, className, splitBackground = false })=>{
     const toggleGroupClasses = getToggleGroupClasses({
         className,
         size
     });
     const contextValue = {
-        size
+        size,
+        splitBackground
     };
     return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
         value: contextValue,
@@ -81,16 +89,16 @@ const ToggleGroup = ({ children, value, onValueChange, disabled, size = "medium"
             value: value,
             defaultValue: defaultValue,
             onValueChange: onValueChange,
-            ...otherProps,
             type: "single",
             children: children
         })
     });
 };
 const ToggleGroupItem = ({ value, disabled, children })=>{
-    const { size } = useContext(ToggleGroupContext);
+    const { size, splitBackground } = useContext(ToggleGroupContext);
     const { itemClass, wrapperClass } = getToggleGroupItemClasses({
-        size
+        size,
+        splitBackground
     });
     return /*#__PURE__*/ jsx("div", {
         className: wrapperClass,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-togglegroup",
-	"version": "6.0.3",
+	"version": "6.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -47,5 +47,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "08f46d8b356d5cfbb4e58dca300428ed6bb03789"
+	"gitHead": "af3ee18b6fc3d57977ec331df0ce151794e29342"
 }