@versini/ui-togglegroup 4.0.8 → 4.0.10

package/README.md

@@ -1,17 +1,28 @@
 # @versini/ui-togglegroup
 
 [![npm version](https://img.shields.io/npm/v/@versini/ui-togglegroup?style=flat-square)](https://www.npmjs.com/package/@versini/ui-togglegroup)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-togglegroup?style=flat-square&label=size%20(gzip)>)
 
 > An accessible React toggle button group component built with TypeScript and TailwindCSS.
 
-The ToggleGroup component provides grouped toggle buttons for single or multiple selections with proper accessibility and keyboard navigation.
-
+The ToggleGroup component provides grouped toggle buttons for single-select usage with proper accessibility, typeahead support (via Radix), theming, sizing and focus management.
 
 ## Table of Contents
 
 - [Features](#features)
 - [Installation](#installation)
 - [Usage](#usage)
+- [Examples](#examples)
+- [API](#api)
+
+## Features
+
+- **🔢 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
 
 ## Installation
 
@@ -19,7 +30,7 @@ The ToggleGroup component provides grouped toggle buttons for single or multiple
 npm install @versini/ui-togglegroup
 ```
 
-> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
 
 ## Usage
 
@@ -28,7 +39,7 @@ import { ToggleGroup } from "@versini/ui-togglegroup";
 
 function App() {
   const [selected, setSelected] = useState("left");
-  
+
   return (
     <ToggleGroup
       value={selected}
@@ -42,3 +53,57 @@ function App() {
   );
 }
 ```
+
+## Examples
+
+### Large Size Group
+
+```tsx
+<ToggleGroup size="large" value={alignment} onValueChange={setAlignment}>
+  <ToggleGroupItem value="left" />
+  <ToggleGroupItem value="center" />
+  <ToggleGroupItem value="right" />
+</ToggleGroup>
+```
+
+### Themed Group (Dark)
+
+```tsx
+<ToggleGroup
+  mode="dark"
+  focusMode="light"
+  value={theme}
+  onValueChange={setTheme}
+>
+  <ToggleGroupItem value="auto" />
+  <ToggleGroupItem value="light" />
+  <ToggleGroupItem value="dark" />
+</ToggleGroup>
+```
+
+## API
+
+### 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. |
+| `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. |
+
+> Inherits other valid props from `@radix-ui/react-toggle-group` single variant (except `type`, `defaultValue` already controlled internally).
+
+### ToggleGroupItem Props
+
+| Prop       | Type      | Default | Description                            |
+| ---------- | --------- | ------- | -------------------------------------- |
+| `value`    | `string`  | -       | Value represented by this toggle item. |
+| `disabled` | `boolean` | -       | Disable just this item.                |
+
+> Item content is the `value` string by default; you can customize by extending the component if needed.

package/dist/index.js

@@ -1,12 +1,12 @@
 import { TOGGLEGROUP_CLASSNAME as E, TOGGLEGROUP_ITEM_CLASSNAME as e, TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME as T, ToggleGroup as i, ToggleGroupItem as r } from "./components/ToggleGroup/ToggleGroup.js";
 /*!
-  @versini/ui-togglegroup v4.0.8
+  @versini/ui-togglegroup v4.0.10
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TOGGLEGROUP__ || (window.__VERSINI_UI_TOGGLEGROUP__ = {
-    version: "4.0.8",
-    buildTime: "08/23/2025 09:08 AM EDT",
+    version: "4.0.10",
+    buildTime: "08/23/2025 12:22 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-togglegroup",
-	"version": "4.0.8",
+	"version": "4.0.10",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -52,5 +52,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7bbfa99a4441ef5b0828a37d190f694e199b663d"
+	"gitHead": "d568e20474c6c87f836c4cb6548f2cc0143a353c"
 }