@versini/ui-togglegroup 5.2.2 → 5.3.1

package/dist/components/index.d.ts

@@ -1,2 +1,15 @@
-export * from "../common/constants";
-export * from "./ToggleGroup/ToggleGroup";
+import { JSX } from 'react/jsx-runtime';
+import type { ToggleGroupItemProps } from './ToggleGroupTypes';
+import type { ToggleGroupProps } from './ToggleGroupTypes';
+
+export declare const ToggleGroup: ({ children, value, onValueChange, disabled, mode, focusMode, size, defaultValue, className, ...otherProps }: ToggleGroupProps) => JSX.Element;
+
+export declare const TOGGLEGROUP_CLASSNAME = "av-togglegroup";
+
+export declare const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
+
+export declare const TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME = "av-togglegroup-item-wrapper";
+
+export declare const ToggleGroupItem: ({ value, disabled }: ToggleGroupItemProps) => JSX.Element;
+
+export { }

package/dist/components/index.js

@@ -1,12 +1,132 @@
 /*!
-  @versini/ui-togglegroup v5.2.2
-  © 2025 gizmette.com
+  @versini/ui-togglegroup v5.3.1
+  © 2026 gizmette.com
 */
 
-export * from "../common/constants.js";
-export * from "./ToggleGroup/ToggleGroup.js";
+import { jsx } from "react/jsx-runtime";
+import { Item, Root } from "@radix-ui/react-toggle-group";
+import react , { useContext } from "react";
+import clsx from "clsx";
 
-;// CONCATENATED MODULE: ./src/components/index.ts
+const TOGGLEGROUP_CLASSNAME = "av-togglegroup";
+const TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME = "av-togglegroup-item-wrapper";
+const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
 
 
 
+
+
+const ToggleGroupContext = react.createContext({
+    size: "medium",
+    focusMode: "system",
+    mode: "system"
+});
+
+
+
+
+const getToggleGroupItemFocusClasses = ({ focusMode })=>{
+    return clsx("focus:outline", "focus:outline-2", "focus:outline-offset", {
+        "focus:outline-focus-light": focusMode === "light",
+        "focus:outline-focus-dark": focusMode === "dark",
+        "focus:outline-focus-light dark:focus:outline-focus-dark": focusMode === "alt-system",
+        "focus:outline-focus-dark dark:focus:outline-focus-light": focusMode === "system"
+    });
+};
+const getToggleGroupItemActiveClasses = ({ mode })=>{
+    return clsx({
+        "data-[state=on]:bg-surface-medium": mode === "dark",
+        "data-[state=on]:bg-surface-lightest": mode === "light",
+        "data-[state=on]:bg-surface-lightest dark:data-[state=on]:bg-surface-medium": mode === "system",
+        "data-[state=on]:bg-surface-medium dark:data-[state=on]:bg-surface-lightest": mode === "alt-system"
+    });
+};
+const getToggleGroupItemSizeClasses = ({ size })=>{
+    return clsx({
+        "h-5 px-2": size === "small",
+        "h-6 px-3": size === "medium",
+        "h-7 px-4": size === "large"
+    });
+};
+const getToggleGroupItemWrapperClasses = ({ mode })=>{
+    return clsx(TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME, "px-1", "relative", "border-r", "last:border-transparent", "has-[button[aria-checked='true']]:border-transparent", "has-[+_*_button[aria-checked='false']]:border-border-medium", {
+        "border-surface-light": mode === "light",
+        "border-surface-darker": mode === "dark",
+        "border-surface-light dark:border-surface-darker": mode === "system",
+        "border-surface-darker dark:border-surface-light": mode === "alt-system"
+    });
+};
+const getToggleGroupItemClasses = ({ focusMode, mode, size })=>{
+    return {
+        wrapperClass: getToggleGroupItemWrapperClasses({
+            mode
+        }),
+        itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "flex items-center justify-center bg-transparent", "rounded-xs", "transition duration-200 ease", getToggleGroupItemSizeClasses({
+            size
+        }), getToggleGroupItemFocusClasses({
+            focusMode
+        }), getToggleGroupItemActiveClasses({
+            mode
+        }))
+    };
+};
+const getToggleGroupClasses = ({ mode, className })=>{
+    return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex p-1", "rounded-xs", {
+        "bg-surface-light text-copy-dark": mode === "light",
+        "bg-surface-darker text-copy-lighter": mode === "dark",
+        "bg-surface-light text-copy-dark dark:bg-surface-darker dark:text-copy-lighter": mode === "system",
+        "bg-surface-darker text-copy-lighter dark:bg-surface-light dark:text-copy-dark": mode === "alt-system"
+    }, className);
+};
+
+
+
+
+
+
+const ToggleGroup = ({ children, value, onValueChange, disabled, mode = "system", focusMode = "system", size = "medium", defaultValue, className, ...otherProps })=>{
+    const toggleGroupClasses = getToggleGroupClasses({
+        mode,
+        className
+    });
+    const contextValue = {
+        size,
+        focusMode,
+        mode
+    };
+    return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(Root, {
+            disabled: disabled,
+            className: toggleGroupClasses,
+            value: value,
+            defaultValue: defaultValue,
+            onValueChange: onValueChange,
+            ...otherProps,
+            type: "single",
+            children: children
+        })
+    });
+};
+const ToggleGroupItem = ({ value, disabled })=>{
+    const { size, focusMode, mode } = useContext(ToggleGroupContext);
+    const { itemClass, wrapperClass } = getToggleGroupItemClasses({
+        focusMode,
+        mode,
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: wrapperClass,
+        children: /*#__PURE__*/ jsx(Item, {
+            disabled: disabled,
+            className: itemClass,
+            value: value,
+            children: value
+        })
+    });
+};
+
+
+
+
+export { TOGGLEGROUP_CLASSNAME, TOGGLEGROUP_ITEM_CLASSNAME, TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME, ToggleGroup, ToggleGroupItem };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-togglegroup",
-	"version": "5.2.2",
+	"version": "5.3.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -41,12 +41,11 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-toggle-group": "1.1.11",
-		"@tailwindcss/typography": "0.5.19",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.1.18"
+		"tailwindcss": "4.2.0"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "fae53f4bd56440f7a72ed63b1a2a02b0c3b5a7e6"
+	"gitHead": "9129610bbd6d91a2bc6cac41b0ccf8430a13fa41"
 }

