@versini/ui-togglegroup 5.3.1 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- @versini/ui-togglegroup v5.3.1
2
+ @versini/ui-togglegroup v5.4.0
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
@@ -26,11 +26,11 @@ const ToggleGroupContext = react.createContext({
26
26
 
27
27
 
28
28
  const getToggleGroupItemFocusClasses = ({ focusMode })=>{
29
- return clsx("focus:outline", "focus:outline-2", "focus:outline-offset", {
30
- "focus:outline-focus-light": focusMode === "light",
31
- "focus:outline-focus-dark": focusMode === "dark",
32
- "focus:outline-focus-light dark:focus:outline-focus-dark": focusMode === "alt-system",
33
- "focus:outline-focus-dark dark:focus:outline-focus-light": focusMode === "system"
29
+ return clsx("focus:outline-none", "focus:ring-2", "focus:ring-inset", {
30
+ "focus:ring-focus-light": focusMode === "light",
31
+ "focus:ring-focus-dark": focusMode === "dark",
32
+ "focus:ring-focus-light dark:focus:ring-focus-dark": focusMode === "alt-system",
33
+ "focus:ring-focus-dark dark:focus:ring-focus-light": focusMode === "system"
34
34
  });
35
35
  };
36
36
  const getToggleGroupItemActiveClasses = ({ mode })=>{
@@ -48,20 +48,13 @@ const getToggleGroupItemSizeClasses = ({ size })=>{
48
48
  "h-7 px-4": size === "large"
49
49
  });
50
50
  };
51
- const getToggleGroupItemWrapperClasses = ({ mode })=>{
52
- 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", {
53
- "border-surface-light": mode === "light",
54
- "border-surface-darker": mode === "dark",
55
- "border-surface-light dark:border-surface-darker": mode === "system",
56
- "border-surface-darker dark:border-surface-light": mode === "alt-system"
57
- });
51
+ const getToggleGroupItemWrapperClasses = ()=>{
52
+ 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");
58
53
  };
59
54
  const getToggleGroupItemClasses = ({ focusMode, mode, size })=>{
60
55
  return {
61
- wrapperClass: getToggleGroupItemWrapperClasses({
62
- mode
63
- }),
64
- itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "flex items-center justify-center bg-transparent", "rounded-xs", "transition duration-200 ease", getToggleGroupItemSizeClasses({
56
+ wrapperClass: getToggleGroupItemWrapperClasses(),
57
+ itemClass: clsx(TOGGLEGROUP_ITEM_CLASSNAME, "flex items-center justify-center bg-transparent", "transition duration-200 ease", getToggleGroupItemSizeClasses({
65
58
  size
66
59
  }), getToggleGroupItemFocusClasses({
67
60
  focusMode
@@ -71,7 +64,7 @@ const getToggleGroupItemClasses = ({ focusMode, mode, size })=>{
71
64
  };
72
65
  };
73
66
  const getToggleGroupClasses = ({ mode, className })=>{
74
- return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex p-1", "rounded-xs", {
67
+ return clsx(TOGGLEGROUP_CLASSNAME, "inline-flex", "rounded-md", "border border-border-medium", {
75
68
  "bg-surface-light text-copy-dark": mode === "light",
76
69
  "bg-surface-darker text-copy-lighter": mode === "dark",
77
70
  "bg-surface-light text-copy-dark dark:bg-surface-darker dark:text-copy-lighter": mode === "system",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-togglegroup",
3
- "version": "5.3.1",
3
+ "version": "5.4.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -42,10 +42,10 @@
42
42
  "dependencies": {
43
43
  "@radix-ui/react-toggle-group": "1.1.11",
44
44
  "clsx": "2.1.1",
45
- "tailwindcss": "4.2.0"
45
+ "tailwindcss": "4.2.1"
46
46
  },
47
47
  "sideEffects": [
48
48
  "**/*.css"
49
49
  ],
50
- "gitHead": "9129610bbd6d91a2bc6cac41b0ccf8430a13fa41"
50
+ "gitHead": "3555f2555648799e89f61a22fc2ff9ddb53db4a0"
51
51
  }