@versini/ui-button 11.3.3 → 11.3.5

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,16 +1,11 @@
1
1
  /*!
2
- @versini/ui-button v11.3.3
2
+ @versini/ui-button v11.3.5
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
6
- import { jsx } from "react/jsx-runtime";
7
- import "react";
6
+ import { jsx } from "./188.js";
8
7
 
9
- ;// CONCATENATED MODULE: external "react/jsx-runtime"
10
8
 
11
- ;// CONCATENATED MODULE: external "react"
12
-
13
- ;// CONCATENATED MODULE: ./src/components/private/BaseButton.tsx
14
9
 
15
10
 
16
11
  /**
@@ -45,3 +40,4 @@ import "react";
45
40
  }
46
41
 
47
42
  export { BaseButton_private };
43
+ export { useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -1,19 +1,11 @@
1
1
  /*!
2
- @versini/ui-button v11.3.3
2
+ @versini/ui-button v11.3.5
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
6
- import { jsx } from "react/jsx-runtime";
7
- import { BaseButton_private } from "../private/BaseButton.js";
8
- import { TYPE_BUTTON, getButtonClasses } from "./utilities.js";
6
+ import { getButtonClasses, TYPE_BUTTON, jsx } from "../../188.js";
7
+ import { BaseButton_private } from "../../795.js";
9
8
 
10
- ;// CONCATENATED MODULE: external "react/jsx-runtime"
11
-
12
- ;// CONCATENATED MODULE: external "../private/BaseButton.js"
13
-
14
- ;// CONCATENATED MODULE: external "./utilities.js"
15
-
16
- ;// CONCATENATED MODULE: ./src/components/Button/Button.tsx
17
9
 
18
10
 
19
11
 
@@ -1,22 +1,14 @@
1
1
  /*!
2
- @versini/ui-button v11.3.3
2
+ @versini/ui-button v11.3.5
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
6
- import { jsx } from "react/jsx-runtime";
7
6
  import { IconCopied, IconCopy } from "@versini/ui-icons";
8
- import { useEffect, useState } from "react";
9
- import { ButtonIcon } from "./ButtonIcon.js";
7
+ import { jsx } from "../../188.js";
8
+ import { useState, useEffect } from "../../795.js";
9
+ import { ButtonIcon } from "../../370.js";
10
10
 
11
- ;// CONCATENATED MODULE: external "react/jsx-runtime"
12
11
 
13
- ;// CONCATENATED MODULE: external "@versini/ui-icons"
14
-
15
- ;// CONCATENATED MODULE: external "react"
16
-
17
- ;// CONCATENATED MODULE: external "./ButtonIcon.js"
18
-
19
- ;// CONCATENATED MODULE: ./src/components/Button/ButtonCopy.tsx
20
12
 
21
13
 
22
14
 
@@ -1,232 +1,7 @@
1
1
  /*!
2
- @versini/ui-button v11.3.3
2
+ @versini/ui-button v11.3.5
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
6
- import { jsx, jsxs } from "react/jsx-runtime";
7
- import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
8
- import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
9
- import { useEffect, useLayoutEffect, useRef } from "react";
10
- import { BaseButton_private } from "../private/BaseButton.js";
11
- import { TYPE_ICON, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses } from "./utilities.js";
12
6
 
13
- ;// CONCATENATED MODULE: external "react/jsx-runtime"
14
-
15
- ;// CONCATENATED MODULE: external "@versini/ui-hooks/use-merge-refs"
16
-
17
- ;// CONCATENATED MODULE: external "@versini/ui-hooks/use-resize-observer"
18
-
19
- ;// CONCATENATED MODULE: external "react"
20
-
21
- ;// CONCATENATED MODULE: external "../private/BaseButton.js"
22
-
23
- ;// CONCATENATED MODULE: external "./utilities.js"
24
-
25
- ;// CONCATENATED MODULE: ./src/components/Button/ButtonIcon.tsx
26
-
27
-
28
-
29
-
30
-
31
-
32
- const WIDTH = {
33
- small: 24,
34
- medium: 32,
35
- large: 48
36
- };
37
- const PADDINGS = {
38
- small: 8 * 2,
39
- medium: 12 * 2,
40
- large: 16 * 2
41
- };
42
- const BORDERS = 2; // border x 2
43
- const ANIMATION_DURATION = 300; // ms - should match the CSS transition duration
44
- function ButtonIcon({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, type = "button", raw = false, noBorder = false, "aria-label": ariaLabel, label, size = "medium", labelRight, labelLeft, noBackground = false, align = "center", radius = "large", variant = "secondary", iconClassName, animated = false, badge, ref, ...otherProps }) {
45
- const buttonClass = getButtonClasses({
46
- type: TYPE_ICON,
47
- mode,
48
- focusMode,
49
- fullWidth,
50
- disabled,
51
- raw,
52
- className,
53
- noBorder,
54
- size,
55
- labelRight,
56
- labelLeft,
57
- noBackground,
58
- align,
59
- radius,
60
- variant,
61
- animated,
62
- badge
63
- });
64
- const iconClass = getIconClasses({
65
- mode,
66
- raw,
67
- iconClassName,
68
- variant
69
- });
70
- const labelClass = getButtonIconLabelClasses({
71
- animated
72
- });
73
- // Create a combined class for the button content wrapper
74
- const contentWrapperClass = "flex items-center justify-center relative w-full h-full overflow-hidden";
75
- const [labelRightRef, rectR] = useResizeObserver();
76
- const [labelLeftRef, rectL] = useResizeObserver();
77
- const [iconRef, rectIcon] = useResizeObserver();
78
- const bufferRef = useRef(0);
79
- const buttonRef = useRef(null);
80
- const timeoutRef = useRef(null);
81
- const mergedRef = useMergeRefs([
82
- ref,
83
- buttonRef
84
- ]);
85
- /**
86
- * Effect to calculate the buffer to add to the width of the button to
87
- * account for the icon, paddings and borders.
88
- */ useLayoutEffect(()=>{
89
- /* v8 ignore start */ if (iconRef && iconRef.current && animated) {
90
- bufferRef.current = rectIcon.width + PADDINGS[size] + (noBorder ? 0 : BORDERS);
91
- // Set initial button width if it hasn't been set yet
92
- if (buttonRef.current && !buttonRef.current.style.width) {
93
- buttonRef.current.style.width = `${WIDTH[size]}px`;
94
- }
95
- }
96
- /* v8 ignore stop */ }, [
97
- rectIcon,
98
- iconRef,
99
- size,
100
- noBorder,
101
- animated
102
- ]);
103
- /**
104
- * Effect to update the width of the button based on the visibility of
105
- * the right and left labels.
106
- */ useLayoutEffect(()=>{
107
- /* v8 ignore start */ if (buttonRef && buttonRef.current && animated) {
108
- // Calculate the target width first
109
- let newWidth = WIDTH[size];
110
- if (labelRight && labelRightRef && rectR.width > 0) {
111
- newWidth = rectR.width + bufferRef.current;
112
- } else if (labelLeft && labelLeftRef && rectL.width > 0) {
113
- newWidth = rectL.width + bufferRef.current;
114
- }
115
- // Clear any existing timeout to prevent race conditions
116
- if (timeoutRef.current) {
117
- clearTimeout(timeoutRef.current);
118
- }
119
- // Start transition - expand button first
120
- if (newWidth !== parseInt(buttonRef.current.style.width || "0", 10)) {
121
- // Make sure labels are hidden during width transition
122
- if (labelRightRef.current) {
123
- labelRightRef.current.style.opacity = "0";
124
- }
125
- if (labelLeftRef.current) {
126
- labelLeftRef.current.style.opacity = "0";
127
- }
128
- // Set the width to trigger the transition
129
- buttonRef.current.style.width = `${newWidth}px`;
130
- // After button width transition completes, show the label
131
- if (newWidth > WIDTH[size]) {
132
- timeoutRef.current = setTimeout(()=>{
133
- if (labelRightRef.current && labelRight) {
134
- labelRightRef.current.style.opacity = "1";
135
- }
136
- if (labelLeftRef.current && labelLeft) {
137
- labelLeftRef.current.style.opacity = "1";
138
- }
139
- timeoutRef.current = null;
140
- }, ANIMATION_DURATION * 0.8); // Wait for most of the width transition to complete
141
- }
142
- }
143
- // If transitioning to icon-only state, hide labels immediately
144
- if (newWidth === WIDTH[size]) {
145
- if (labelRightRef.current) {
146
- labelRightRef.current.style.opacity = "0";
147
- }
148
- if (labelLeftRef.current) {
149
- labelLeftRef.current.style.opacity = "0";
150
- }
151
- }
152
- }
153
- /* v8 ignore stop */ }, [
154
- rectR,
155
- labelRight,
156
- labelRightRef,
157
- rectL,
158
- labelLeft,
159
- labelLeftRef,
160
- size,
161
- animated
162
- ]);
163
- // Clean up timeout on unmount
164
- /* v8 ignore start */ useEffect(()=>{
165
- return ()=>{
166
- if (timeoutRef.current) {
167
- clearTimeout(timeoutRef.current);
168
- }
169
- };
170
- }, []);
171
- /* v8 ignore stop */ const badgeInfo = getBadgeClasses({
172
- size,
173
- badge
174
- });
175
- return /*#__PURE__*/ jsxs(BaseButton_private, {
176
- ref: mergedRef,
177
- className: buttonClass,
178
- disabled: disabled,
179
- type: type,
180
- "aria-label": ariaLabel || label,
181
- ...otherProps,
182
- children: [
183
- /*#__PURE__*/ jsxs("div", {
184
- className: contentWrapperClass,
185
- children: [
186
- /*#__PURE__*/ jsx(ButtonLabel, {
187
- label: labelLeft,
188
- labelRef: labelLeftRef,
189
- labelClass: labelClass,
190
- labelInnerClass: "pr-2",
191
- initiallyHidden: animated
192
- }),
193
- /*#__PURE__*/ jsx("span", {
194
- ref: iconRef,
195
- className: iconClass,
196
- children: children
197
- }),
198
- /*#__PURE__*/ jsx(ButtonLabel, {
199
- label: labelRight,
200
- labelRef: labelRightRef,
201
- labelClass: labelClass,
202
- labelInnerClass: "pl-2",
203
- initiallyHidden: animated
204
- })
205
- ]
206
- }),
207
- badgeInfo && /*#__PURE__*/ jsx("span", {
208
- className: badgeInfo.className,
209
- "aria-hidden": "true",
210
- children: badgeInfo.displayValue
211
- })
212
- ]
213
- });
214
- }
215
- const ButtonLabel = ({ labelRef, labelClass, label, labelInnerClass, initiallyHidden = false })=>{
216
- if (!label && !initiallyHidden) {
217
- return null;
218
- }
219
- return /*#__PURE__*/ jsx("span", {
220
- ref: labelRef,
221
- className: labelClass,
222
- style: initiallyHidden ? {
223
- opacity: 0
224
- } : undefined,
225
- children: label && /*#__PURE__*/ jsx("span", {
226
- className: labelInnerClass,
227
- children: label
228
- })
229
- });
230
- };
231
-
232
- export { ButtonIcon };
7
+ export { ButtonIcon } from "../../370.js";
@@ -1,19 +1,10 @@
1
1
  /*!
2
- @versini/ui-button v11.3.3
2
+ @versini/ui-button v11.3.5
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
6
- import { jsx, jsxs } from "react/jsx-runtime";
7
- import clsx from "clsx";
8
- import { TYPE_LINK, getButtonClasses } from "./utilities.js";
6
+ import { jsxs, getButtonClasses, TYPE_LINK, clsx, jsx } from "../../188.js";
9
7
 
10
- ;// CONCATENATED MODULE: external "react/jsx-runtime"
11
-
12
- ;// CONCATENATED MODULE: external "clsx"
13
-
14
- ;// CONCATENATED MODULE: external "./utilities.js"
15
-
16
- ;// CONCATENATED MODULE: ./src/components/Button/ButtonLink.tsx
17
8
 
18
9
 
19
10
 
@@ -1,19 +1,11 @@
1
1
  /*!
2
- @versini/ui-button v11.3.3
2
+ @versini/ui-button v11.3.5
3
3
  © 2026 gizmette.com
4
4
  */
