@ozen-ui/kit 0.36.0 → 0.36.1

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.
Files changed (5) hide show
  1. package/__inner__/cjs/components/Button/Button.css +12 -6
  2. package/__inner__/cjs/components/Button/Button.js +5 -4
  3. package/__inner__/esm/components/Button/Button.css +12 -6
  4. package/__inner__/esm/components/Button/Button.js +5 -4
  5. package/package.json +1 -1
package/__inner__/cjs/components/Button/Button.css CHANGED
@@ -21,7 +21,6 @@
21
21
  opacity var(--transition-default);
22
22
  -webkit-tap-highlight-color: unset;
23
23
  position: relative;
24
- gap: var(--spacing-2xs);
25
24
  }
26
25
  .Button > svg {
27
26
  flex-shrink: 0;
@@ -249,11 +248,21 @@
249
248
  pointer-events: none;
250
249
  cursor: auto;
251
250
  }
252
- .Button-Label {
251
+ .Button_loading .Button-Content {
252
+ opacity: 0;
253
+ }
254
+ .Button-Content {
253
255
  flex-grow: 1;
254
256
  flex-shrink: 1;
255
- overflow: hidden;
257
+ display: flex;
256
258
  text-align: center;
259
+ place-content: center;
260
+ align-items: center;
261
+ min-inline-size: 0;
262
+ gap: var(--spacing-2xs);
263
+ }
264
+ .Button-Label {
265
+ overflow: hidden;
257
266
  text-overflow: ellipsis;
258
267
  white-space: nowrap;
259
268
  }
@@ -274,9 +283,6 @@
274
283
  opacity: 0;
275
284
  transition: opacity var(--transition-default);
276
285
  }
277
- .Button-Loader + * {
278
- visibility: hidden;
279
- }
280
286
  .Button .Loader {
281
287
  color: var(--color-content-disabled);
282
288
  }
package/__inner__/cjs/components/Button/Button.js CHANGED
@@ -49,11 +49,12 @@ exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
49
49
  };
50
50
  var isInteractionPrevented = disabled || loading;
51
51
  var childContent = (react_1.default.createElement(react_1.default.Fragment, null,
52
+ react_1.default.createElement("span", { className: (0, exports.cnButton)('Content') },
53
+ renderIcon(iconLeft),
54
+ react_1.default.createElement("span", tslib_1.__assign({}, labelProps, { className: (0, exports.cnButton)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
55
+ renderIcon(iconRight)),
52
56
  react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, timeout: 120, classNames: (0, exports.cnButton)('Loader', { animation: true }), unmountOnExit: true },
53
- react_1.default.createElement(Loader_1.Loader, { size: iconSize })),
54
- renderIcon(iconLeft),
55
- react_1.default.createElement("span", tslib_1.__assign({}, labelProps, { className: (0, exports.cnButton)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
56
- renderIcon(iconRight)));
57
+ react_1.default.createElement(Loader_1.Loader, { size: iconSize, className: (0, exports.cnButton)('Loader') }))));
57
58
  return (react_1.default.createElement(Tag, tslib_1.__assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: (0, exports.cnButton)({
58
59
  variant: variant,
59
60
  size: size,
package/__inner__/esm/components/Button/Button.css CHANGED
@@ -21,7 +21,6 @@
21
21
  opacity var(--transition-default);
22
22
  -webkit-tap-highlight-color: unset;
23
23
  position: relative;
24
- gap: var(--spacing-2xs);
25
24
  }
26
25
  .Button > svg {
27
26
  flex-shrink: 0;
@@ -249,11 +248,21 @@
249
248
  pointer-events: none;
250
249
  cursor: auto;
251
250
  }
252
- .Button-Label {
251
+ .Button_loading .Button-Content {
252
+ opacity: 0;
253
+ }
254
+ .Button-Content {
253
255
  flex-grow: 1;
254
256
  flex-shrink: 1;
255
- overflow: hidden;
257
+ display: flex;
256
258
  text-align: center;
259
+ place-content: center;
260
+ align-items: center;
261
+ min-inline-size: 0;
262
+ gap: var(--spacing-2xs);
263
+ }
264
+ .Button-Label {
265
+ overflow: hidden;
257
266
  text-overflow: ellipsis;
258
267
  white-space: nowrap;
259
268
  }
@@ -274,9 +283,6 @@
274
283
  opacity: 0;
275
284
  transition: opacity var(--transition-default);
276
285
  }
277
- .Button-Loader + * {
278
- visibility: hidden;
279
- }
280
286
  .Button .Loader {
281
287
  color: var(--color-content-disabled);
282
288
  }
package/__inner__/esm/components/Button/Button.js CHANGED
@@ -46,11 +46,12 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
46
46
  };
47
47
  var isInteractionPrevented = disabled || loading;
48
48
  var childContent = (React.createElement(React.Fragment, null,
49
+ React.createElement("span", { className: cnButton('Content') },
50
+ renderIcon(iconLeft),
51
+ React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
52
+ renderIcon(iconRight)),
49
53
  React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
50
- React.createElement(Loader, { size: iconSize })),
51
- renderIcon(iconLeft),
52
- React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
53
- renderIcon(iconRight)));
54
+ React.createElement(Loader, { size: iconSize, className: cnButton('Loader') }))));
54
55
  return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButton({
55
56
  variant: variant,
56
57
  size: size,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozen-ui/kit",
3
- "version": "0.36.0",
3
+ "version": "0.36.1",
4
4
  "description": "React component library",
5
5
  "files": [
6
6
  "*"