@muraldevkit/ui-toolkit 2.60.0 → 2.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/components/form/{text-input/hooks → hooks}/useActiveColor.d.ts +1 -1
  2. package/dist/components/form/{text-input/MrlEditableTextInput → hooks}/useIsEditable.d.ts +1 -1
  3. package/dist/components/form/index.d.ts +1 -0
  4. package/dist/components/form/textarea/MrlEditableTextarea/MrlEditableTextarea.d.ts +43 -0
  5. package/dist/components/form/textarea/MrlEditableTextarea/MrlEditableTextareaRightButton.d.ts +25 -0
  6. package/dist/components/form/textarea/MrlEditableTextarea/index.d.ts +1 -0
  7. package/dist/components/index.d.ts +1 -0
  8. package/dist/components/panel/MrlPanel/MrlPanel.d.ts +39 -0
  9. package/dist/components/panel/MrlPanel/index.d.ts +1 -0
  10. package/dist/components/panel/MrlPanelFooter/MrlPanelFooter.d.ts +22 -0
  11. package/dist/components/panel/MrlPanelFooter/index.d.ts +1 -0
  12. package/dist/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.d.ts +18 -0
  13. package/dist/components/panel/MrlPanelStickyHeader/index.d.ts +1 -0
  14. package/dist/components/panel/index.d.ts +3 -0
  15. package/dist/index.js +1 -1
  16. package/dist/styles/MrlEditableTextarea/global.scss +15 -0
  17. package/dist/styles/MrlEditableTextarea/module.scss +53 -0
  18. package/dist/styles/MrlPanel/module.scss +38 -0
  19. package/dist/styles/MrlPanelFooter/module.scss +12 -0
  20. package/dist/styles/MrlPanelStickyHeader/module.scss +5 -0
  21. package/package.json +1 -1
package/dist/styles/MrlEditableTextarea/global.scss ADDED
@@ -0,0 +1,15 @@
1
+
2
+ @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
3
+ @use '../../forms.global.scss' as *;
4
+ @use '../../forms.variables.scss';
5
+ .MrlEditableTextarea {
6
+ @include mrl-focus($is-inline-element: 'true');
7
+ &:not(:disabled):read-only {
8
+ --mrl-text-input-background: none;
9
+ color: var(--mrl-text-input-color-read-only);
10
+ }
11
+ }
12
+ .MrlEditableTextarea-focus-wrapper {
13
+ display: flex;
14
+ flex-direction: column;
15
+ }
package/dist/styles/MrlEditableTextarea/module.scss ADDED
@@ -0,0 +1,53 @@
1
+
2
+ @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
3
+ @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
4
+ @use '../../forms.global.scss' as *;
5
+ @use '../../forms.variables.scss';
6
+ .MrlEditableTextarea {
7
+ @include mrl-text-inputs;
8
+ --mrl-text-input-border-color: var(--mrl-color-background);
9
+ &:disabled {
10
+ --mrl-text-input-border-color: var(--mrl-color-background);
11
+ }
12
+ &:not(:disabled):read-only {
13
+ color: var(--mrl-text-input-color-read-only);
14
+ --mrl-text-input-border-color: var(--mrl-color-background);
15
+ }
16
+ padding-right: var(--mrl-spacing-08);
17
+ resize: vertical;
18
+ }
19
+ .MrlEditableTextarea-dynamicIcon {
20
+ color: var(--mrl-text-input-border-color);
21
+ padding-right: calc(var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) + var(--mrl-text-input-icon-offset));
22
+ position: absolute;
23
+ right: var(--mrl-text-input-inset-horizontal);
24
+ top: calc(var(--mrl-text-input-inset-vertical) + var(--mrl-line-width-border));
25
+ transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
26
+ z-index: $mrl-zIndex-focus + 1;
27
+ &--disabled {
28
+ color: var(--mrl-text-input-border-color-disabled);
29
+ }
30
+ }
31
+ .MrlEditableTextarea--active {
32
+ border-color: var(--mrl-text-input-border-color-hover);
33
+ }
34
+ .MrlEditableTextarea-dynamicIcon--active {
35
+ color: var(--mrl-text-input-border-color-hover);
36
+ }
37
+ .MrlEditableTextarea-dynamicIcon > button {
38
+ @include mrl-focus;
39
+ background: none;
40
+ border: none;
41
+ color: inherit;
42
+ cursor: pointer;
43
+ height: 20px;
44
+ outline: none;
45
+ padding: 0;
46
+ }
47
+ .MrlEditableTextarea-errorMessage {
48
+ color: var(--mrl-color-background-error);
49
+ font-size: var(--mrl-type-size-text-small);
50
+ }
51
+ .MrlEditibaleTextInput-errorIcon {
52
+ vertical-align: middle;
53
+ }
package/dist/styles/MrlPanel/module.scss ADDED
@@ -0,0 +1,38 @@
1
+ @use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
2
+ $mrl-panel-width: 16.75rem;
3
+ .MrlPanel {
4
+ background-color: var(--mrl-color-background);
5
+ border-radius: var(--mrl-border-radius-container);
6
+ box-shadow: var(--mrl-shadows-raised);
7
+ display: flex;
8
+ flex-direction: column;
9
+ height: auto;
10
+ max-height: 100%;
11
+ overflow: hidden;
12
+ padding: var(--mrl-spacing-06) 0;
13
+ pointer-events: auto;
14
+ position: relative;
15
+ width: $mrl-panel-width;
16
+ z-index: $mrl-zIndex-panels;
17
+ .MrlPanel--title {
18
+ padding-left: var(--mrl-spacing-06);
19
+ }
20
+ .MrlPanel--close {
21
+ position: absolute;
22
+ right: var(--mrl-spacing-04);
23
+ top: var(--mrl-spacing-04);
24
+ }
25
+ }
26
+ .MrlPanel--scrollable {
27
+ margin-top: var(--mrl-spacing-04);
28
+ outline: none;
29
+ overflow-x: clip;
30
+ overflow-y: scroll;
31
+ overflow-y: overlay;
32
+ padding-left: var(--mrl-spacing-06);
33
+ padding-right: var(--mrl-spacing-06);
34
+ .MrlPanel--description {
35
+ margin-bottom: var(--mrl-space-stack-title-related);
36
+ padding-right: var(--mrl-space-inset-container-large);
37
+ }
38
+ }
package/dist/styles/MrlPanelFooter/module.scss ADDED
@@ -0,0 +1,12 @@
1
+ .MrlPanelFooter {
2
+ background-color: var(--mrl-color-background);
3
+ bottom: var(--mrl-spacing-03);
4
+ color: rgba(var(--mrl-gray-60), 1);
5
+ left: 0;
6
+ margin: 0 var(--mrl-spacing-06);
7
+ position: absolute;
8
+ width: calc(100% - var(--mrl-spacing-06) * 2);
9
+ .MrlPanelFooter--divider {
10
+ margin: 0 0 var(--mrl-spacing-02) 0;
11
+ }
12
+ }
package/dist/styles/MrlPanelStickyHeader/module.scss ADDED
@@ -0,0 +1,5 @@
1
+ .MrlPanelStickyHeader {
2
+ background-color: var(--mrl-color-background);
3
+ position: sticky;
4
+ top: 0;
5
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.60.0",
3
+ "version": "2.62.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",