package/dist/common/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const TOGGLEGROUP_CLASSNAME = "av-togglegroup";
-export declare const TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME = "av-togglegroup-item-wrapper";
-export declare const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";

package/dist/common/constants.js

@@ -1,12 +0,0 @@
-/*!
-  @versini/ui-togglegroup v5.2.2
-  © 2025 gizmette.com
-*/
-
-
-;// CONCATENATED MODULE: ./src/common/constants.ts
-const TOGGLEGROUP_CLASSNAME = "av-togglegroup";
-const TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME = "av-togglegroup-item-wrapper";
-const TOGGLEGROUP_ITEM_CLASSNAME = "av-togglegroup-item";
-
-export { TOGGLEGROUP_CLASSNAME, TOGGLEGROUP_ITEM_CLASSNAME, TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME };

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,3 +0,0 @@
-import type { ToggleGroupItemProps, ToggleGroupProps } from "./ToggleGroupTypes";
-export declare const ToggleGroup: ({ children, value, onValueChange, disabled, mode, focusMode, size, defaultValue, className, ...otherProps }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ToggleGroupItem: ({ value, disabled }: ToggleGroupItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,70 +0,0 @@
-/*!
-  @versini/ui-togglegroup v5.2.2
-  © 2025 gizmette.com
-*/
-
-import { jsx } from "react/jsx-runtime";
-import { Item, Root } from "@radix-ui/react-toggle-group";
-import { useContext } from "react";
-import { ToggleGroupContext } from "./ToggleGroupContext.js";
-import { getToggleGroupClasses, getToggleGroupItemClasses } from "./utilities.js";
-
-;// CONCATENATED MODULE: external "react/jsx-runtime"
-
-;// CONCATENATED MODULE: external "@radix-ui/react-toggle-group"
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: external "./ToggleGroupContext.js"
-
-;// CONCATENATED MODULE: external "./utilities.js"
-
-;// CONCATENATED MODULE: ./src/components/ToggleGroup/ToggleGroup.tsx
-
-
-
-
-
-const ToggleGroup = ({ children, value, onValueChange, disabled, mode = "system", focusMode = "system", size = "medium", defaultValue, className, ...otherProps })=>{
-    const toggleGroupClasses = getToggleGroupClasses({
-        mode,
-        className
-    });
-    const contextValue = {
-        size,
-        focusMode,
-        mode
-    };
-    return /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
-        value: contextValue,
-        children: /*#__PURE__*/ jsx(Root, {
-            disabled: disabled,
-            className: toggleGroupClasses,
-            value: value,
-            defaultValue: defaultValue,
-            onValueChange: onValueChange,
-            ...otherProps,
-            type: "single",
-            children: children
-        })
-    });
-};
-const ToggleGroupItem = ({ value, disabled })=>{
-    const { size, focusMode, mode } = useContext(ToggleGroupContext);
-    const { itemClass, wrapperClass } = getToggleGroupItemClasses({
-        focusMode,
-        mode,
-        size
-    });
-    return /*#__PURE__*/ jsx("div", {
-        className: wrapperClass,
-        children: /*#__PURE__*/ jsx(Item, {
-            disabled: disabled,
-            className: itemClass,
-            value: value,
-            children: value
-        })
-    });
-};
-
-export { ToggleGroup, ToggleGroupItem };

