@geneui/components 3.0.0-next-54256cd-10092025 → 3.0.0-next-e458c67-16092025

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 (65) hide show
  1. package/package.json +1 -1
  2. package/ActivityRecent-b88e2ba8.js +0 -33
  3. package/Avatar.js +0 -5
  4. package/Badge.js +0 -36
  5. package/Button.js +0 -45
  6. package/ButtonGroup.js +0 -22
  7. package/CheckMark-34798545.js +0 -23
  8. package/Checkbox.js +0 -89
  9. package/CircleFilled-19a9ec62.js +0 -23
  10. package/Copy.js +0 -63
  11. package/Divider.js +0 -23
  12. package/Drawer.js +0 -96
  13. package/Empty.js +0 -22
  14. package/ErrorFilled-f4226310.js +0 -23
  15. package/GeneUIProvider.js +0 -4
  16. package/GlobalHeader.js +0 -413
  17. package/Grid.js +0 -22
  18. package/HelperText.js +0 -31
  19. package/Info-0f0741e0.js +0 -29
  20. package/Info.js +0 -43
  21. package/KeyValue.js +0 -51
  22. package/Label.js +0 -42
  23. package/Loader.js +0 -21
  24. package/Logo.js +0 -19
  25. package/Menu.js +0 -22
  26. package/Modal.js +0 -98
  27. package/Navigation.js +0 -387
  28. package/Notification.js +0 -129
  29. package/Pagination.js +0 -188
  30. package/Pill.js +0 -49
  31. package/Popover.js +0 -26
  32. package/PopoverBody-cfe2a5c1.js +0 -321
  33. package/Products.js +0 -131
  34. package/Profile.js +0 -24
  35. package/ProgressBar.js +0 -73
  36. package/QRCode.js +0 -1166
  37. package/Radio.js +0 -58
  38. package/Rate.js +0 -486
  39. package/Scrollbar.js +0 -3481
  40. package/Skeleton.js +0 -16
  41. package/Spreadsheet.js +0 -9
  42. package/Steps.js +0 -143
  43. package/Switch.js +0 -46
  44. package/Tag.js +0 -84
  45. package/Text.js +0 -20
  46. package/TextField.js +0 -134
  47. package/TextLink.js +0 -23
  48. package/ThreeDotsHorizontal-30813ed5.js +0 -67
  49. package/Timeline.js +0 -70
  50. package/Tooltip.js +0 -172
  51. package/TriangleAlert-ba250f4c.js +0 -25
  52. package/X-20da3b4a.js +0 -23
  53. package/floating-ui.react-a6c3b969.js +0 -3898
  54. package/index-0b9e90da.js +0 -62
  55. package/index-55a33393.js +0 -61
  56. package/index-978068de.js +0 -488
  57. package/index-a2688a52.js +0 -272
  58. package/index-b29adba3.js +0 -88
  59. package/index-ce02421b.js +0 -84
  60. package/index-d9a2e208.js +0 -1553
  61. package/index.js +0 -58
  62. package/style-inject.es-746bb8ed.js +0 -28
  63. package/tokens-f34162d4.js +0 -6
  64. package/useDebounceCallback-999deae7.js +0 -23
  65. package/useEllipsisDetection-36ecf9df.js +0 -28
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@geneui/components",
3
3
  "description": "The Gene UI components library designed for BI tools",
4
- "version": "3.0.0-next-54256cd-10092025",
4
+ "version": "3.0.0-next-e458c67-16092025",
5
5
  "author": "SoftConstruct",
6
6
  "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
