@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.
- package/package.json +1 -1
- package/ActivityRecent-b88e2ba8.js +0 -33
- package/Avatar.js +0 -5
- package/Badge.js +0 -36
- package/Button.js +0 -45
- package/ButtonGroup.js +0 -22
- package/CheckMark-34798545.js +0 -23
- package/Checkbox.js +0 -89
- package/CircleFilled-19a9ec62.js +0 -23
- package/Copy.js +0 -63
- package/Divider.js +0 -23
- package/Drawer.js +0 -96
- package/Empty.js +0 -22
- package/ErrorFilled-f4226310.js +0 -23
- package/GeneUIProvider.js +0 -4
- package/GlobalHeader.js +0 -413
- package/Grid.js +0 -22
- package/HelperText.js +0 -31
- package/Info-0f0741e0.js +0 -29
- package/Info.js +0 -43
- package/KeyValue.js +0 -51
- package/Label.js +0 -42
- package/Loader.js +0 -21
- package/Logo.js +0 -19
- package/Menu.js +0 -22
- package/Modal.js +0 -98
- package/Navigation.js +0 -387
- package/Notification.js +0 -129
- package/Pagination.js +0 -188
- package/Pill.js +0 -49
- package/Popover.js +0 -26
- package/PopoverBody-cfe2a5c1.js +0 -321
- package/Products.js +0 -131
- package/Profile.js +0 -24
- package/ProgressBar.js +0 -73
- package/QRCode.js +0 -1166
- package/Radio.js +0 -58
- package/Rate.js +0 -486
- package/Scrollbar.js +0 -3481
- package/Skeleton.js +0 -16
- package/Spreadsheet.js +0 -9
- package/Steps.js +0 -143
- package/Switch.js +0 -46
- package/Tag.js +0 -84
- package/Text.js +0 -20
- package/TextField.js +0 -134
- package/TextLink.js +0 -23
- package/ThreeDotsHorizontal-30813ed5.js +0 -67
- package/Timeline.js +0 -70
- package/Tooltip.js +0 -172
- package/TriangleAlert-ba250f4c.js +0 -25
- package/X-20da3b4a.js +0 -23
- package/floating-ui.react-a6c3b969.js +0 -3898
- package/index-0b9e90da.js +0 -62
- package/index-55a33393.js +0 -61
- package/index-978068de.js +0 -488
- package/index-a2688a52.js +0 -272
- package/index-b29adba3.js +0 -88
- package/index-ce02421b.js +0 -84
- package/index-d9a2e208.js +0 -1553
- package/index.js +0 -58
- package/style-inject.es-746bb8ed.js +0 -28
- package/tokens-f34162d4.js +0 -6
- package/useDebounceCallback-999deae7.js +0 -23
- 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-
|
|
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
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';
|
package/CheckMark-34798545.js
DELETED
|
@@ -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 };
|
package/CircleFilled-19a9ec62.js
DELETED
|
@@ -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';
|
package/ErrorFilled-f4226310.js
DELETED
|
@@ -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