@versini/ui-togglegroup 6.0.3 → 7.0.0

package/README.md

@@ -20,7 +20,6 @@ The ToggleGroup component provides grouped toggle buttons for single-select usag
 - **🔢 Grouped Selection**: Manage a set of related options with single selection
 - **♿ Accessible**: Built atop Radix primitives with robust a11y patterns
 - **🎨 Theming & Sizes**: Supports light/dark/system modes & `small | medium | large` sizes
-- **🎯 Focus Styles**: Independent `focusMode` to align with design tokens
 - **⌨️ Keyboard Friendly**: Arrow key navigation & typeahead labeling
 - **🧪 Type Safe**: Strongly typed props and context sharing
 
@@ -88,12 +87,7 @@ function App() {
 ### Themed Group (Dark)
 
 ```tsx
-<ToggleGroup
-  mode="dark"
-  focusMode="light"
-  value={theme}
-  onValueChange={setTheme}
->
+<ToggleGroup mode="dark" value={theme} onValueChange={setTheme}>
   <ToggleGroupItem value="auto" />
   <ToggleGroupItem value="light" />
   <ToggleGroupItem value="dark" />
@@ -105,13 +99,12 @@ function App() {
 ### ToggleGroup Props
 
 | Prop            | Type                      | Default  | Description                               |
-| --------------- | ------------------------- | -------- | ----------------------------------------- | ------------- | --------------------- | -------------------------- |
+| --------------- | ------------------------- | -------- | ----------------------------------------- | ------------- | --------------------- | ------------------- |
 | `value`         | `string`                  | -        | Current selected value (controlled).      |
 | `defaultValue`  | `string`                  | -        | Initial value (uncontrolled).             |
 | `onValueChange` | `(value: string) => void` | -        | Fired when selection changes.             |
 | `disabled`      | `boolean`                 | -        | Disable the entire group.                 |
-| `mode`          | `"dark"                   | "light"  | "system"                                  | "alt-system"` | `"system"`            | Color / theme mode.        |
-| `focusMode`     | `"dark"                   | "light"  | "system"                                  | "alt-system"` | `"system"`            | Color mode for focus ring. |
+| `mode`          | `"dark"                   | "light"  | "system"                                  | "alt-system"` | `"system"`            | Color / theme mode. |
 | `size`          | `"small"                  | "medium" | "large"`                                  | `"medium"`    | Visual size of items. |
 | `className`     | `string`                  | -        | Extra class(es) applied to container.     |
 | `children`      | `React.ReactNode`         | -        | One or more `ToggleGroupItem` components. |

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 v7.0.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": "7.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -37,7 +37,7 @@
 		"test": "vitest run"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "8.4.0"
+		"@versini/ui-types": "9.0.0"
 	},
 	"dependencies": {
 		"@radix-ui/react-toggle-group": "1.1.11",
@@ -47,5 +47,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "08f46d8b356d5cfbb4e58dca300428ed6bb03789"
+	"gitHead": "a295349019d1512796f266bba535de383f12b6ee"
 }