7
7
  "repository": {
@@ -1,33 +0,0 @@
1
- import 'react';
2
-
3
- function _extends() {
4
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
5
- for (var e = 1; e < arguments.length; e++) {
6
- var t = arguments[e];
7
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
8
- }
9
- return n;
10
- }, _extends.apply(null, arguments);
11
- }
12
- function _objectWithoutProperties(e, t) {
13
- if (null == e) return {};
14
- var o,
15
- r,
16
- i = _objectWithoutPropertiesLoose(e, t);
17
- if (Object.getOwnPropertySymbols) {
18
- var s = Object.getOwnPropertySymbols(e);
19
- for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
20
- }
21
- return i;
22
- }
23
- function _objectWithoutPropertiesLoose(r, e) {
24
- if (null == r) return {};
25
- var t = {};
26
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
27
- if (e.includes(n)) continue;
28
- t[n] = r[n];
29
- }
30
- return t;
31
- }
32
-
33
- export { _objectWithoutProperties as _, _extends as a };
package/Avatar.js DELETED
@@ -1,5 +0,0 @@
1
- export { A as default } from './index-0b9e90da.js';
2
- import 'react';
3
- import './index-ce02421b.js';
4
- import './ActivityRecent-b88e2ba8.js';
5
- import './style-inject.es-746bb8ed.js';
package/Badge.js DELETED
@@ -1,36 +0,0 @@
1
- import React__default from 'react';
2
- import { c as classNames } from './index-ce02421b.js';
3
- import { s as styleInject } from './style-inject.es-746bb8ed.js';
4
-
5
- var css_248z = ".badge{display:inline-flex;position:relative}.badge__content{align-items:center;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}.badge__content_position_absolute{position:absolute;z-index:1}.badge__content_position_absolute.badge__content_size_small,.badge__content_position_absolute.badge__content_size_smallNudge{inset-block-start:-.6rem;inset-inline-end:-.6rem}.badge__content_position_absolute.badge__content_size_xSmall{inset-block-start:-.4rem;inset-inline-end:-.4rem}.badge__content_position_absolute.badge__content_size_3xSmall{inset-block-start:-.2rem;inset-inline-end:-.2rem}.badge__content_size_small{border-radius:var(--guit-ref-radius-medium);height:var(--guit-sem-dimension-height-small);min-width:var(--guit-sem-dimension-width-small)}.badge__content_size_smallNudge{border-radius:var(--guit-ref-radius-full);height:var(--guit-sem-dimension-height-small-nudge);width:var(--guit-sem-dimension-width-small-nudge)}.badge__content_size_xSmall{border-radius:var(--guit-ref-radius-full);height:var(--guit-sem-dimension-height-xsmall);width:var(--guit-sem-dimension-width-xsmall)}.badge__content_size_3xSmall{border-radius:var(--guit-ref-radius-full);height:var(--guit-sem-dimension-height-3xsmall);width:var(--guit-sem-dimension-width-3xsmall)}.badge__content_color_brand{background-color:var(--guit-sem-color-background-brand-2);color:var(--guit-sem-color-foreground-inverse)}.badge__content_color_brand.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-1)}.badge__content_color_neutral{background-color:var(--guit-sem-color-background-neutral-4);color:var(--guit-sem-color-foreground-neutral-2)}.badge__content_color_neutral.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-1)}.badge__content_color_red{background-color:var(--guit-sem-color-background-accent-red-2);color:var(--guit-sem-color-foreground-inverse)}.badge__content_color_red.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-1)}.badge__content_color_inverse{background-color:var(--guit-sem-color-foreground-inverse);color:var(--guit-sem-color-foreground-neutral-2)}.badge__content_color_inverse.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-2)}.badge__content:has(.badge__num){padding:var(--guit-ref-spacing-4xsmall) var(--guit-ref-spacing-2xsmall)}.badge__content_bordered{border:var(--guit-sem-border-default-width) var(--guit-sem-border-default-style)}.badge__num{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}";
6
- styleInject(css_248z);
7
-
8
- const MAX_VALUE = 99;
9
- const getValue = (value, maxValue, size) => {
10
- if (!Number(value) || size !== "small" || !value)
11
- return null;
12
- if (!maxValue)
13
- return value;
14
- const calculatedMaxValue = maxValue > 0 && maxValue < MAX_VALUE ? maxValue : MAX_VALUE;
15
- return value > calculatedMaxValue ? `${calculatedMaxValue}+` : value;
16
- };
17
- const getSize = (withChildren, size) => {
18
- if (!withChildren || size === "xSmall")
19
- return size;
20
- return "3xSmall";
21
- };
22
- /**
23
- * Numeric Badge component is a small, circular indicator that displays numerical information, often used to highlight counts or statuses. It is typically positioned adjacent to icons or labels, providing users with a quick visual cue about the number of notifications, messages, or items requiring attention.
24
- */
25
- const Badge = ({ className, appearance = "brand", withBorder, size = "small", value, maxValue = 99, children }) => {
26
- const badgeSize = getSize(!!children, size);
27
- const badgeValue = getValue(value, maxValue, badgeSize);
28
- return (React__default.createElement("div", { className: classNames("badge", className) },
29
- React__default.createElement("div", { className: classNames(`badge__content badge__content_color_${appearance} badge__content_size_${badgeSize}`, {
30
- badge__content_bordered: withBorder,
31
- badge__content_position_absolute: children
32
- }) }, !!badgeValue && React__default.createElement("p", { className: "badge__num" }, badgeValue)),
33
- children));
34
- };
35
-
36
- export { Badge as default };
package/Button.js DELETED
@@ -1,45 +0,0 @@
1
- import React__default, { forwardRef } from 'react';
2
- import { c as classNames } from './index-ce02421b.js';
3
- import Loader from './Loader.js';
4
- import { s as styleInject } from './style-inject.es-746bb8ed.js';
5
-
6
- var css_248z = ".button{align-items:center;border-style:var(--guit-ref-border-style-solid);border-width:var(--guit-ref-border-width-thin);cursor:pointer;display:inline-flex;justify-content:center;min-width:max-content;position:relative;-webkit-user-select:none;user-select:none}.button:not(.button_type_outline){border-color:var(--guit-ref-color-transparent-neutral-0-0)}.button_icon_before{flex-direction:row}.button_icon_after{flex-direction:row-reverse}.button_color_primary.button_type_fill{background-color:var(--guit-sem-color-background-brand-2);color:var(--guit-sem-color-foreground-inverse)}@media screen and (hover:hover){.button_color_primary.button_type_fill:hover{background-color:var(--guit-sem-color-background-brand-2-hover)}}.button_color_primary.button_type_fill:active{background-color:var(--guit-sem-color-background-brand-2-pressed)}.button_color_primary.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_primary.button_type_outline{border-color:var(--guit-sem-color-border-brand);color:var(--guit-sem-color-foreground-brand)}@media screen and (hover:hover){.button_color_primary.button_type_outline:hover{background-color:var(--guit-sem-color-background-brand-1-hover)}}.button_color_primary.button_type_outline:active{background-color:var(--guit-sem-color-background-brand-1-pressed)}.button_color_primary.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_primary.button_type_text{color:var(--guit-sem-color-foreground-brand)}@media screen and (hover:hover){.button_color_primary.button_type_text:hover{background-color:var(--guit-sem-color-background-brand-1-hover)}}.button_color_primary.button_type_text:active{background-color:var(--guit-sem-color-background-brand-1-pressed)}.button_color_secondary.button_type_fill{background-color:var(--guit-sem-color-background-neutral-3);color:var(--guit-sem-color-foreground-neutral-2)}@media screen and (hover:hover){.button_color_secondary.button_type_fill:hover{background-color:var(--guit-sem-color-background-neutral-3-hover)}}.button_color_secondary.button_type_fill:active{background-color:var(--guit-sem-color-background-neutral-3-pressed)}.button_color_secondary.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_secondary.button_type_outline{background-color:var(--guit-sem-color-background-transparent-1);border-color:var(--guit-sem-color-border-neutral-2);color:var(--guit-sem-color-foreground-neutral-2)}@media screen and (hover:hover){.button_color_secondary.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}}.button_color_secondary.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_secondary.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_secondary.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-neutral-2)}@media screen and (hover:hover){.button_color_secondary.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}}.button_color_secondary.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_danger.button_type_fill{background-color:var(--guit-sem-color-background-error-2);color:var(--guit-sem-color-foreground-inverse)}@media screen and (hover:hover){.button_color_danger.button_type_fill:hover{background-color:var(--guit-sem-color-background-error-2-hover)}}.button_color_danger.button_type_fill:active{background-color:var(--guit-sem-color-background-error-2-pressed)}.button_color_danger.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_danger.button_type_outline{border-color:var(--guit-sem-color-border-error);color:var(--guit-sem-color-foreground-error)}@media screen and (hover:hover){.button_color_danger.button_type_outline:hover{background-color:var(--guit-sem-color-background-error-1-hover)}}.button_color_danger.button_type_outline:active{background-color:var(--guit-sem-color-background-error-1-pressed)}.button_color_danger.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_danger.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-error)}@media screen and (hover:hover){.button_color_danger.button_type_text:hover{background-color:var(--guit-sem-color-background-error-1-hover)}}.button_color_danger.button_type_text:active{background-color:var(--guit-sem-color-background-error-1-pressed)}.button_color_success.button_type_fill{background-color:var(--guit-sem-color-background-success-2);color:var(--guit-sem-color-foreground-neutral-2-notheme)}@media screen and (hover:hover){.button_color_success.button_type_fill:hover{background-color:var(--guit-sem-color-background-success-2-hover)}}.button_color_success.button_type_fill:active{background-color:var(--guit-sem-color-background-success-2-pressed)}.button_color_success.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_success.button_type_outline{border-color:var(--guit-sem-color-border-success);color:var(--guit-sem-color-foreground-success)}@media screen and (hover:hover){.button_color_success.button_type_outline:hover{background-color:var(--guit-sem-color-background-success-1-hover)}}.button_color_success.button_type_outline:active{background-color:var(--guit-sem-color-background-success-1-pressed)}.button_color_success.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_success.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-success)}@media screen and (hover:hover){.button_color_success.button_type_text:hover{background-color:var(--guit-sem-color-background-success-1-hover)}}.button_color_success.button_type_text:active{background-color:var(--guit-sem-color-background-success-1-pressed)}.button_color_inverse.button_type_fill{background-color:var(--guit-sem-color-background-inverse);color:var(--guit-sem-color-foreground-neutral-2)}@media screen and (hover:hover){.button_color_inverse.button_type_fill:hover{background-color:var(--guit-sem-color-background-inverse-hover)}}.button_color_inverse.button_type_fill:active{background-color:var(--guit-sem-color-background-inverse-pressed)}.button_color_inverse.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_inverse.button_type_outline{background-color:var(--guit-sem-color-background-transparent-1);border-color:var(--guit-sem-color-border-inverse);color:var(--guit-sem-color-foreground-inverse)}@media screen and (hover:hover){.button_color_inverse.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}}.button_color_inverse.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_inverse.button_type_outline:disabled{border-color:var(--guit-sem-color-border-inverse-disabled);color:var(--guit-sem-color-foreground-inverse-disabled)}.button_color_inverse.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-inverse)}@media screen and (hover:hover){.button_color_inverse.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}}.button_color_inverse.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_inverse.button_type_text:disabled{color:var(--guit-sem-color-foreground-inverse-disabled)}.button_color_transparent.button_type_fill{background-color:var(--guit-sem-color-background-transparent-inverse-2);color:var(--guit-sem-color-foreground-inverse)}@media screen and (hover:hover){.button_color_transparent.button_type_fill:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}}.button_color_transparent.button_type_fill:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_transparent.button_type_outline{border-color:var(--guit-sem-color-border-inverse);color:var(--guit-sem-color-foreground-inverse)}@media screen and (hover:hover){.button_color_transparent.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}}.button_color_transparent.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_outline:disabled{border-color:var(--guit-sem-color-border-inverse-disabled);color:var(--guit-sem-color-foreground-inverse-disabled)}.button_color_transparent.button_type_text{background-color:var(--guit-sem-color-background-transparent-inverse-1);color:var(--guit-sem-color-foreground-inverse)}@media screen and (hover:hover){.button_color_transparent.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}}.button_color_transparent.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_text:disabled{color:var(--guit-sem-color-foreground-inverse-disabled)}.button_size_large{border-radius:var(--guit-ref-radius-2xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-large)}.button_size_large:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-small);padding-top:var(--guit-ref-spacing-small)}.button_size_large:not(.button_icon_before,.button_size_large.button_icon_after,.button_icon_only){min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-large);padding-inline-start:var(--guit-ref-spacing-large)}.button_size_large.button_icon_after,.button_size_large.button_icon_before{min-width:var(--guit-sem-dimension-width-5xlarge)}.button_size_large.button_icon_before{padding-inline-end:var(--guit-ref-spacing-large);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_large.button_icon_after{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-large)}.button_size_large.button_icon_only{min-width:var(--guit-sem-dimension-width-large)}.button_size_medium{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-medium)}.button_size_medium:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-2xsmall);padding-top:var(--guit-ref-spacing-2xsmall)}.button_size_medium:not(.button_icon_before,.button_size_medium.button_icon_after,.button_icon_only){min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_medium.button_icon_after,.button_size_medium.button_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.button_size_medium.button_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_medium.button_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_medium.button_icon_only{min-width:var(--guit-sem-dimension-width-medium)}.button_size_small{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-2xsmall);height:var(--guit-sem-dimension-height-small)}.button_size_small:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}.button_size_small:not(.button_icon_before,.button_size_small.button_icon_after,.button_icon_only){min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_small.button_icon_after,.button_size_small.button_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.button_size_small.button_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_small.button_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_small.button_icon_only{min-width:var(--guit-sem-dimension-width-small)}.button_size_smallNudge{border-radius:var(--guit-ref-radius-4xsmall);height:var(--guit-sem-dimension-height-small-nudge)}.button_size_smallNudge.button_icon_only{min-width:var(--guit-sem-dimension-width-small-nudge)}.button_fullWidth{width:100%}.button_loading{pointer-events:none}.button_loading .button__loader{visibility:visible}.button_loading .button__icon,.button_loading .button__text{visibility:hidden}.button:disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}.button__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height);white-space:nowrap}.button__icon{flex:0 0 auto}.button__loader{align-items:center;border-radius:inherit;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;visibility:hidden;width:100%}";
7
- styleInject(css_248z);
8
-
9
- const iconSizes = {
10
- large: 20,
11
- medium: 20,
12
- small: 20,
13
- smallNudge: 16
14
- };
15
- const loadingTypes = {
16
- primary: { fill: "inverse", outline: "brand", text: "brand" },
17
- secondary: { fill: "neutral", outline: "neutral", text: "neutral" },
18
- danger: { fill: "inverse", outline: "neutral", text: "neutral" },
19
- success: { fill: "neutral", outline: "neutral", text: "neutral" },
20
- inverse: { fill: "neutral", outline: "inverse", text: "inverse" },
21
- transparent: { fill: "inverse", outline: "inverse", text: "inverse" }
22
- };
23
- /**
24
- * Button initiates an action or event. Use buttons for key actions like submitting a form, saving changes, or advancing to the next step.
25
- */
26
- const Button = forwardRef(({ appearance = "primary", disabled, fullWidth, name, size = "medium", layout = "fill", children, Icon, onClick, className, iconPosition, loading, type = "button", onBlur, onFocus }, ref) => {
27
- const isSizeXS = size === "smallNudge";
28
- const isTextDisplayForXS = (appearance === "primary" || appearance === "danger" || appearance === "success") && isSizeXS;
29
- return (React__default.createElement("button", Object.assign({ ref: ref, name: name, onFocus: onFocus, onBlur: onBlur,
30
- // eslint-disable-next-line react/button-has-type
31
- type: type || "button", onClick: onClick, disabled: disabled && !loading }, (loading ? { tabIndex: -1 } : {}), { className: classNames(`button button_size_${size}
32
- button_color_${appearance}
33
- button_type_${isTextDisplayForXS ? "text" : layout}`, className, {
34
- button_fullWidth: fullWidth,
35
- button_icon_before: iconPosition === "before" && Icon && children,
36
- button_icon_after: iconPosition === "after" && Icon && children,
37
- button_icon_only: (!children || isSizeXS) && Icon,
38
- button_loading: loading
39
- }) }),
40
- loading && (React__default.createElement(Loader, { size: "smallNudge", className: "button__loader", appearance: loadingTypes[appearance][layout] })),
41
- Icon && React__default.createElement(Icon, { size: iconSizes[size], className: "button__icon" }),
42
- children && !isSizeXS && React__default.createElement("span", { className: "button__text" }, children)));
43
- });
44
-
45
- export { Button as default };
package/ButtonGroup.js DELETED
@@ -1,22 +0,0 @@
1
- export { B as default } from './index-978068de.js';
2
- import 'react';
3
- import './index-ce02421b.js';
4
- import './ThreeDotsHorizontal-30813ed5.js';
5
- import './ActivityRecent-b88e2ba8.js';
6
- import './Button.js';
7
- import './Loader.js';
8
- import './style-inject.es-746bb8ed.js';
9
- import './PopoverBody-cfe2a5c1.js';
10
- import './floating-ui.react-a6c3b969.js';
11
- import 'react-dom';
12
- import './Info-0f0741e0.js';
13
- import './X-20da3b4a.js';
14
- import './index-b29adba3.js';
15
- import './Scrollbar.js';
16
- import 'prop-types';
17
- import './useDebounceCallback-999deae7.js';
18
- import './index-d9a2e208.js';
19
- import './index-a2688a52.js';
20
- import './Text.js';
21
- import './CheckMark-34798545.js';
22
- import './Divider.js';
@@ -1,23 +0,0 @@
1
- import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
2
- import React__default from 'react';
3
-
4
- var _excluded = ["size", "color"];
5
- var SvgCheckMark = function SvgCheckMark(_ref) {
6
- var _ref$size = _ref.size,
7
- size = _ref$size === void 0 ? 24 : _ref$size,
8
- _ref$color = _ref.color,
9
- color = _ref$color === void 0 ? "currentColor" : _ref$color,
10
- props = _objectWithoutProperties(_ref, _excluded);
11
- return /*#__PURE__*/React__default.createElement("svg", _extends({
12
- width: size,
13
- height: size,
14
- viewBox: "0 0 24 24",
15
- fill: color,
16
- xmlns: "http://www.w3.org/2000/svg"
17
- }, props), /*#__PURE__*/React__default.createElement("path", {
18
- d: "M9.19 19.25a.75.75 0 0 1-.564-.255l-5.44-6.188a.756.756 0 0 1 .612-1.248.75.75 0 0 1 .516.253l4.867 5.535 10.491-12.33a.75.75 0 0 1 1.322.426.756.756 0 0 1-.176.55l-11.055 12.992a.756.756 0 0 1-.567.265h-.006Z",
19
- fill: color
20
- }));
21
- };
22
-
23
- export { SvgCheckMark as S };
package/Checkbox.js DELETED
@@ -1,89 +0,0 @@
1
- import React__default, { useRef, useState, useEffect, useMemo } from 'react';
2
- import { c as classNames } from './index-ce02421b.js';
3
- import { S as SvgCheckMark } from './CheckMark-34798545.js';
4
- import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
5
- import HelperText from './HelperText.js';
6
- import Label from './Label.js';
7
- import { s as styleInject } from './style-inject.es-746bb8ed.js';
8
- import './ErrorFilled-f4226310.js';
9
- import './TriangleAlert-ba250f4c.js';
10
- import './Tooltip.js';
11
- import './floating-ui.react-a6c3b969.js';
12
- import 'react-dom';
13
- import './index-a2688a52.js';
14
- import './index-d9a2e208.js';
15
- import './useDebounceCallback-999deae7.js';
16
- import './useEllipsisDetection-36ecf9df.js';
17
- import './Info.js';
18
- import './Info-0f0741e0.js';
19
-
20
- var _excluded = ["size", "color"];
21
- var SvgMinus = function SvgMinus(_ref) {
22
- var _ref$size = _ref.size,
23
- size = _ref$size === void 0 ? 24 : _ref$size,
24
- _ref$color = _ref.color,
25
- color = _ref$color === void 0 ? "currentColor" : _ref$color,
26
- props = _objectWithoutProperties(_ref, _excluded);
27
- return /*#__PURE__*/React__default.createElement("svg", _extends({
28
- width: size,
29
- height: size,
30
- viewBox: "0 0 24 24",
31
- fill: color,
32
- xmlns: "http://www.w3.org/2000/svg"
33
- }, props), /*#__PURE__*/React__default.createElement("path", {
34
- d: "M20.153 12.75h-16.306a.905.905 0 0 1-.599-.22.71.71 0 0 1-.248-.53c0-.199.09-.39.248-.53a.905.905 0 0 1 .599-.22h16.306c.225 0 .44.079.599.22a.71.71 0 0 1 .248.53.71.71 0 0 1-.248.53.905.905 0 0 1-.599.22Z",
35
- fill: color
36
- }));
37
- };
38
-
39
- var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{appearance:none;background:none;border:none;border-radius:var(--guit-ref-radius-4xsmall);height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.checkbox__input:checked+.checkbox__imitation,.checkbox__input:indeterminate+.checkbox__imitation{background-color:var(--guit-sem-color-background-selected-2);border-color:var(--guit-sem-color-background-selected-2)}.checkbox__input:checked+.checkbox__imitation:hover,.checkbox__input:indeterminate+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-selected-2-hover);border-color:var(--guit-sem-color-background-selected-2-hover)}.checkbox__input:checked+.checkbox__imitation:active,.checkbox__input:indeterminate+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-selected-2-pressed);border-color:var(--guit-sem-color-background-selected-2-pressed)}.checkbox__input:checked+.checkbox__imitation .checkbox__icon,.checkbox__input:indeterminate+.checkbox__imitation .checkbox__icon{opacity:1}.checkbox__label{display:flex;max-width:-moz-fit-content;max-width:fit-content}.checkbox__imitationHolder{align-items:center;display:flex;flex:0 0 auto;justify-content:center}.checkbox__imitationHolder:only-child{height:var(--guit-sem-dimension-height-small);width:var(--guit-sem-dimension-width-small)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.checkbox__imitationHolderInner{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-xsmall);justify-content:center;position:relative;width:var(--guit-sem-dimension-width-xsmall)}.checkbox__imitation{border:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-3);border-radius:var(--guit-ref-radius-4xsmall);height:100%;width:100%}.checkbox__icon{color:var(--guit-sem-color-foreground-inverse);left:0;opacity:0;position:absolute;top:0}.checkbox__infoContainer{display:flex}.checkbox:not(.checkbox_labelTop){gap:var(--guit-ref-spacing-3xsmall)}.checkbox:not(.checkbox_labelTop) .checkbox__infoContainer{padding-inline-start:var(--guit-ref-spacing-3xlarge)}.checkbox:not(.checkbox_labelTop) .checkbox__label{gap:var(--guit-ref-spacing-medium)}.checkbox_labelTop{gap:var(--guit-ref-spacing-3xsmall)}.checkbox_labelTop .checkbox__label{align-items:flex-start;flex-direction:column-reverse;gap:var(--guit-ref-spacing-3xsmall)}.checkbox_error .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{border-color:var(--guit-sem-color-border-error)}.checkbox_disabled{pointer-events:none;-webkit-user-select:none;user-select:none}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-disabled);border-color:var(--guit-sem-color-border-disabled-1)}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-disabled)}.checkbox_disabled .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{background-color:var(--guit-sem-color-background-transparent-1)}.checkbox_readOnly{pointer-events:none}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-neutral-3);border-color:#0000}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-neutral-1)}.checkbox_readOnly .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{border-color:var(--guit-sem-color-border-neutral-2)}";
40
- styleInject(css_248z);
41
-
42
- /**
43
- * Checkbox component allows users to select one or more options from a set of choices. Each checkbox can be either checked or unchecked, indicating a binary state. Checkboxes are commonly used in forms, settings, and lists where multiple selections are needed.
44
- */
45
- const Checkbox = (props) => {
46
- const { label, required, infoText, disabled, helperText, readOnly, type = "rest", direction = "horizontal", autoFocus, onClick, onChange, onFocus, onBlur, name, indeterminate, checked, defaultChecked, className, value } = props;
47
- const interRef = useRef(null);
48
- const isControlled = "checked" in props;
49
- const [checkedState, setCheckedState] = useState(defaultChecked || false);
50
- const onClickHandler = (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e);
51
- const onChangeHandler = (e) => {
52
- if (!isControlled) {
53
- setCheckedState(e.target.checked);
54
- }
55
- onChange === null || onChange === void 0 ? void 0 : onChange(e);
56
- };
57
- const onFocusHandler = (e) => onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
58
- const onBlurHandler = (e) => onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
59
- useEffect(() => {
60
- if (isControlled) {
61
- setCheckedState(!!checked);
62
- }
63
- }, [checked, isControlled]);
64
- useEffect(() => {
65
- if (interRef.current) {
66
- interRef.current.indeterminate = !!indeterminate;
67
- }
68
- }, [indeterminate]);
69
- const resolvedChecked = useMemo(() => {
70
- const isIndeterminate = indeterminate && !checked;
71
- if (isIndeterminate)
72
- return false;
73
- return isControlled ? checked : checkedState;
74
- }, [checked, checkedState, indeterminate]);
75
- return (React__default.createElement("div", Object.assign({ className: classNames("checkbox ", `checkbox_${type}`, {
76
- checkbox_disabled: disabled,
77
- checkbox_readOnly: readOnly,
78
- checkbox_labelTop: direction === "vertical"
79
- }, className) }, ((disabled || readOnly) && { tabIndex: -1 })),
80
- React__default.createElement(Label, { text: label, className: "checkbox__label", required: required, infoText: infoText, disabled: disabled, readOnly: readOnly },
81
- React__default.createElement("span", { className: "checkbox__imitationHolder" },
82
- React__default.createElement("span", { className: "checkbox__imitationHolderInner" },
83
- React__default.createElement("input", Object.assign({ type: "checkbox", className: "checkbox__input", onChange: onChangeHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onClick: onClickHandler, checked: resolvedChecked, ref: interRef }, (name && { name }), (autoFocus && { autoFocus }), ((disabled || readOnly) && { tabIndex: -1 }), { value: value })),
84
- React__default.createElement("span", { className: "checkbox__imitation" }, indeterminate && !checked ? (React__default.createElement(SvgMinus, { className: "checkbox__icon", size: 16 })) : (React__default.createElement(SvgCheckMark, { className: "checkbox__icon", size: 16 })))))),
85
- helperText && (React__default.createElement("div", { className: "checkbox__infoContainer" },
86
- React__default.createElement(HelperText, { text: helperText, disabled: disabled, type: type })))));
87
- };
88
-
89
- export { Checkbox as default };
@@ -1,23 +0,0 @@
1
- import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
2
- import React__default from 'react';
3
-
4
- var _excluded = ["size", "color"];
5
- var SvgCircleFilled = function SvgCircleFilled(_ref) {
6
- var _ref$size = _ref.size,
7
- size = _ref$size === void 0 ? 24 : _ref$size,
8
- _ref$color = _ref.color,
9
- color = _ref$color === void 0 ? "currentColor" : _ref$color,
10
- props = _objectWithoutProperties(_ref, _excluded);
11
- return /*#__PURE__*/React__default.createElement("svg", _extends({
12
- width: size,
13
- height: size,
14
- viewBox: "0 0 24 24",
15
- fill: color,
16
- xmlns: "http://www.w3.org/2000/svg"
17
- }, props), /*#__PURE__*/React__default.createElement("path", {
18
- d: "M7 12a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z",
19
- fill: color
20
- }));
21
- };
22
-
23
- export { SvgCircleFilled as S };
package/Copy.js DELETED
@@ -1,63 +0,0 @@
1
- import React__default, { useState } from 'react';
2
- import { S as SvgCheckMark } from './CheckMark-34798545.js';
3
- import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
4
- import Button from './Button.js';
5
- import Tooltip from './Tooltip.js';
6
- import './index-ce02421b.js';
7
- import './Loader.js';
8
- import './style-inject.es-746bb8ed.js';
9
- import './floating-ui.react-a6c3b969.js';
10
- import 'react-dom';
11
- import './index-a2688a52.js';
12
- import './index-d9a2e208.js';
13
- import './useDebounceCallback-999deae7.js';
14
-
15
- var _excluded = ["size", "color"];
16
- var SvgCopy = function SvgCopy(_ref) {
17
- var _ref$size = _ref.size,
18
- size = _ref$size === void 0 ? 24 : _ref$size,
19
- _ref$color = _ref.color,
20
- color = _ref$color === void 0 ? "currentColor" : _ref$color,
21
- props = _objectWithoutProperties(_ref, _excluded);
22
- return /*#__PURE__*/React__default.createElement("svg", _extends({
23
- width: size,
24
- height: size,
25
- viewBox: "0 0 24 24",
26
- fill: color,
27
- xmlns: "http://www.w3.org/2000/svg"
28
- }, props), /*#__PURE__*/React__default.createElement("path", {
29
- d: "M18.222 1.959h-9.93a1.753 1.753 0 0 0-1.744 1.744v13.87a1.747 1.747 0 0 0 1.745 1.744h9.929a1.74 1.74 0 0 0 1.744-1.745v-13.869a1.747 1.747 0 0 0-1.744-1.744Zm.249 15.613a.248.248 0 0 1-.25.25h-9.928a.247.247 0 0 1-.25-.25v-13.869a.253.253 0 0 1 .25-.249h9.929a.253.253 0 0 1 .249.25v13.868Z",
30
- fill: color
31
- }), /*#__PURE__*/React__default.createElement("path", {
32
- d: "M16.148 20.463h-7.985a2.704 2.704 0 0 1-2.701-2.702v-13.759a1.724 1.724 0 0 0-1.496 1.715v12.044a4.203 4.203 0 0 0 4.197 4.198h7.985a1.733 1.733 0 0 0 1.715-1.506h-1.665a.092.092 0 0 1-.05.01Z",
33
- fill: color
34
- }));
35
- };
36
-
37
- // Copy component used to copy content to the clipboard, providing visual feedback upon success.
38
- const CopyComponent = ({ size = "medium", value, className, contentRef, copyTooltipText = "Copy", copiedTooltipText = "Copied", appearance = "primary", disabled }) => {
39
- const [isCopied, setIsCopied] = useState(false);
40
- const copyContent = (e) => {
41
- var _a;
42
- e.stopPropagation();
43
- if (isCopied)
44
- return;
45
- const content = value || ((_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.innerText);
46
- if (!content)
47
- return;
48
- navigator.clipboard
49
- .writeText(content)
50
- .then(() => {
51
- setIsCopied(true);
52
- const id = setTimeout(() => {
53
- setIsCopied(false);
54
- clearTimeout(id);
55
- }, 2000);
56
- })
57
- .catch((error) => console.error("Failed to copy:", error));
58
- };
59
- return (React__default.createElement(Tooltip, { text: isCopied ? copiedTooltipText : copyTooltipText, isVisible: true },
60
- React__default.createElement(Button, { className: className, Icon: isCopied ? SvgCheckMark : SvgCopy, onClick: copyContent, size: size, disabled: disabled, appearance: appearance, layout: "text" })));
61
- };
62
-
63
- export { CopyComponent as default };
package/Divider.js DELETED
@@ -1,23 +0,0 @@
1
- import React__default from 'react';
2
- import { c as classNames } from './index-ce02421b.js';
3
- import { s as styleInject } from './style-inject.es-746bb8ed.js';
4
-
5
- var css_248z = ".divider{align-items:center;overflow:hidden}.divider:before{content:\"\";display:block;flex:1;pointer-events:none}.divider_horizontal{display:flex;gap:var(--guit-ref-spacing-xsmall);width:100%}.divider_horizontal.divider:after,.divider_horizontal.divider:before{border-block-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid);min-width:var(--guit-sem-dimension-width-medium)}.divider_horizontal.divider_inset{padding-inline:var(--guit-ref-spacing-large)}.divider_horizontal.divider:empty:after{display:none}.divider_vertical{display:inline-flex;flex-direction:column;height:100%}.divider_vertical.divider:before{border-inline-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid)}.divider_vertical.divider:after{display:none}.divider_vertical.divider_inset{padding-block:var(--guit-ref-spacing-large)}.divider_color_default .divider__icon,.divider_color_default .divider__text,.divider_color_strong .divider__icon,.divider_color_strong .divider__text{color:var(--guit-sem-color-foreground-neutral-1)}.divider_color_default.divider:after,.divider_color_default.divider:before{border-block-color:var(--guit-sem-color-border-neutral-2);border-inline-color:var(--guit-sem-color-border-neutral-2)}.divider_color_strong.divider:after,.divider_color_strong.divider:before{border-block-color:var(--guit-sem-color-border-neutral-3);border-inline-color:var(--guit-sem-color-border-neutral-3)}.divider_color_brand.divider:after,.divider_color_brand.divider:before{border-block-color:var(--guit-sem-color-border-brand);border-inline-color:var(--guit-sem-color-border-brand)}.divider_color_brand .divider__icon,.divider_color_brand .divider__text{color:var(--guit-sem-color-foreground-brand)}.divider_color_inverse.divider:after,.divider_color_inverse.divider:before{border-block-color:var(--guit-sem-color-border-inverse);border-inline-color:var(--guit-sem-color-border-inverse)}.divider_color_inverse .divider__icon,.divider_color_inverse .divider__text{color:var(--guit-sem-color-foreground-inverse)}.divider_withLabel_before.divider:before{display:none}.divider_withLabel_before.divider:after,.divider_withLabel_center.divider:after{content:\"\";flex:1}.divider_withLabel_center .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*4)}.divider_withLabel_after.divider:before{flex:1}.divider_withLabel_after .divider__element,.divider_withLabel_before .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*2.8)}.divider__label{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall);overflow:hidden}.divider__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.divider__icon{flex:0 0 auto}.divider__element{display:flex;flex:0 0 auto;min-width:0;order:1}";
6
- styleInject(css_248z);
7
-
8
- /**
9
- * A divider separates sections of content to establish visual rhythm and hierarchy. Combine dividers with appropriate spacing and text hierarchy to effectively organize content within your layout.
10
- */
11
- const Divider = ({ appearance = "default", Icon, direction = "horizontal", text, contentPosition = "before", content, inset = false, className }) => {
12
- return (React__default.createElement("div", { className: classNames(`divider divider_${inset ? "inset" : "block"} divider_color_${appearance}`, className, {
13
- divider_horizontal: direction === "horizontal",
14
- divider_vertical: direction === "vertical",
15
- [` divider_withLabel_${contentPosition}`]: (text || Icon) && direction === "horizontal"
16
- }) }, direction === "horizontal" && (React__default.createElement(React__default.Fragment, null,
17
- content && React__default.createElement("div", { className: "divider__element" }, content),
18
- (text || Icon) && (React__default.createElement("div", { className: "divider__label" },
19
- text && React__default.createElement("span", { className: "divider__text ellipsis-text" }, text),
20
- Icon && React__default.createElement(Icon, { className: "divider__icon", size: 20 })))))));
21
- };
22
-
23
- export { Divider as default };
package/Drawer.js DELETED
@@ -1,96 +0,0 @@
1
- import React__default, { useContext, useRef, useEffect } from 'react';
2
- import { createPortal } from 'react-dom';
3
- import { c as classNames } from './index-ce02421b.js';
4
- import { S as SvgX } from './X-20da3b4a.js';
5
- import Button from './Button.js';
6
- import Scrollbar from './Scrollbar.js';
7
- import Text from './Text.js';
8
- import { B as ButtonGroup } from './index-978068de.js';
9
- import Tooltip from './Tooltip.js';
10
- import { a as GeneUIDesignSystemContext } from './index-d9a2e208.js';
11
- import { u as useEllipsisDetection } from './useEllipsisDetection-36ecf9df.js';
12
- import { s as styleInject } from './style-inject.es-746bb8ed.js';
13
- import './ActivityRecent-b88e2ba8.js';
14
- import './Loader.js';
15
- import 'prop-types';
16
- import './useDebounceCallback-999deae7.js';
17
- import './ThreeDotsHorizontal-30813ed5.js';
18
- import './PopoverBody-cfe2a5c1.js';
19
- import './floating-ui.react-a6c3b969.js';
20
- import './Info-0f0741e0.js';
21
- import './index-b29adba3.js';
22
- import './index-a2688a52.js';
23
- import './CheckMark-34798545.js';
24
- import './Divider.js';
25
-
26
- var css_248z = ".drawer__wrapper{display:flex;flex-direction:column;height:100%;width:100%}.drawer_size_large{max-width:50%}.drawer_size_medium,.drawer_size_small{max-width:33.33%}.drawer__header{align-items:center;border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;flex:0 0 auto;gap:var(--guit-ref-spacing-medium);height:var(--guit-sem-dimension-height-2xlarge);justify-content:space-between;padding:var(--guit-ref-spacing-medium) var(--guit-ref-spacing-large)}.drawer__body,.drawer__header{background-color:var(--guit-sem-color-background-neutral-1-nudge);width:100%}.drawer__body{height:100%;min-height:0;min-width:0}.drawer__content{height:100%;width:100%}.drawer__footer{align-items:center;background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;flex:0 0 auto;gap:var(--guit-ref-spacing-medium);height:var(--guit-sem-dimension-height-3xlarge);padding:var(--guit-ref-spacing-large);width:100%}.drawer__footer:has(.drawer__buttonGroup:only-child,.drawer__button:only-child){justify-content:flex-end}.drawer__footer:not(:has(.drawer__buttonGroup:only-child,.drawer__button:only-child)){justify-content:space-between}.drawer__title{color:var(--guit-sem-color-foreground-neutral-2);min-width:1rem}.drawer__headerContent{margin-left:auto}.drawer_variant_overlay{background-color:var(--guit-sem-color-background-transparent-overlay-notheme-1);display:flex;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1}.drawer_variant_overlay .drawer__wrapper{box-shadow:var(--guit-sem-shadow-floating-3-position-x-1) var(--guit-sem-shadow-floating-3-position-y-1) var(--guit-sem-shadow-floating-3-blur-1) var(--guit-sem-shadow-floating-3-spread-1) var(--guit-sem-color-floating-3-rgba-1),var(--guit-sem-shadow-floating-3-position-x-2) var(--guit-sem-shadow-floating-3-position-y-2) var(--guit-sem-shadow-floating-3-position-y-1) var(--guit-sem-shadow-floating-3-spread-2) var(--guit-sem-color-floating-3-rgba-2)}.drawer_variant_inline{border-inline-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:100%;width:100%}.drawer_withPadding .drawer__content{padding:var(--guit-ref-spacing-large)}.drawer_position_bottom{flex-direction:column;justify-content:flex-end}.drawer_position_bottom .drawer__wrapper_size_large{max-height:62.22%}.drawer_position_bottom .drawer__wrapper_size_medium{max-height:46.67%}.drawer_position_bottom .drawer__wrapper_size_small{max-height:31.11%}.drawer_position_end .drawer__wrapper_size_large,.drawer_position_start .drawer__wrapper_size_large{max-width:50%}.drawer_position_end .drawer__wrapper_size_medium,.drawer_position_start .drawer__wrapper_size_medium{max-width:33.33%}.drawer_position_end .drawer__wrapper_size_small,.drawer_position_start .drawer__wrapper_size_small{max-width:25%}.drawer_position_end{justify-content:flex-end}.drawer_position_start{justify-content:flex-start}";
27
- styleInject(css_248z);
28
-
29
- /**
30
- * Drawer component slides in from the edge of the screen, allowing users to access additional content or actions without leaving the current view. It can be anchored to the left, right, top, or bottom of the screen and typically overlays or pushes the existing content, depending on situation.
31
- */
32
- const Drawer = ({ className, size = "medium", position = "end", withPadding = true, title, hasCloseButton, open, onClose, shouldCloseOnEscapePress = true, shouldCloseOnOverlayClick = true, lockBodyScroll = true, children, actions, footerContent, headerContent, variant = "overlay" }) => {
33
- const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
34
- const providerCurrent = geneUIProviderRef.current;
35
- const titleRef = useRef(null);
36
- const isTruncated = useEllipsisDetection(titleRef);
37
- useEffect(() => {
38
- const handleKeyDown = (event) => {
39
- if (shouldCloseOnEscapePress && event.key === "Escape") {
40
- onClose === null || onClose === void 0 ? void 0 : onClose();
41
- }
42
- };
43
- if (open) {
44
- document.addEventListener("keydown", handleKeyDown);
45
- if (lockBodyScroll) {
46
- document.body.style.overflow = "hidden";
47
- }
48
- }
49
- return () => {
50
- document.removeEventListener("keydown", handleKeyDown);
51
- if (lockBodyScroll) {
52
- document.body.style.overflow = "unset";
53
- }
54
- };
55
- }, [open, shouldCloseOnEscapePress, onClose]);
56
- const handleOverlayClick = (event) => {
57
- if (shouldCloseOnOverlayClick && event.target === event.currentTarget && variant === "overlay") {
58
- onClose === null || onClose === void 0 ? void 0 : onClose();
59
- }
60
- };
61
- const drawerContent = (React__default.createElement("div", { className: classNames(`drawer drawer_variant_${variant} `, {
62
- drawer_withPadding: withPadding,
63
- [`drawer_position_${position}`]: variant === "overlay",
64
- [`drawer_size_${size}`]: variant === "inline"
65
- }, className), onClick: handleOverlayClick, role: "presentation" },
66
- React__default.createElement("div", { className: classNames("drawer__wrapper", { [`drawer__wrapper_size_${size}`]: variant === "overlay" }) },
67
- (hasCloseButton || title || headerContent) && (React__default.createElement("div", { className: "drawer__header" },
68
- title && (React__default.createElement(Tooltip, { text: title, isVisible: isTruncated },
69
- React__default.createElement(Text, { className: "drawer__title ellipsis-text", variant: "labelLargeSemibold", as: "h1", ref: titleRef }, title))),
70
- headerContent && React__default.createElement("div", { className: "drawer__headerContent" }, headerContent),
71
- hasCloseButton && (React__default.createElement(Button, { size: "medium", Icon: SvgX, type: "button", layout: "text", appearance: "secondary", className: "drawer__closeButton", onClick: onClose })))),
72
- React__default.createElement("div", { className: "drawer__body" },
73
- React__default.createElement(Scrollbar, null,
74
- React__default.createElement("div", { className: "drawer__content" }, typeof children === "string" ? (React__default.createElement(Text, { variant: "bodyLargeMedium", className: "drawer__paragraph", as: "p" }, children)) : (children)))),
75
- (actions || footerContent) && (React__default.createElement("div", { className: "drawer__footer" },
76
- footerContent && React__default.createElement("div", { className: "drawer__footerContent" }, footerContent),
77
- actions && actions.length > 0 && (React__default.createElement(ButtonGroup, { className: "drawer__buttonGroup", size: "medium" }, actions.map((action) => {
78
- const { children: buttonChildren } = action;
79
- const key = `action-${buttonChildren}`;
80
- return buttonChildren ? (React__default.createElement(Button, Object.assign({ key: key }, action), buttonChildren)) : null;
81
- }))))))));
82
- if (!open)
83
- return null;
84
- if (variant === "overlay") {
85
- if (providerCurrent) {
86
- return createPortal(drawerContent, providerCurrent);
87
- }
88
- return null;
89
- }
90
- if (variant === "inline") {
91
- return drawerContent;
92
- }
93
- return null;
94
- };
95
-
96
- export { Drawer as default };
package/Empty.js DELETED
@@ -1,22 +0,0 @@
1
- export { E as default } from './index-978068de.js';
2
- import 'react';
3
- import './index-ce02421b.js';
4
- import './ThreeDotsHorizontal-30813ed5.js';
5
- import './ActivityRecent-b88e2ba8.js';
6
- import './Button.js';
7
- import './Loader.js';
8
- import './style-inject.es-746bb8ed.js';
9
- import './PopoverBody-cfe2a5c1.js';
10
- import './floating-ui.react-a6c3b969.js';
11
- import 'react-dom';
12
- import './Info-0f0741e0.js';
13
- import './X-20da3b4a.js';
14
- import './index-b29adba3.js';
15
- import './Scrollbar.js';
16
- import 'prop-types';
17
- import './useDebounceCallback-999deae7.js';
18
- import './index-d9a2e208.js';
19
- import './index-a2688a52.js';
20
- import './Text.js';
21
- import './CheckMark-34798545.js';
22
- import './Divider.js';
@@ -1,23 +0,0 @@
1
- import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
2
- import React__default from 'react';
3
-
4
- var _excluded = ["size", "color"];
5
- var SvgErrorFilled = function SvgErrorFilled(_ref) {
6
- var _ref$size = _ref.size,
7
- size = _ref$size === void 0 ? 24 : _ref$size,
8
- _ref$color = _ref.color,
9
- color = _ref$color === void 0 ? "currentColor" : _ref$color,
10
- props = _objectWithoutProperties(_ref, _excluded);
11
- return /*#__PURE__*/React__default.createElement("svg", _extends({
12
- width: size,
13
- height: size,
14
- viewBox: "0 0 24 24",
15
- fill: color,
16
- xmlns: "http://www.w3.org/2000/svg"
17
- }, props), /*#__PURE__*/React__default.createElement("path", {
18
- d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-.75 5.758a.75.75 0 1 1 1.5 0v5.243a.75.75 0 1 1-1.5 0v-5.243Zm.75 9.235a.915.915 0 1 1 0-1.83.915.915 0 0 1 0 1.83Z",
19
- fill: color
20
- }));
21
- };
22
-
23
- export { SvgErrorFilled as S };
package/GeneUIProvider.js DELETED
@@ -1,4 +0,0 @@
1
- export { a as GeneUIDesignSystemContext, G as default } from './index-d9a2e208.js';
2
- import 'react';
3
- import './useDebounceCallback-999deae7.js';
4
- import './style-inject.es-746bb8ed.js';