package/dist/components/ToggleGroup/ToggleGroupContext.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import type { Mode, Size } from "./ToggleGroupTypes";
-export declare const ToggleGroupContext: React.Context<{
-    size: Size;
-    focusMode: Mode;
-    mode: Mode;
-}>;

package/dist/components/ToggleGroup/ToggleGroupContext.js

@@ -1,18 +0,0 @@
-/*!
-  @versini/ui-togglegroup v5.2.2
-  © 2025 gizmette.com
-*/
-
-import react from "react";
-
-;// CONCATENATED MODULE: external "react"
-
-;// CONCATENATED MODULE: ./src/components/ToggleGroup/ToggleGroupContext.ts
-
-const ToggleGroupContext = react.createContext({
-    size: "medium",
-    focusMode: "system",
-    mode: "system"
-});
-
-export { ToggleGroupContext };

package/dist/components/ToggleGroup/utilities.d.ts

@@ -1,13 +0,0 @@
-import type { Mode, Size } from "./ToggleGroupTypes";
-export declare const getToggleGroupItemClasses: ({ focusMode, mode, size, }: {
-    focusMode: Mode;
-    mode: Mode;
-    size: Size;
-}) => {
-    wrapperClass: string;
-    itemClass: string;
-};
-export declare const getToggleGroupClasses: ({ mode, className, }: {
-    mode: Mode;
-    className: string;
-}) => string;

package/dist/components/ToggleGroup/utilities.js

@@ -1,70 +0,0 @@
-/*!
-  @versini/ui-togglegroup v5.2.2
-  © 2025 gizmette.com
-*/
-
-import clsx from "clsx";
-import { TOGGLEGROUP_CLASSNAME, TOGGLEGROUP_ITEM_CLASSNAME, TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME } from "../../common/constants.js";
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "../../common/constants.js"
-
-;// CONCATENATED MODULE: ./src/components/ToggleGroup/utilities.ts
-
-
-const getToggleGroupItemFocusClasses = ({ focusMode })=>{
-    return clsx("focus:outline", "focus:outline-2", "focus:outline-offset", {
-        "focus:outline-focus-light": focusMode === "light",
-        "focus:outline-focus-dark": focusMode === "dark",
-        "focus:outline-focus-light dark:focus:outline-focus-dark": focusMode === "alt-system",
-        "focus:outline-focus-dark dark:focus:outline-focus-light": focusMode === "system"
-    });
-};
-const getToggleGroupItemActiveClasses = ({ mode })=>{
-    return clsx({
-        "data-[state=on]:bg-surface-medium": mode === "dark",
-        "data-[state=on]:bg-surface-lightest": mode === "light",
-        "data-[state=on]:bg-surface-lightest dark:data-[state=on]:bg-surface-medium": mode === "system",
-        "data-[state=on]:bg-surface-medium dark:data-[state=on]:bg-surface-lightest": mode === "alt-system"
-    });
-};
-const getToggleGroupItemSizeClasses = ({ size })=>{
-    return clsx({
-        "h-5 px-2": size === "small",
-        "h-6 px-3": size === "medium",
-        "h-7 px-4": size === "large"
-    });
-};
-const getToggleGroupItemWrapperClasses = ({ mode })=>{
-    return clsx(TOGGLEGROUP_ITEM_WRAPPER_CLASSNAME, "px-1", "relative", "border-r", "last:border-transparent", "has-[button[aria-checked='true']]:border-transparent", "has-[+_*_button[aria-checked='false']]:border-border-medium", {
-        "border-surface-light": mode === "light",
-        "border-surface-darker": mode === "dark",
-        "border-surface-light dark:border-surface-darker": mode === "system",
-        "border-surface-darker dark:border-surface-light": mode === "alt-system"
-    });
-};
-const getToggleGroupItemClasses = ({ focusMode, mode, size })=>{
-    return {
-        wrapperClass: getToggleGroupItemWrapperClasses({
-            mode
-        }),
-        itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "flex items-center justify-center bg-transparent", "rounded-xs", "transition duration-200 ease", getToggleGroupItemSizeClasses({
-            size
-        }), getToggleGroupItemFocusClasses({
-            focusMode
-        }), getToggleGroupItemActiveClasses({
-            mode
-        }))
-    };
-};
-const getToggleGroupClasses = ({ mode, className })=>{
-    return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex p-1", "rounded-xs", {
-        "bg-surface-light text-copy-dark": mode === "light",
-        "bg-surface-darker text-copy-lighter": mode === "dark",
-        "bg-surface-light text-copy-dark dark:bg-surface-darker dark:text-copy-lighter": mode === "system",
-        "bg-surface-darker text-copy-lighter dark:bg-surface-light dark:text-copy-dark": mode === "alt-system"
-    }, className);
-};
-
-export { getToggleGroupClasses, getToggleGroupItemClasses };