@geneui/components 3.0.0-next-5cecb1e-17022025 → 3.0.0-next-e1ffab5-19022025
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/Button.js +1 -1
- package/Checkbox.js +1 -1
- package/Divider.js +1 -1
- package/GeneUIProvider.js +13 -11
- package/KeyValue.js +49 -0
- package/Pill.js +1 -1
- package/Popover.js +1 -1
- package/ProgressBar.js +1 -1
- package/Steps.js +1 -1
- package/Tag.js +1 -1
- package/TextLink.js +9 -6
- package/components/atoms/TextLink/TextLink.d.ts +6 -4
- package/components/molecules/KeyValue/Key.d.ts +7 -0
- package/components/molecules/KeyValue/KeyValue.d.ts +38 -0
- package/components/molecules/KeyValue/Value.d.ts +6 -0
- package/components/molecules/KeyValue/index.d.ts +3 -0
- package/{index-18e397a9.js → index-faa9d19a.js} +1 -1
- package/index.d.ts +1 -0
- package/index.js +2 -1
- package/package.json +14 -12
package/Button.js
CHANGED
|
@@ -3,7 +3,7 @@ import { c as classNames } from './index-ce02421b.js';
|
|
|
3
3
|
import Loader from './Loader.js';
|
|
4
4
|
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
5
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:-webkit-max-content;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)}.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)}.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)}.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-2);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_fill:hover{background-color:var(--guit-sem-color-background-neutral-2-hover)}.button_color_secondary.button_type_fill:active{background-color:var(--guit-sem-color-background-neutral-2-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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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){-webkit-padding-start:var(--guit-ref-spacing-large);-webkit-padding-end:var(--guit-ref-spacing-large);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{-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-large);padding-inline-end:var(--guit-ref-spacing-large);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_large.button_icon_after{-webkit-padding-start:var(--guit-ref-spacing-large);-webkit-padding-end:var(--guit-ref-spacing-medium);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){-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-medium);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{-webkit-padding-start:var(--guit-ref-spacing-xsmall);-webkit-padding-end:var(--guit-ref-spacing-medium);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_medium.button_icon_after{-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-xsmall);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){-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-medium);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{-webkit-padding-start:var(--guit-ref-spacing-xsmall);-webkit-padding-end:var(--guit-ref-spacing-medium);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_small.button_icon_after{-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-xsmall);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_XSmall{border-radius:var(--guit-ref-radius-4xsmall);height:var(--guit-sem-dimension-height-small-nudge)}.button_size_XSmall.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);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%}";
|
|
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)}.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)}.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)}.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-2);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_fill:hover{background-color:var(--guit-sem-color-background-neutral-2-hover)}.button_color_secondary.button_type_fill:active{background-color:var(--guit-sem-color-background-neutral-2-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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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_XSmall{border-radius:var(--guit-ref-radius-4xsmall);height:var(--guit-sem-dimension-height-small-nudge)}.button_size_XSmall.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);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
7
|
styleInject(css_248z);
|
|
8
8
|
|
|
9
9
|
const iconSizes = {
|
package/Checkbox.js
CHANGED
|
@@ -53,7 +53,7 @@ var SvgMinusOutline = function SvgMinusOutline(_ref) {
|
|
|
53
53
|
}));
|
|
54
54
|
};
|
|
55
55
|
|
|
56
|
-
var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{
|
|
56
|
+
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;height:var(--guit-sem-dimension-height-small);justify-content:center;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-4xsmall)}.checkbox:not(.checkbox_labelTop) .checkbox__infoContainer{padding-inline-start:var(--guit-ref-spacing-4xlarge)}.checkbox:not(.checkbox_labelTop) .checkbox__label{gap:var(--guit-ref-spacing-xsmall)}.checkbox_labelTop{gap:var(--guit-ref-spacing-3xsmall)}.checkbox_labelTop .checkbox__label{align-items:normal;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)}";
|
|
57
57
|
styleInject(css_248z);
|
|
58
58
|
|
|
59
59
|
/**
|
package/Divider.js
CHANGED
|
@@ -2,7 +2,7 @@ import React__default from 'react';
|
|
|
2
2
|
import { c as classNames } from './index-ce02421b.js';
|
|
3
3
|
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = ".divider{display:inline-flex;gap:var(--guit-ref-spacing-xsmall);overflow:hidden}.divider:before{content:\"\";display:block;flex:1;pointer-events:none}.divider_horizontal{align-items:center;width:100%}.divider_horizontal.divider:after,.divider_horizontal.divider:before{
|
|
5
|
+
var css_248z = ".divider{display:inline-flex;gap:var(--guit-ref-spacing-xsmall);overflow:hidden}.divider:before{content:\"\";display:block;flex:1;pointer-events:none}.divider_horizontal{align-items:center;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{align-items:center;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
6
|
styleInject(css_248z);
|
|
7
7
|
|
|
8
8
|
/**
|
package/GeneUIProvider.js
CHANGED
|
@@ -1171,17 +1171,18 @@ var devDependencies = {
|
|
|
1171
1171
|
"@semantic-release/git": "^10.0.1",
|
|
1172
1172
|
"@semantic-release/npm": "^9.0.1",
|
|
1173
1173
|
"@semantic-release/release-notes-generator": "^10.0.3",
|
|
1174
|
-
"@storybook/addon-a11y": "^
|
|
1175
|
-
"@storybook/addon-essentials": "^
|
|
1176
|
-
"@storybook/addon-jest": "^
|
|
1177
|
-
"@storybook/addon-viewport": "^
|
|
1178
|
-
"@storybook/
|
|
1179
|
-
"@storybook/blocks": "^
|
|
1174
|
+
"@storybook/addon-a11y": "^8.5.5",
|
|
1175
|
+
"@storybook/addon-essentials": "^8.5.5",
|
|
1176
|
+
"@storybook/addon-jest": "^8.5.5",
|
|
1177
|
+
"@storybook/addon-viewport": "^8.5.5",
|
|
1178
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
|
|
1179
|
+
"@storybook/blocks": "^8.5.5",
|
|
1180
1180
|
"@storybook/preset-scss": "^1.0.3",
|
|
1181
|
-
"@storybook/
|
|
1181
|
+
"@storybook/preview-api": "^8.5.6",
|
|
1182
|
+
"@storybook/react": "^8.5.5",
|
|
1182
1183
|
"@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
|
|
1183
|
-
"@storybook/react-webpack5": "^
|
|
1184
|
-
"@storybook/theming": "^
|
|
1184
|
+
"@storybook/react-webpack5": "^8.5.5",
|
|
1185
|
+
"@storybook/theming": "^8.5.5",
|
|
1185
1186
|
"@types/enzyme": "^3.10.18",
|
|
1186
1187
|
"@types/enzyme-adapter-react-16": "^1.0.9",
|
|
1187
1188
|
"@types/jest": "^29.5.11",
|
|
@@ -1237,6 +1238,7 @@ var devDependencies = {
|
|
|
1237
1238
|
"postcss-url": "^10.1.3",
|
|
1238
1239
|
prettier: "^3.3.3",
|
|
1239
1240
|
react: "^16.8.1",
|
|
1241
|
+
"react-docgen-typescript-plugin": "^1.0.8",
|
|
1240
1242
|
"react-dom": "^16.8.1",
|
|
1241
1243
|
"react-test-renderer": "^16.12.0",
|
|
1242
1244
|
rollup: "^3.1.0",
|
|
@@ -1247,8 +1249,8 @@ var devDependencies = {
|
|
|
1247
1249
|
sass: "^1.55.0",
|
|
1248
1250
|
"sass-loader": "^13.2.0",
|
|
1249
1251
|
"semantic-release": "^19.0.5",
|
|
1250
|
-
storybook: "^
|
|
1251
|
-
"storybook-dark-mode": "^
|
|
1252
|
+
storybook: "^8.5.5",
|
|
1253
|
+
"storybook-dark-mode": "^4.0.2",
|
|
1252
1254
|
"style-loader": "^3.3.1",
|
|
1253
1255
|
stylelint: "^14.14.0",
|
|
1254
1256
|
"stylelint-config-prettier": "^9.0.3",
|
package/KeyValue.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React__default, { createContext, useMemo, useContext, cloneElement } from 'react';
|
|
2
|
+
import { c as classNames } from './index-ce02421b.js';
|
|
3
|
+
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
4
|
+
import Info from './Info.js';
|
|
5
|
+
import './InfoOutline-dd2e89d9.js';
|
|
6
|
+
import './ArrowLeft-b88e2ba8.js';
|
|
7
|
+
import './Tooltip.js';
|
|
8
|
+
import './floating-ui.react-0485e4db.js';
|
|
9
|
+
import 'react-dom';
|
|
10
|
+
import './GeneUIProvider.js';
|
|
11
|
+
|
|
12
|
+
var css_248z = ".keyValue{display:inline-flex;max-width:100%}.keyValue_direction_vertical{flex-direction:column}.keyValue_direction_horizontal.keyValue_spaceBetween{width:100%}.keyValue__content{align-items:center;color:var(--guit-sem-color-foreground-neutral-2);display:flex;flex:1}.keyValue__value{color:var(--guit-sem-color-foreground-neutral-1);word-break:break-word}.keyValue_size_large{gap:var(--guit-ref-spacing-medium)}.keyValue_size_large .keyValue__content{gap:var(--guit-ref-spacing-xsmall)}.keyValue_size_large .keyValue__title,.keyValue_size_large .keyValue__value{font-family:var(--guit-sem-font-label-large-default-medium-font-family),sans-serif;font-size:var(--guit-sem-font-label-large-default-semibold-font-size);font-weight:var(--guit-sem-font-label-large-default-medium-font-weight);line-height:var(--guit-sem-font-label-large-default-semibold-line-height)}.keyValue_size_medium{gap:var(--guit-ref-spacing-medium)}.keyValue_size_medium .keyValue__content{gap:var(--guit-ref-spacing-xsmall)}.keyValue_size_medium .keyValue__title,.keyValue_size_medium .keyValue__value{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-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}";
|
|
13
|
+
styleInject(css_248z);
|
|
14
|
+
|
|
15
|
+
const KeyValueContext = createContext({});
|
|
16
|
+
/**
|
|
17
|
+
* Key Value components present data in a key-value format, typically used to display information obtained from other components. A common use case is setting up a Key Value component to show detailed information from a selected table row.
|
|
18
|
+
*/
|
|
19
|
+
const KeyValue = ({ className, direction = "vertical", size = "medium", children, spaceBetween = false }) => {
|
|
20
|
+
const memoizedKeyValueContextValue = useMemo(() => ({
|
|
21
|
+
size
|
|
22
|
+
}), [size]);
|
|
23
|
+
return (React__default.createElement(KeyValueContext.Provider, { value: memoizedKeyValueContextValue },
|
|
24
|
+
React__default.createElement("div", { className: classNames(`keyValue keyValue_direction_${direction} keyValue_size_${size}`, className, {
|
|
25
|
+
keyValue_spaceBetween: spaceBetween
|
|
26
|
+
}) }, children)));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const infoSize = {
|
|
30
|
+
large: "small",
|
|
31
|
+
medium: "smallNudge"
|
|
32
|
+
};
|
|
33
|
+
const Key = ({ infoText, children }) => {
|
|
34
|
+
const { size } = useContext(KeyValueContext);
|
|
35
|
+
return (React__default.createElement("div", { className: "keyValue__content" },
|
|
36
|
+
React__default.createElement("span", { className: "keyValue__title" }, children),
|
|
37
|
+
infoText && size && React__default.createElement(Info, { className: "keyValue__icon", infoText: infoText, size: infoSize[size] })));
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const pillSize = {
|
|
41
|
+
large: "medium",
|
|
42
|
+
medium: "small"
|
|
43
|
+
};
|
|
44
|
+
const Value = ({ children }) => {
|
|
45
|
+
const { size } = useContext(KeyValueContext);
|
|
46
|
+
return (React__default.createElement(React__default.Fragment, null, typeof children === "string" ? (React__default.createElement("span", { className: "keyValue__value" }, children)) : (size && cloneElement(children, { size: pillSize[size] }))));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { Key, KeyValue, Value };
|
package/Pill.js
CHANGED
|
@@ -28,7 +28,7 @@ var SvgDot = function SvgDot(_ref) {
|
|
|
28
28
|
}));
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
var css_248z = ".pill{align-items:center;display:inline-flex;max-width:100%;vertical-align:top}.pill_icon_after{flex-direction:row-reverse}.pill_size_medium:not(.pill_icon_only){gap:var(--guit-ref-spacing-xsmall);padding-bottom:var(--guit-ref-spacing-2xsmall);padding-top:var(--guit-ref-spacing-2xsmall)}.pill_size_medium:not(.pill_icon_before,.pill_size_medium.pill_icon_after,.pill_size_medium.pill_icon_only){
|
|
31
|
+
var css_248z = ".pill{align-items:center;display:inline-flex;max-width:100%;vertical-align:top}.pill_icon_after{flex-direction:row-reverse}.pill_size_medium:not(.pill_icon_only){gap:var(--guit-ref-spacing-xsmall);padding-bottom:var(--guit-ref-spacing-2xsmall);padding-top:var(--guit-ref-spacing-2xsmall)}.pill_size_medium:not(.pill_icon_before,.pill_size_medium.pill_icon_after,.pill_size_medium.pill_icon_only){min-width:var(--guit-sem-dimension-width-large);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_medium.pill_icon_after,.pill_size_medium.pill_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.pill_size_medium.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_medium.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_medium.pill_icon_only{min-width:var(--guit-sem-dimension-width-medium);padding:var(--guit-ref-spacing-2xsmall)}.pill_size_small:not(.pill_icon_only){gap:var(--guit-ref-spacing-2xsmall);padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}.pill_size_small:not(.pill_icon_before,.pill_size_small.pill_icon_after,.pill_size_small.pill_icon_only){min-width:var(--guit-sem-dimension-width-large);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_small.pill_icon_after,.pill_size_small.pill_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.pill_size_small.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_small.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.pill_size_small.pill_icon_only{min-width:var(--guit-sem-dimension-width-small);padding:var(--guit-ref-spacing-4xsmall)}.pill_size_medium:not(.pill_icon_only),.pill_size_small:not(.pill_icon_only){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)}.pill_size_smallNudge{gap:var(--guit-ref-spacing-3xsmall);padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}.pill_size_smallNudge:not(.pill_icon_only){font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.pill_size_smallNudge:not(.pill_icon_before,.pill_size_smallNudge.pill_icon_after,.pill_size_smallNudge.pill_icon_only){min-width:var(--guit-sem-dimension-width-medium);padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_smallNudge.pill_icon_after,.pill_size_smallNudge.pill_icon_before{min-width:var(--guit-sem-dimension-width-large)}.pill_size_smallNudge.pill_icon_before{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-3xsmall)}.pill_size_smallNudge.pill_icon_after{padding-inline-end:var(--guit-ref-spacing-3xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}.pill_size_smallNudge.pill_icon_only{min-width:var(--guit-sem-dimension-width-small-nudge);padding:var(--guit-ref-spacing-4xsmall)}.pill_fill.pill_size_medium,.pill_fill.pill_size_small{border-radius:var(--guit-ref-radius-3xsmall)}.pill_fill.pill_size_smallNudge{border-radius:var(--guit-ref-radius-4xsmall)}.pill_fill.pill_color_informative{background-color:var(--guit-sem-color-background-informative)}.pill_fill.pill_color_neutral{background-color:var(--guit-sem-color-background-neutral-3)}.pill_fill.pill_color_error{background-color:var(--guit-sem-color-background-error-1)}.pill_fill.pill_color_success{background-color:var(--guit-sem-color-background-success-1)}.pill_fill.pill_color_warning{background-color:var(--guit-sem-color-background-warning-1)}.pill_fill.pill_color_purple{background-color:var(--guit-sem-color-background-accent-purple-1)}.pill_fill.pill_color_lagoon{background-color:var(--guit-sem-color-background-accent-lagoon-1)}.pill_fill.pill_color_magenta{background-color:var(--guit-sem-color-background-accent-magenta-1)}.pill_fill.pill_color_slate{background-color:var(--guit-sem-color-background-accent-slate-1)}.pill_fill.pill_color_inverse{background-color:var(--guit-sem-color-background-inverse);color:var(--guit-sem-color-foreground-neutral-2)}.pill_color_informative{color:var(--guit-sem-color-foreground-informative)}.pill_color_neutral{color:var(--guit-sem-color-foreground-neutral-2)}.pill_color_error{color:var(--guit-sem-color-foreground-error)}.pill_color_success{color:var(--guit-sem-color-foreground-success)}.pill_color_warning{color:var(--guit-sem-color-foreground-warning)}.pill_color_purple{color:var(--guit-sem-color-foreground-accent-purple)}.pill_color_lagoon{color:var(--guit-sem-color-foreground-accent-lagoon)}.pill_color_magenta{color:var(--guit-sem-color-foreground-accent-magenta)}.pill_color_slate{color:var(--guit-sem-color-foreground-accent-slate)}.pill:not(.pill_fill).pill_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.pill__text{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.pill__icon{flex:0 0 auto}";
|
|
32
32
|
styleInject(css_248z);
|
|
33
33
|
|
|
34
34
|
const iconSizes = {
|
package/Popover.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-
|
|
1
|
+
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-faa9d19a.js';
|
|
2
2
|
import 'react';
|
|
3
3
|
import './floating-ui.react-0485e4db.js';
|
|
4
4
|
import 'react-dom';
|
package/ProgressBar.js
CHANGED
|
@@ -15,7 +15,7 @@ import './useDebounceCallback-999deae7.js';
|
|
|
15
15
|
import './Info.js';
|
|
16
16
|
import './InfoOutline-dd2e89d9.js';
|
|
17
17
|
|
|
18
|
-
var css_248z = ".progressBar{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);min-width:24rem;width:100%}.progressBar_type_determinate .progressBar__loadingBar,.progressBar_type_indeterminate .progressBar__fill{display:none}.progressBar_type_indeterminate .progressBar__loadingBar{animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:var(--guit-ref-motion-easing-standard);will-change:transform}[dir=ltr] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-left}[dir=rtl] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-right}.progressBar_size_large .progressBar__status,.progressBar_size_medium .progressBar__status{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)}.progressBar_size_large .progressBar__track{border-radius:var(--guit-ref-radius-xsmall);height:var(--guit-sem-dimension-height-xsmall)}.progressBar_size_medium .progressBar__track{border-radius:var(--guit-ref-radius-2xsmall);height:var(--guit-sem-dimension-height-2xsmall)}.progressBar_size_small .progressBar__track{border-radius:var(--guit-ref-radius-3xsmall);height:var(--guit-sem-dimension-height-3xsmall)}.progressBar_size_small .progressBar__status{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.progressBar_color_default .progressBar__fill,.progressBar_color_default .progressBar__loadingBar{background-color:var(--guit-sem-color-background-brand-2)}.progressBar_color_success .progressBar__fill,.progressBar_color_success .progressBar__loadingBar{background-color:var(--guit-sem-color-background-success-2)}.progressBar_color_error .progressBar__fill,.progressBar_color_error .progressBar__loadingBar{background-color:var(--guit-sem-color-background-error-2)}.progressBar__track{background-color:var(--guit-sem-color-background-neutral-2);overflow:hidden;width:100%}.progressBar__fill,.progressBar__loadingBar{border-radius:inherit;height:100%}.progressBar__loadingBar{width:50%}.progressBar__info{align-items:flex-start;display:flex;gap:var(--guit-ref-spacing-xsmall);justify-content:space-between;width:100%}.progressBar__helperText{word-break:break-word}.progressBar__status{
|
|
18
|
+
var css_248z = ".progressBar{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);min-width:24rem;width:100%}.progressBar_type_determinate .progressBar__loadingBar,.progressBar_type_indeterminate .progressBar__fill{display:none}.progressBar_type_indeterminate .progressBar__loadingBar{animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:var(--guit-ref-motion-easing-standard);will-change:transform}[dir=ltr] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-left}[dir=rtl] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-right}.progressBar_size_large .progressBar__status,.progressBar_size_medium .progressBar__status{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)}.progressBar_size_large .progressBar__track{border-radius:var(--guit-ref-radius-xsmall);height:var(--guit-sem-dimension-height-xsmall)}.progressBar_size_medium .progressBar__track{border-radius:var(--guit-ref-radius-2xsmall);height:var(--guit-sem-dimension-height-2xsmall)}.progressBar_size_small .progressBar__track{border-radius:var(--guit-ref-radius-3xsmall);height:var(--guit-sem-dimension-height-3xsmall)}.progressBar_size_small .progressBar__status{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.progressBar_color_default .progressBar__fill,.progressBar_color_default .progressBar__loadingBar{background-color:var(--guit-sem-color-background-brand-2)}.progressBar_color_success .progressBar__fill,.progressBar_color_success .progressBar__loadingBar{background-color:var(--guit-sem-color-background-success-2)}.progressBar_color_error .progressBar__fill,.progressBar_color_error .progressBar__loadingBar{background-color:var(--guit-sem-color-background-error-2)}.progressBar__track{background-color:var(--guit-sem-color-background-neutral-2);overflow:hidden;width:100%}.progressBar__fill,.progressBar__loadingBar{border-radius:inherit;height:100%}.progressBar__loadingBar{width:50%}.progressBar__info{align-items:flex-start;display:flex;gap:var(--guit-ref-spacing-xsmall);justify-content:space-between;width:100%}.progressBar__helperText{word-break:break-word}.progressBar__status{color:var(--guit-sem-color-foreground-neutral-2);display:inline-flex;flex:0 0 auto;gap:.4rem;margin-inline-start:auto}.progressBar__uploadingText{display:inline-block}@keyframes progress-bar-loading-from-left{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(200%,0,0)}}@keyframes progress-bar-loading-from-right{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-200%,0,0)}}";
|
|
19
19
|
styleInject(css_248z);
|
|
20
20
|
|
|
21
21
|
const helperTextTypeMap = {
|
package/Steps.js
CHANGED
|
@@ -47,7 +47,7 @@ var SvgUnavailableOutline = function SvgUnavailableOutline(_ref) {
|
|
|
47
47
|
}));
|
|
48
48
|
};
|
|
49
49
|
|
|
50
|
-
var css_248z = ".steps{display:flex}.steps_direction_horizontal{flex-direction:row}.steps_direction_horizontal .steps__step{grid-template-rows:2.4rem 1fr}.steps_direction_horizontal .steps__status{flex-direction:row}.steps_direction_horizontal .steps__content{
|
|
50
|
+
var css_248z = ".steps{display:flex}.steps_direction_horizontal{flex-direction:row}.steps_direction_horizontal .steps__step{grid-template-rows:2.4rem 1fr}.steps_direction_horizontal .steps__status{flex-direction:row}.steps_direction_horizontal .steps__content{max-width:20rem;padding-inline-end:var(--guit-ref-spacing-medium)}.steps_direction_vertical{flex-direction:column}.steps_direction_vertical .steps__step{grid-template-columns:2.4rem 1fr}.steps_direction_vertical .steps__status{flex-direction:column}.steps_linear .steps__label{pointer-events:none}.steps_linear .steps__label:focus-visible{outline:none}.steps:not(.steps_linear) .steps__label:hover{background-color:var(--guit-sem-color-background-neutral-1-hover)}.steps:not(.steps_linear) .steps__label:active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.steps__step{grid-gap:var(--guit-ref-spacing-xsmall);display:inline-grid;min-height:var(--guit-sem-dimension-height-3xlarge);min-width:var(--guit-sem-dimension-width-3xlarge)}.steps__step:not(:last-child){flex:1}.steps__step:last-child{flex:0 0 auto}.steps__step:last-child .steps__status_divider{display:none}.steps__step.steps__step_disabled .steps__description,.steps__step.steps__step_disabled .steps__label,.steps__step.steps__step_disabled .steps__status_icon{color:var(--guit-sem-color-foreground-disabled)}.steps__step .steps__label[disabled]{pointer-events:none}.steps__step .steps__label[disabled]:focus-visible{outline:none}.steps__step:not(.steps__step_disabled) .steps__description,.steps__step:not(.steps__step_disabled) .steps__label{color:var(--guit-sem-color-foreground-neutral-2)}.steps__step:not(.steps__step_disabled):not(.steps__step_current,.steps__step_success,.steps__step_error) .steps__status_icon{color:var(--guit-sem-color-foreground-neutral-1)}.steps__step:not(.steps__step_disabled).steps__step_current .steps__status_icon,.steps__step:not(.steps__step_disabled).steps__step_success .steps__status_icon{color:var(--guit-sem-color-foreground-selected)}.steps__step:not(.steps__step_disabled).steps__step_error .steps__status_icon{color:var(--guit-sem-color-foreground-error)}.steps__content,.steps__status{max-width:100%}.steps__status{display:flex}.steps__status_icon{flex:0 0 auto}.steps__status_divider{flex:1}.steps__status_numeric{align-items:center;border-radius:var(--guit-ref-radius-full);border-style:var(--guit-ref-border-style-solid);border-width:var(--guit-ref-border-width-thin);display:flex;font-family:var(--guit-sem-font-body-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-body-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-body-medium-default-semibold-font-weight);height:2rem;justify-content:center;line-height:var(--guit-sem-font-body-medium-default-semibold-line-height);margin:.2rem;width:2rem}.steps__content{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);display:flex;flex-direction:column}.steps__description,.steps__label{padding-block:var(--guit-ref-spacing-4xsmall);padding-inline:var(--guit-ref-spacing-3xsmall);text-align:left;word-break:break-word}.steps__label{border-radius:var(--guit-ref-radius-3xsmall);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-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.steps__description{font-family:var(--guit-sem-font-body-medium-default-regular-font-family),sans-serif;font-size:var(--guit-sem-font-body-medium-default-regular-font-size);font-weight:var(--guit-sem-font-body-medium-default-regular-font-weight);line-height:var(--guit-sem-font-body-medium-default-regular-line-height)}";
|
|
51
51
|
styleInject(css_248z);
|
|
52
52
|
|
|
53
53
|
const StepsContext = createContext({});
|
package/Tag.js
CHANGED
|
@@ -36,7 +36,7 @@ var SvgTagOutline = function SvgTagOutline(_ref) {
|
|
|
36
36
|
}));
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
-
var css_248z = ".tag{align-items:center;display:inline-flex;max-width:28rem}.tag_size_medium,.tag_size_small{
|
|
39
|
+
var css_248z = ".tag{align-items:center;display:inline-flex;max-width:28rem}.tag_size_medium,.tag_size_small{border-radius:var(--guit-ref-radius-3xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.tag_size_medium.tag_withIcon,.tag_size_small.tag_withIcon{padding-inline-start:var(--guit-ref-spacing-xsmall)}.tag_size_medium .tag__text,.tag_size_small .tag__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)}.tag_size_medium{gap:var(--guit-ref-spacing-xsmall)}.tag_size_small{gap:var(--guit-ref-spacing-2xsmall)}.tag_state_rest{background-color:var(--guit-sem-color-background-neutral-4)}.tag_state_rest .tag__icon,.tag_state_rest .tag__text{color:var(--guit-sem-color-foreground-neutral-2)}.tag_state_error{background-color:var(--guit-sem-color-background-error-1)}.tag_state_error .tag__icon,.tag_state_error .tag__text{color:var(--guit-sem-color-foreground-error)}.tag_state_warning{background-color:var(--guit-sem-color-background-warning-1)}.tag_state_warning .tag__icon,.tag_state_warning .tag__text{color:var(--guit-sem-color-foreground-warning)}.tag_state_disabled{background-color:var(--guit-sem-color-background-disabled);pointer-events:none;-webkit-user-select:none;user-select:none}.tag_state_disabled .tag__icon,.tag_state_disabled .tag__text{color:var(--guit-sem-color-foreground-disabled)}.tag__button,.tag__icon{flex:0 0 auto}.tag__text{flex:1;min-width:0}";
|
|
40
40
|
styleInject(css_248z);
|
|
41
41
|
|
|
42
42
|
const icons = {
|
package/TextLink.js
CHANGED
|
@@ -2,19 +2,22 @@ import React__default from 'react';
|
|
|
2
2
|
import { c as classNames } from './index-ce02421b.js';
|
|
3
3
|
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = ".textLink{border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;word-break:break-word}.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-
|
|
5
|
+
var css_248z = ".textLink{border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;word-break:break-word}.textLink_size_large.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-large-underline-medium-font-family),sans-serif;font-size:var(--guit-sem-font-body-large-underline-medium-font-size);font-weight:var(--guit-sem-font-body-large-underline-medium-font-weight);line-height:var(--guit-sem-font-body-large-underline-medium-line-height);-webkit-text-decoration:var(--guit-ref-font-text-decoration-underline);text-decoration:var(--guit-ref-font-text-decoration-underline)}.textLink_size_large:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-large-default-medium-font-family),sans-serif;font-size:var(--guit-sem-font-body-large-default-medium-font-size);font-weight:var(--guit-sem-font-body-large-default-medium-font-weight);line-height:var(--guit-sem-font-body-large-default-medium-line-height)}.textLink_size_medium.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family),sans-serif;font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-ref-font-text-decoration-underline);text-decoration:var(--guit-ref-font-text-decoration-underline)}.textLink_size_medium:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-medium-default-medium-font-family),sans-serif;font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}.textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}.textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}.textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}.textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}.textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}.textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}.textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}.textLink_disabled{pointer-events:none}.textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}.textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}.textLink__icon{flex:0 0 auto;vertical-align:middle}.textLink__icon_before{margin-inline-end:var(--guit-ref-spacing-3xsmall)}.textLink__icon_after{margin-inline-start:var(--guit-ref-spacing-3xsmall)}";
|
|
6
6
|
styleInject(css_248z);
|
|
7
7
|
|
|
8
|
+
const iconSize = {
|
|
9
|
+
medium: 20,
|
|
10
|
+
large: 24
|
|
11
|
+
};
|
|
8
12
|
/**
|
|
9
13
|
* A link is styled text that navigates users to another location, either within the current experience or to a different app or website.
|
|
10
14
|
*/
|
|
11
|
-
const TextLink = ({ text, href, iconBefore, rel, target = "self", underline, appearance = "primary", disabled, onClick, isLoading, Icon, className }) => isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("a", Object.assign({ target: `_${target}`, rel: rel, className: classNames(`textLink textLink_color_${appearance}`, className, {
|
|
15
|
+
const TextLink = ({ text, href, iconBefore, rel, target = "self", underline, appearance = "primary", size = "medium", disabled, onClick, isLoading, Icon, className }) => isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("a", Object.assign({ target: `_${target}`, rel: rel, className: classNames(`textLink textLink_size_${size} textLink_color_${appearance}`, className, {
|
|
12
16
|
textLink_underline: underline,
|
|
13
17
|
textLink_disabled: disabled
|
|
14
18
|
}), href: href, onClick: onClick }, (disabled && { tabIndex: -1 })),
|
|
15
|
-
React__default.createElement(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
Icon && !iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_after", size: 20 }))));
|
|
19
|
+
Icon && iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_before", size: iconSize[size] }),
|
|
20
|
+
React__default.createElement("span", { className: "textLink__text" }, text),
|
|
21
|
+
Icon && !iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_after", size: iconSize[size] })));
|
|
19
22
|
|
|
20
23
|
export { TextLink as default };
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import React, { FC } from "react";
|
|
2
|
+
import { IconProps } from "@geneui/icons";
|
|
2
3
|
import "./TextLink.scss";
|
|
3
|
-
interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
4
|
-
size?: 16 | 20 | 24 | 28 | 32 | 48;
|
|
5
|
-
color?: string;
|
|
6
|
-
}
|
|
7
4
|
interface ITextLinkProps {
|
|
8
5
|
/**
|
|
9
6
|
* Main visible content in the link.
|
|
@@ -39,6 +36,11 @@ interface ITextLinkProps {
|
|
|
39
36
|
* Possible values: <code>primary | secondary | inverse </code>
|
|
40
37
|
*/
|
|
41
38
|
appearance?: "primary" | "secondary" | "inverse";
|
|
39
|
+
/**
|
|
40
|
+
* Defines the size of the Text Link.<br>
|
|
41
|
+
* Possible values: `medium | large`
|
|
42
|
+
*/
|
|
43
|
+
size?: "medium" | "large";
|
|
42
44
|
/**
|
|
43
45
|
* When `true`, the link is disabled and not clickable.
|
|
44
46
|
*/
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { FC, ReactElement } from "react";
|
|
2
|
+
import "./KeyValue.scss";
|
|
3
|
+
import { IKeyProps } from "./Key";
|
|
4
|
+
import { IValueProps } from "./Value";
|
|
5
|
+
interface IKeyValueContextProps {
|
|
6
|
+
/**
|
|
7
|
+
* Size
|
|
8
|
+
* Possible values: `medium | large`;
|
|
9
|
+
*/
|
|
10
|
+
size?: "medium" | "large";
|
|
11
|
+
}
|
|
12
|
+
interface IKeyValueProps extends IKeyValueContextProps {
|
|
13
|
+
/**
|
|
14
|
+
* Additional class for the parent element.
|
|
15
|
+
* This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Key - Value direction <br/>
|
|
20
|
+
* Possible values: `vertical | horizontal`
|
|
21
|
+
*/
|
|
22
|
+
direction?: "vertical" | "horizontal";
|
|
23
|
+
/**
|
|
24
|
+
* Adds space between key and value in horizontal direction.
|
|
25
|
+
*/
|
|
26
|
+
spaceBetween?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Children - value direction <br/>
|
|
29
|
+
* Possible values: `Key | Value`
|
|
30
|
+
*/
|
|
31
|
+
children: [ReactElement<IKeyProps>, ReactElement<IValueProps>];
|
|
32
|
+
}
|
|
33
|
+
declare const KeyValueContext: React.Context<IKeyValueContextProps>;
|
|
34
|
+
/**
|
|
35
|
+
* Key Value components present data in a key-value format, typically used to display information obtained from other components. A common use case is setting up a Key Value component to show detailed information from a selected table row.
|
|
36
|
+
*/
|
|
37
|
+
declare const KeyValue: FC<IKeyValueProps>;
|
|
38
|
+
export { IKeyValueProps, KeyValueContext, KeyValue as default };
|
|
@@ -6,7 +6,7 @@ import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
|
6
6
|
import { GeneUIDesignSystemContext } from './GeneUIProvider.js';
|
|
7
7
|
import Button from './Button.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge{width:72rem}.popover_size_xLarge .popover__body{height:15.4rem}.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_large{width:48rem}.popover_size_medium{width:36rem}.popover_size_large .popover__body,.popover_size_medium .popover__body{height:17.2rem}.popover_size_large .popover__footer,.popover_size_medium .popover__footer{height:5.6rem}.popover_size_small{width:24rem}.popover_size_small .popover__body{height:8.8rem}.popover_size_small .popover__footer{height:5.6rem}.popover_size_mobile{min-width:32rem;width:100%}.popover_size_mobile .popover__body{height:17.2rem}.popover_size_mobile .popover__footer{height:6.4rem}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1;overflow:hidden}.popover__title_icon{flex:0 0 auto}.popover__title_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-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;overflow-y:auto;width:100%}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);justify-content:space-between;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{
|
|
9
|
+
var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge{width:72rem}.popover_size_xLarge .popover__body{height:15.4rem}.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_large{width:48rem}.popover_size_medium{width:36rem}.popover_size_large .popover__body,.popover_size_medium .popover__body{height:17.2rem}.popover_size_large .popover__footer,.popover_size_medium .popover__footer{height:5.6rem}.popover_size_small{width:24rem}.popover_size_small .popover__body{height:8.8rem}.popover_size_small .popover__footer{height:5.6rem}.popover_size_mobile{min-width:32rem;width:100%}.popover_size_mobile .popover__body{height:17.2rem}.popover_size_mobile .popover__footer{height:6.4rem}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1;overflow:hidden}.popover__title_icon{flex:0 0 auto}.popover__title_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-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;overflow-y:auto;width:100%}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);justify-content:space-between;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{margin-inline-start:auto}";
|
|
10
10
|
styleInject(css_248z);
|
|
11
11
|
|
|
12
12
|
const SCROLL_LOCK_CLASS = "scroll-lock";
|
package/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export { default as Tooltip } from "./components/molecules/Tooltip";
|
|
|
14
14
|
export { default as ProgressBar } from "./components/molecules/ProgressBar";
|
|
15
15
|
export { Steps, Step, IStepProps, IStepsProps } from "./components/molecules/Steps";
|
|
16
16
|
export { default as Tag, ITagProps } from "./components/molecules/Tag";
|
|
17
|
+
export { KeyValue, Key, Value, IKeyValueProps, IKeyProps, IValueProps } from "./components/molecules/KeyValue";
|
|
17
18
|
export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
|
|
18
19
|
export { default as useDebounce } from "./hooks/useDebounceCallback";
|
|
19
20
|
export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";
|
package/index.js
CHANGED
|
@@ -6,7 +6,7 @@ export { default as Pill } from './Pill.js';
|
|
|
6
6
|
export { default as Divider } from './Divider.js';
|
|
7
7
|
export { default as Info } from './Info.js';
|
|
8
8
|
export { default as Button } from './Button.js';
|
|
9
|
-
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-
|
|
9
|
+
export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-faa9d19a.js';
|
|
10
10
|
export { default as Badge } from './Badge.js';
|
|
11
11
|
export { default as Scrollbar } from './Scrollbar.js';
|
|
12
12
|
export { Col, Grid, Row } from './Grid.js';
|
|
@@ -14,6 +14,7 @@ export { default as Tooltip } from './Tooltip.js';
|
|
|
14
14
|
export { default as ProgressBar } from './ProgressBar.js';
|
|
15
15
|
export { Step, Steps } from './Steps.js';
|
|
16
16
|
export { default as Tag } from './Tag.js';
|
|
17
|
+
export { Key, KeyValue, Value } from './KeyValue.js';
|
|
17
18
|
export { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
|
|
18
19
|
export { u as useDebounce } from './useDebounceCallback-999deae7.js';
|
|
19
20
|
export { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
|
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-e1ffab5-19022025",
|
|
5
5
|
"author": "SoftConstruct",
|
|
6
6
|
"homepage": "https://github.com/softconstruct/gene-ui-components#readme",
|
|
7
7
|
"repository": {
|
|
@@ -73,17 +73,18 @@
|
|
|
73
73
|
"@semantic-release/git": "^10.0.1",
|
|
74
74
|
"@semantic-release/npm": "^9.0.1",
|
|
75
75
|
"@semantic-release/release-notes-generator": "^10.0.3",
|
|
76
|
-
"@storybook/addon-a11y": "^
|
|
77
|
-
"@storybook/addon-essentials": "^
|
|
78
|
-
"@storybook/addon-jest": "^
|
|
79
|
-
"@storybook/addon-viewport": "^
|
|
80
|
-
"@storybook/
|
|
81
|
-
"@storybook/blocks": "^
|
|
76
|
+
"@storybook/addon-a11y": "^8.5.5",
|
|
77
|
+
"@storybook/addon-essentials": "^8.5.5",
|
|
78
|
+
"@storybook/addon-jest": "^8.5.5",
|
|
79
|
+
"@storybook/addon-viewport": "^8.5.5",
|
|
80
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
|
|
81
|
+
"@storybook/blocks": "^8.5.5",
|
|
82
82
|
"@storybook/preset-scss": "^1.0.3",
|
|
83
|
-
"@storybook/
|
|
83
|
+
"@storybook/preview-api": "^8.5.6",
|
|
84
|
+
"@storybook/react": "^8.5.5",
|
|
84
85
|
"@storybook/react-docgen-typescript-plugin": "^1.0.6--canary.9.0c3f3b7.0",
|
|
85
|
-
"@storybook/react-webpack5": "^
|
|
86
|
-
"@storybook/theming": "^
|
|
86
|
+
"@storybook/react-webpack5": "^8.5.5",
|
|
87
|
+
"@storybook/theming": "^8.5.5",
|
|
87
88
|
"@types/enzyme": "^3.10.18",
|
|
88
89
|
"@types/enzyme-adapter-react-16": "^1.0.9",
|
|
89
90
|
"@types/jest": "^29.5.11",
|
|
@@ -139,6 +140,7 @@
|
|
|
139
140
|
"postcss-url": "^10.1.3",
|
|
140
141
|
"prettier": "^3.3.3",
|
|
141
142
|
"react": "^16.8.1",
|
|
143
|
+
"react-docgen-typescript-plugin": "^1.0.8",
|
|
142
144
|
"react-dom": "^16.8.1",
|
|
143
145
|
"react-test-renderer": "^16.12.0",
|
|
144
146
|
"rollup": "^3.1.0",
|
|
@@ -149,8 +151,8 @@
|
|
|
149
151
|
"sass": "^1.55.0",
|
|
150
152
|
"sass-loader": "^13.2.0",
|
|
151
153
|
"semantic-release": "^19.0.5",
|
|
152
|
-
"storybook": "^
|
|
153
|
-
"storybook-dark-mode": "^
|
|
154
|
+
"storybook": "^8.5.5",
|
|
155
|
+
"storybook-dark-mode": "^4.0.2",
|
|
154
156
|
"style-loader": "^3.3.1",
|
|
155
157
|
"stylelint": "^14.14.0",
|
|
156
158
|
"stylelint-config-prettier": "^9.0.3",
|