5
5
 
6
- import { jsx } from "react/jsx-runtime";
7
- import clsx from "clsx";
8
- import { ButtonIcon } from "../Button/ButtonIcon.js";
6
+ import { clsx, jsx } from "../../188.js";
7
+ import { ButtonIcon } from "../../370.js";
9
8
 
10
- ;// CONCATENATED MODULE: external "react/jsx-runtime"
11
-
12
- ;// CONCATENATED MODULE: external "clsx"
13
-
14
- ;// CONCATENATED MODULE: external "../Button/ButtonIcon.js"
15
-
16
- ;// CONCATENATED MODULE: ./src/components/private/ButtonSort.tsx
17
9
 
18
10
 
19
11
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-button",
3
- "version": "11.3.3",
3
+ "version": "11.3.5",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -75,5 +75,5 @@
75
75
  "sideEffects": [
76
76
  "**/*.css"
77
77
  ],
78
- "gitHead": "b46abc9c2e87588d6c9b438f70e68a4ffd05c28c"
78
+ "gitHead": "e1f66fb685ddf40b22301f1fe766a2c56ddc4388"
79
79
  }
@@ -1,10 +0,0 @@
1
- /*!
2
- @versini/ui-button v11.3.3
3
- © 2026 gizmette.com
4
- */
5
-
6
-
7
- ;// CONCATENATED MODULE: ./src/common/constants.ts
8
- const BUTTON_CLASSNAME = "av-button";
9
-
10
- export { BUTTON_CLASSNAME };