@muraldevkit/ui-toolkit 2.47.1-dev.1 → 2.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/hooks/useTriggerPosition/index.d.ts +2 -1
  2. package/dist/index.js +1 -1
  3. package/dist/styles/MrlSwitchStandalone/module.scss +43 -43
  4. package/package.json +1 -1
  5. package/dist/components/menu/demo/MenuWithIconButtonTrigger.d.ts +0 -19
  6. package/dist/components/popover/demo/PopoverWithIconButton.d.ts +0 -21
package/dist/styles/MrlSwitchStandalone/module.scss CHANGED
@@ -1,8 +1,4 @@
1
1
  @use '@muraldevkit/ds-foundation/src/styles/_mixins' as *;
2
- .MrlSwitchStandalone {
3
- height: 100%;
4
- position: relative;
5
- }
6
2
  .MrlSwitchStandalone-switch {
7
3
  background-color: rgba(var(--mrl-gray-80), 1);
8
4
  border-radius: 0.625rem;
@@ -35,47 +31,51 @@
35
31
  width: var(--mrl-spacing-04);
36
32
  }
37
33
  }
38
- .MrlSwitchStandalone-checkbox {
39
- height: var(--mrl-spacing-06);
40
- opacity: 0;
41
- position: absolute;
42
- width: calc(var(--mrl-spacing-08) + var(--mrl-spacing-02));
43
- &:hover + .MrlSwitchStandalone-switch {
44
- background-color: rgba(var(--mrl-gray-90), 1);
45
- }
46
- &:active + .MrlSwitchStandalone-switch {
47
- background-color: rgba(var(--mrl-gray-100), 1);
48
- }
49
- &:disabled {
50
- + .MrlSwitchStandalone-switch,
34
+ .MrlSwitchStandalone {
35
+ height: 100%;
36
+ position: relative;
37
+ .MrlSwitchStandalone-checkbox {
38
+ height: var(--mrl-spacing-06);
39
+ opacity: 0;
40
+ position: absolute;
41
+ width: calc(var(--mrl-spacing-08) + var(--mrl-spacing-02));
51
42
  &:hover + .MrlSwitchStandalone-switch {
52
- background-color: rgba(var(--mrl-gray-40), 1);
43
+ background-color: rgba(var(--mrl-gray-90), 1);
53
44
  }
54
- ~ .MrlSwitchStandalone-switch-indicator {
55
- color: rgba(var(--mrl-gray-40), 1);
45
+ &:active + .MrlSwitchStandalone-switch {
46
+ background-color: rgba(var(--mrl-gray-100), 1);
47
+ }
48
+ &:disabled {
49
+ + .MrlSwitchStandalone-switch,
50
+ &:hover + .MrlSwitchStandalone-switch {
51
+ background-color: rgba(var(--mrl-gray-40), 1);
52
+ }
53
+ ~ .MrlSwitchStandalone-switch-indicator {
54
+ color: rgba(var(--mrl-gray-40), 1);
55
+ }
56
+ }
57
+ &:focus-visible + .MrlSwitchStandalone-switch::after {
58
+ @include mrl-focus-pseudo-element;
59
+ }
60
+ &:checked {
61
+ + .MrlSwitchStandalone-switch {
62
+ background-color: rgba(var(--mrl-blue-70), 1);
63
+ }
64
+ ~ .MrlSwitchStandalone-switch-indicator {
65
+ $switch-knob-on-position: calc(var(--mrl-spacing-08) - var(--mrl-spacing-05));
66
+ color: rgba(var(--mrl-blue-70), 1);
67
+ transform: translateX($switch-knob-on-position);
68
+ }
69
+ &:hover + .MrlSwitchStandalone-switch {
70
+ background-color: rgba(var(--mrl-blue-80), 1);
71
+ }
72
+ &:active + .MrlSwitchStandalone-switch {
73
+ background-color: rgba(var(--mrl-blue-90), 1);
74
+ }
75
+ &:disabled + .MrlSwitchStandalone-switch,
76
+ &:disabled:hover + .MrlSwitchStandalone-switch {
77
+ background-color: rgba(var(--mrl-gray-40), 1);
78
+ }
56
79
  }
57
- }
58
- &:focus-visible + .MrlSwitchStandalone-switch::after {
59
- @include mrl-focus-pseudo-element;
60
- }
61
- }
62
- .MrlSwitchStandalone-checkbox:checked {
63
- + .MrlSwitchStandalone-switch {
64
- background-color: rgba(var(--mrl-blue-70), 1);
65
- }
66
- ~ .MrlSwitchStandalone-switch-indicator {
67
- $switch-knob-on-position: calc(var(--mrl-spacing-08) - var(--mrl-spacing-05));
68
- color: rgba(var(--mrl-blue-70), 1);
69
- transform: translateX($switch-knob-on-position);
70
- }
71
- &:hover + .MrlSwitchStandalone-switch {
72
- background-color: rgba(var(--mrl-blue-80), 1);
73
- }
74
- &:active + .MrlSwitchStandalone-switch {
75
- background-color: rgba(var(--mrl-blue-90), 1);
76
- }
77
- &:disabled + .MrlSwitchStandalone-switch,
78
- &:disabled:hover + .MrlSwitchStandalone-switch {
79
- background-color: rgba(var(--mrl-gray-40), 1);
80
80
  }
81
81
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.47.1-dev.1",
3
+ "version": "2.47.1",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
package/dist/components/menu/demo/MenuWithIconButtonTrigger.d.ts DELETED
@@ -1,19 +0,0 @@
1
- /// <reference types="react" />
2
- import { CustomMenuPosition } from '..';
3
- import { MenuPosition, ActionState, MenuAlignment } from '../constants';
4
- export interface MenuWithIconTriggerProps {
5
- position?: MenuPosition;
6
- spacing?: 'default' | 'compact';
7
- alignment?: MenuAlignment;
8
- actionState?: ActionState;
9
- onClose?: () => void;
10
- customPosition?: CustomMenuPosition;
11
- triggerAlignment?: 'left' | 'right' | 'center';
12
- }
13
- /**
14
- * Demo of a menu with a trigger for stories and testing
15
- *
16
- * @param {MenuWithTriggerProps} props - The props for the menu with trigger
17
- * @returns {Element} The menu with trigger demo
18
- */
19
- export declare const MenuWithIconTrigger: ({ alignment, position, spacing, actionState, customPosition, onClose, triggerAlignment }: MenuWithIconTriggerProps) => JSX.Element;
package/dist/components/popover/demo/PopoverWithIconButton.d.ts DELETED
@@ -1,21 +0,0 @@
1
- /// <reference types="react" />
2
- import { MenuPosition, ActionState, MenuAlignment } from '../../menu/constants';
3
- interface PopoverWithIconButtonProps {
4
- hasCloseButton?: boolean;
5
- menuAlign?: MenuPosition;
6
- spacing?: 'default' | 'compact';
7
- alignment?: MenuAlignment;
8
- actionState?: ActionState;
9
- onClose?: () => void;
10
- triggerAlignment?: 'left' | 'right' | 'center';
11
- kind?: 'inverse' | 'primary';
12
- point?: boolean;
13
- }
14
- /**
15
- * Demo of a menu with a trigger for stories and testing
16
- *
17
- * @param {PopoverWithIconButtonProps} props - The props for the menu with trigger
18
- * @returns {Element} The menu with trigger demo
19
- */
20
- export declare const PopoverWithIconButton: ({ menuAlign, alignment, actionState, onClose, triggerAlignment, spacing, kind, point, hasCloseButton }: PopoverWithIconButtonProps) => JSX.Element;
21
- export {};