@react95/core 8.1.4-alpha.0 → 9.1.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 (46) hide show
  1. package/README.md +0 -21
  2. package/cjs/Alert/Alert.cjs +21 -13
  3. package/cjs/Dropdown/Dropdown.cjs +8 -1
  4. package/cjs/GlobalStyle/GlobalStyle.css.cjs +1 -0
  5. package/cjs/Modal/Modal.cjs +81 -96
  6. package/cjs/Modal/Modal.css.ts.vanilla.css +6 -4
  7. package/cjs/TaskBar/TaskBar.cjs +40 -7
  8. package/cjs/TitleBar/TitleBar.cjs +71 -7
  9. package/cjs/TitleBar/TitleBar.css.ts.vanilla.css +8 -1
  10. package/cjs/TitleBar/maximize.svg.cjs +3 -0
  11. package/cjs/TitleBar/minimize.svg.cjs +3 -0
  12. package/cjs/TitleBar/restore.svg.cjs +3 -0
  13. package/cjs/index.cjs +0 -4
  14. package/cjs/shared/events.cjs +35 -0
  15. package/cjs/themes/azureOrange.css.cjs +0 -1
  16. package/esm/Alert/Alert.mjs +21 -13
  17. package/esm/Dropdown/Dropdown.mjs +8 -1
  18. package/esm/GlobalStyle/GlobalStyle.css.mjs +1 -0
  19. package/esm/Modal/Modal.css.ts.vanilla.css +6 -4
  20. package/esm/Modal/Modal.mjs +83 -98
  21. package/esm/TaskBar/TaskBar.mjs +41 -8
  22. package/esm/TitleBar/TitleBar.css.ts.vanilla.css +8 -1
  23. package/esm/TitleBar/TitleBar.mjs +73 -9
  24. package/esm/TitleBar/maximize.svg.mjs +4 -0
  25. package/esm/TitleBar/minimize.svg.mjs +4 -0
  26. package/esm/TitleBar/restore.svg.mjs +4 -0
  27. package/esm/index.mjs +0 -4
  28. package/esm/shared/events.mjs +35 -0
  29. package/esm/themes/azureOrange.css.mjs +0 -1
  30. package/package.json +4 -8
  31. package/types/Cursor/Cursor.css.d.ts +1 -1
  32. package/types/Modal/Modal.d.ts +2259 -11
  33. package/types/TaskBar/WindowButton.d.ts +3 -3
  34. package/types/TitleBar/TitleBar.d.ts +2271 -3
  35. package/types/index.d.ts +1 -3
  36. package/types/shared/events.d.ts +19 -0
  37. package/cjs/Modal/ModalContext.cjs +0 -16
  38. package/cjs/Modal/ModalProvider.cjs +0 -56
  39. package/esm/Modal/ModalContext.mjs +0 -16
  40. package/esm/Modal/ModalProvider.mjs +0 -56
  41. package/types/Modal/ModalContext.d.ts +0 -15
  42. package/types/Modal/ModalProvider.d.ts +0 -3
  43. /package/cjs/{Modal → TitleBar}/close.svg.cjs +0 -0
  44. /package/cjs/{Modal → TitleBar}/help.svg.cjs +0 -0
  45. /package/esm/{Modal → TitleBar}/close.svg.mjs +0 -0
  46. /package/esm/{Modal → TitleBar}/help.svg.mjs +0 -0
@@ -17,27 +17,35 @@ const RenderImage = ({ option }) => {
17
17
  }
18
18
  };
19
19
  const Alert = forwardRef(
20
- ({ type = "error", message: message$1, hasSound, ...rest }, ref) => {
20
+ ({ type = "error", message: message$1, hasSound = false, dragOptions, ...rest }, ref) => {
21
21
  if (hasSound) {
22
22
  useEffect(() => {
23
23
  const audio = new Audio(sound);
24
24
  audio.play();
25
25
  }, []);
26
26
  }
27
- return /* @__PURE__ */ React.createElement(Modal, { height: "120", hasWindowButton: false, ...rest, ref }, /* @__PURE__ */ React.createElement("div", { className: dialog }, /* @__PURE__ */ React.createElement("div", { className: icon }, /* @__PURE__ */ React.createElement(RenderImage, { option: type })), /* @__PURE__ */ React.createElement("div", { className: message }, message$1)));
27
+ return /* @__PURE__ */ React.createElement(
28
+ Modal,
29
+ {
30
+ height: "120",
31
+ dragOptions: {
32
+ defaultPosition: {
33
+ x: typeof window == "undefined" ? 0 : Math.floor(window.innerWidth / 2) - 150,
34
+ y: typeof window == "undefined" ? 0 : Math.floor(window.innerHeight / 2) - 100
35
+ },
36
+ ...dragOptions
37
+ },
38
+ buttons: [{ value: "OK", onClick: () => {
39
+ } }],
40
+ hasWindowButton: false,
41
+ buttonsAlignment: "center",
42
+ ...rest,
43
+ ref
44
+ },
45
+ /* @__PURE__ */ React.createElement(Modal.Content, { className: dialog }, /* @__PURE__ */ React.createElement("div", { className: icon }, /* @__PURE__ */ React.createElement(RenderImage, { option: type })), /* @__PURE__ */ React.createElement("div", { className: message }, message$1))
46
+ );
28
47
  }
29
48
  );
30
- Alert.defaultProps = {
31
- type: "error",
32
- buttons: [{ value: "OK", onClick: () => {
33
- } }],
34
- buttonsAlignment: "center",
35
- positionOffset: {
36
- x: typeof window == "undefined" ? 0 : Math.floor(window.innerWidth / 2) - 150,
37
- y: typeof window == "undefined" ? 0 : Math.floor(window.innerHeight / 2) - 100
38
- },
39
- hasSound: false
40
- };
41
49
  export {
42
50
  Alert
43
51
  };
@@ -12,7 +12,14 @@ const defaultOptions = [
12
12
  const Dropdown = forwardRef(
13
13
  ({ options = defaultOptions, ...rest }, ref) => {
14
14
  const { style, otherProps, className } = sprinkles(rest);
15
- return /* @__PURE__ */ React.createElement(Frame, { style, className: cn(wrapper, className) }, /* @__PURE__ */ React.createElement("select", { ...otherProps, className: cn(select), ref }, options && options.map((option) => /* @__PURE__ */ React.createElement("option", { key: option, value: option }, option))));
15
+ return /* @__PURE__ */ React.createElement(
16
+ Frame,
17
+ {
18
+ style,
19
+ className: cn(wrapper, className, otherProps.className)
20
+ },
21
+ /* @__PURE__ */ React.createElement("select", { ...otherProps, className: cn(select), ref }, options && options.map((option) => /* @__PURE__ */ React.createElement("option", { key: option, value: option }, option)))
22
+ );
16
23
  }
17
24
  );
18
25
  export {
@@ -1,2 +1,3 @@
1
1
  import './GlobalStyle.css.ts.vanilla.css';
2
+ import "../themes/contract.css.ts.vanilla.css.mjs";
2
3
  /* empty css */
@@ -2,7 +2,7 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  position: fixed;
5
- padding: 2px 2px 8px;
5
+ padding: var(--r95-space-2);
6
6
  top: 50px;
7
7
  background-color: var(--r95-color-material);
8
8
  box-shadow: var(--r95-shadow-out);
@@ -12,9 +12,9 @@
12
12
  }
13
13
  .r95_1txblt62 {
14
14
  display: flex;
15
- gap: 6px;
15
+ gap: var(--r95-space-6);
16
16
  flex-direction: row;
17
- padding: 0 6px 6px 6px;
17
+ padding: var(--r95-space-6);
18
18
  }
19
19
  .r95_1txblt62 button {
20
20
  min-width: 70px;
@@ -23,7 +23,9 @@
23
23
  flex-grow: 1;
24
24
  display: flex;
25
25
  flex-direction: column;
26
- padding: 6px;
26
+ padding: var(--r95-space-6);
27
+ margin-block-start: var(--r95-space-4);
28
+ margin-inline-end: var(--r95-space-1);
27
29
  }
28
30
  .r95_1txblt64 {
29
31
  display: flex;
@@ -1,132 +1,117 @@
1
- import React, { forwardRef, useContext, useState, useEffect } from "react";
2
- import Draggable from "react-draggable";
1
+ import { nanoid } from "nanoid";
2
+ import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
3
+ import { useDraggable } from "@neodrag/react";
3
4
  import { Button } from "../Button/Button.mjs";
5
+ import { fixedForwardRef, Frame } from "../Frame/Frame.mjs";
4
6
  import { TitleBar } from "../TitleBar/TitleBar.mjs";
5
- import { ModalContext } from "./ModalContext.mjs";
6
- import { modalWrapper, menuWrapper, menuItem, content, buttonWrapper } from "./Modal.css.mjs";
7
- import { Frame } from "../Frame/Frame.mjs";
8
- import close from "./close.svg.mjs";
9
- import help from "./help.svg.mjs";
7
+ import { content, modalWrapper, menuWrapper, menuItem, buttonWrapper } from "./Modal.css.mjs";
8
+ import cn from "classnames";
9
+ import { useOnClickOutside } from "usehooks-ts";
10
+ import { modals, ModalEvents } from "../shared/events.mjs";
11
+ const ModalContent = fixedForwardRef(
12
+ (rest, ref) => /* @__PURE__ */ React.createElement(Frame, { ...rest, ref, className: cn(content, rest.className) })
13
+ );
10
14
  const ModalRenderer = ({
11
15
  hasWindowButton: hasButton = true,
12
16
  buttons = [],
13
17
  buttonsAlignment = "flex-end",
14
18
  children,
15
- onClose = () => {
16
- },
17
- onHelp,
18
- defaultPosition = { x: 0, y: 0 },
19
- positionOffset,
20
- height,
21
19
  icon,
22
20
  menu = [],
23
21
  title,
24
- width,
22
+ dragOptions,
23
+ titleBarOptions,
24
+ className,
25
25
  ...rest
26
26
  }, ref) => {
27
- const {
28
- addWindows,
29
- removeWindow,
30
- updateWindow,
31
- setActiveWindow,
32
- activeWindow
33
- } = useContext(ModalContext);
34
- const [id, setId] = useState(null);
27
+ const [id] = useState(nanoid());
35
28
  const [menuOpened, setMenuOpened] = useState("");
36
29
  const [isActive, setIsActive] = useState(false);
30
+ const draggableRef = useRef(null);
31
+ useDraggable(draggableRef, {
32
+ ...dragOptions,
33
+ handle: ".draggable"
34
+ });
35
+ const menuRef = useRef(null);
36
+ useOnClickOutside(menuRef, () => {
37
+ setMenuOpened("");
38
+ });
37
39
  useEffect(() => {
38
- if (!id) {
39
- const newId = addWindows({ icon, title, hasButton });
40
- if (newId) {
41
- setId(newId);
42
- setActiveWindow(newId);
43
- }
44
- } else {
45
- updateWindow(id, { icon, title, hasButton });
46
- }
47
- }, [id, icon, title, hasButton]);
48
- useEffect(() => {
40
+ modals.emit(ModalEvents.AddModal, {
41
+ icon,
42
+ title,
43
+ id,
44
+ hasButton
45
+ });
46
+ modals.on(ModalEvents.ModalVisibilityChanged, ({ id: activeId }) => {
47
+ setIsActive(activeId === id);
48
+ });
49
+ modals.emit(ModalEvents.ModalVisibilityChanged, { id });
49
50
  return () => {
50
- if (id) {
51
- removeWindow(id);
52
- }
51
+ modals.emit(ModalEvents.RemoveModal, { id });
53
52
  };
54
- }, [id]);
55
- useEffect(() => setIsActive(id === activeWindow), [id, activeWindow]);
53
+ }, []);
54
+ useImperativeHandle(ref, () => {
55
+ return draggableRef.current;
56
+ });
56
57
  return /* @__PURE__ */ React.createElement(
57
- Draggable,
58
+ Frame,
58
59
  {
59
- handle: ".draggable",
60
- defaultPosition,
61
- positionOffset,
62
- onMouseDown: id ? () => setActiveWindow(id) : void 0
60
+ ...rest,
61
+ className: cn(modalWrapper({ active: isActive }), className),
62
+ ref: draggableRef,
63
+ onMouseDown: () => {
64
+ modals.emit(ModalEvents.ModalVisibilityChanged, { id });
65
+ }
63
66
  },
64
67
  /* @__PURE__ */ React.createElement(
65
- Frame,
68
+ TitleBar,
66
69
  {
67
- ...rest,
68
- width,
69
- height,
70
- className: modalWrapper({ active: isActive }),
71
- ref
70
+ active: isActive,
71
+ icon,
72
+ title,
73
+ className: "draggable"
72
74
  },
73
- /* @__PURE__ */ React.createElement(
74
- TitleBar,
75
+ titleBarOptions && /* @__PURE__ */ React.createElement(TitleBar.OptionsBox, null, titleBarOptions)
76
+ ),
77
+ menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: menuWrapper, ref: menuRef }, menu.map(({ name, list }) => {
78
+ const active = menuOpened === name;
79
+ return /* @__PURE__ */ React.createElement(
80
+ "li",
75
81
  {
76
- active: isActive,
77
- icon,
78
- title,
79
- className: "draggable"
82
+ key: name,
83
+ onMouseDown: () => setMenuOpened(name),
84
+ className: menuItem({ active })
80
85
  },
81
- /* @__PURE__ */ React.createElement(TitleBar.OptionsBox, null, onHelp && /* @__PURE__ */ React.createElement(TitleBar.Option, null, /* @__PURE__ */ React.createElement("img", { src: help, alt: "help", onClick: onHelp })), /* @__PURE__ */ React.createElement(TitleBar.Option, { onClick: onClose }, /* @__PURE__ */ React.createElement("img", { src: close, alt: "close" })))
82
- ),
83
- menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: menuWrapper }, menu.map(({ name, list }) => {
84
- const active = menuOpened === name;
85
- return /* @__PURE__ */ React.createElement(
86
- "li",
87
- {
88
- key: name,
89
- onMouseDown: () => setMenuOpened(name),
90
- className: menuItem({ active })
91
- },
92
- name,
93
- active && list
94
- );
95
- })),
96
- /* @__PURE__ */ React.createElement("div", { className: content, onClick: () => setMenuOpened("") }, children),
97
- buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
98
- Frame,
86
+ name,
87
+ active && list
88
+ );
89
+ })),
90
+ children,
91
+ buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
92
+ Frame,
93
+ {
94
+ className: buttonWrapper,
95
+ justifyContent: buttonsAlignment
96
+ },
97
+ buttons.map((button) => /* @__PURE__ */ React.createElement(
98
+ Button,
99
99
  {
100
- className: buttonWrapper,
101
- justifyContent: buttonsAlignment
100
+ key: button.value,
101
+ onClick: button.onClick,
102
+ value: button.value
102
103
  },
103
- buttons.map((button) => /* @__PURE__ */ React.createElement(
104
- Button,
105
- {
106
- key: button.value,
107
- onClick: button.onClick,
108
- value: button.value
109
- },
110
- button.value
111
- ))
112
- )
104
+ button.value
105
+ ))
113
106
  )
114
107
  );
115
108
  };
116
- const Modal = forwardRef(ModalRenderer);
117
- Modal.displayName = "Modal";
118
- Modal.defaultProps = {
119
- icon: void 0,
120
- title: "Modal",
121
- children: null,
122
- defaultPosition: { x: 0, y: 0 },
123
- buttons: [],
124
- menu: [],
125
- width: void 0,
126
- height: void 0,
127
- onClose: () => {
109
+ const Modal = Object.assign(
110
+ fixedForwardRef(ModalRenderer),
111
+ {
112
+ Content: ModalContent
128
113
  }
129
- };
114
+ );
130
115
  export {
131
116
  Modal
132
117
  };
@@ -1,15 +1,46 @@
1
- import React, { forwardRef, useState, useContext } from "react";
2
- import { ModalContext } from "../Modal/ModalContext.mjs";
1
+ import React, { forwardRef, useState, useEffect } from "react";
3
2
  import { Frame } from "../Frame/Frame.mjs";
4
3
  import { Clock } from "./Clock.mjs";
5
4
  import { WindowButton } from "./WindowButton.mjs";
6
5
  import { Logo } from "@react95/icons";
7
6
  import { truncate } from "./TaskBar.css.mjs";
7
+ import { modals, ModalEvents } from "../shared/events.mjs";
8
8
  const TaskBar = forwardRef(
9
9
  ({ list }, ref) => {
10
10
  const [showList, toggleShowList] = useState(false);
11
11
  const [activeStart, toggleActiveStart] = useState(false);
12
- const { windows, activeWindow, setActiveWindow } = useContext(ModalContext);
12
+ const [modalWindows, setModalWindows] = React.useState([]);
13
+ const [activeWindow, setActiveWindow] = useState();
14
+ useEffect(() => {
15
+ const addModal = (window) => {
16
+ setModalWindows((prevModals) => [...prevModals, window]);
17
+ };
18
+ const removeModal = (data) => {
19
+ setModalWindows((prevModals) => {
20
+ const filteredModals = prevModals.filter(
21
+ (modal) => modal.id !== data.id
22
+ );
23
+ const lastModal = filteredModals.at(-1);
24
+ if (!activeWindow && lastModal) {
25
+ modals.emit(ModalEvents.ModalVisibilityChanged, {
26
+ id: lastModal == null ? void 0 : lastModal.id
27
+ });
28
+ }
29
+ return filteredModals;
30
+ });
31
+ };
32
+ const updateVisibleModal = ({ id }) => {
33
+ setActiveWindow(id);
34
+ };
35
+ modals.on(ModalEvents.AddModal, addModal);
36
+ modals.on(ModalEvents.RemoveModal, removeModal);
37
+ modals.on(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
38
+ return () => {
39
+ modals.off(ModalEvents.AddModal, addModal);
40
+ modals.off(ModalEvents.RemoveModal, removeModal);
41
+ modals.off(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
42
+ };
43
+ }, []);
13
44
  return /* @__PURE__ */ React.createElement(
14
45
  Frame,
15
46
  {
@@ -52,14 +83,16 @@ const TaskBar = forwardRef(
52
83
  },
53
84
  "Start"
54
85
  ),
55
- /* @__PURE__ */ React.createElement(Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, Object.entries(windows).map(
56
- ([windowId, { icon, title, hasButton }]) => hasButton && /* @__PURE__ */ React.createElement(
86
+ /* @__PURE__ */ React.createElement(Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, modalWindows.map(
87
+ ({ icon, title, hasButton, id }) => hasButton && /* @__PURE__ */ React.createElement(
57
88
  WindowButton,
58
89
  {
59
- key: windowId,
90
+ key: id,
60
91
  icon,
61
- active: windowId === activeWindow,
62
- onClick: () => setActiveWindow(windowId),
92
+ active: id === activeWindow,
93
+ onClick: () => {
94
+ modals.emit(ModalEvents.ModalVisibilityChanged, { id });
95
+ },
63
96
  small: false
64
97
  },
65
98
  /* @__PURE__ */ React.createElement("div", { className: truncate }, title)
@@ -49,10 +49,17 @@
49
49
  .r95_1kpzw682 svg {
50
50
  width: var(--r95-space-16);
51
51
  height: var(--r95-space-16);
52
- margin-right: var(--r95-space-4);
52
+ margin-inline-end: var(--r95-space-4);
53
+ flex-shrink: 0;
54
+ }
55
+ .r95_1kpzw681 svg {
56
+ width: var(--r95-space-14);
57
+ height: var(--r95-space-14);
58
+ margin-inline-end: unset;
53
59
  }
54
60
  .r95_1kpzw685 {
55
61
  flex-grow: 1;
62
+ flex-shrink: 0;
56
63
  line-height: 1.4em;
57
64
  margin: 0;
58
65
  font-size: 1em;
@@ -1,9 +1,36 @@
1
- import React, { forwardRef } from "react";
2
- import { Frame } from "../Frame/Frame.mjs";
3
- import { optionsBox, option, titleBarBackground, title } from "./TitleBar.css.mjs";
4
- import { button } from "../Button/Button.css.mjs";
5
1
  import cn from "classnames";
6
- const OptionsBox = forwardRef(
2
+ import React from "react";
3
+ import close from "./close.svg.mjs";
4
+ import help from "./help.svg.mjs";
5
+ import maximize from "./maximize.svg.mjs";
6
+ import minimize from "./minimize.svg.mjs";
7
+ import restore from "./restore.svg.mjs";
8
+ import { fixedForwardRef, Frame } from "../Frame/Frame.mjs";
9
+ import { button } from "../Button/Button.css.mjs";
10
+ import { optionsBox, option, titleBarBackground, title } from "./TitleBar.css.mjs";
11
+ const defaultOptions = {
12
+ help: {
13
+ alt: "help",
14
+ src: help
15
+ },
16
+ close: {
17
+ alt: "close",
18
+ src: close
19
+ },
20
+ maximize: {
21
+ alt: "maximize",
22
+ src: maximize
23
+ },
24
+ minimize: {
25
+ alt: "minimize",
26
+ src: minimize
27
+ },
28
+ restore: {
29
+ alt: "restore",
30
+ src: restore
31
+ }
32
+ };
33
+ const OptionsBox = fixedForwardRef(
7
34
  (rest, ref) => /* @__PURE__ */ React.createElement(
8
35
  Frame,
9
36
  {
@@ -13,17 +40,49 @@ const OptionsBox = forwardRef(
13
40
  }
14
41
  )
15
42
  );
16
- const Option = forwardRef(
43
+ const Option = fixedForwardRef(
17
44
  (rest, ref) => /* @__PURE__ */ React.createElement(
18
45
  Frame,
19
46
  {
47
+ as: "button",
20
48
  ...rest,
21
49
  ref,
22
- as: "button",
23
50
  className: cn(button, option, rest.className)
24
51
  }
25
52
  )
26
53
  );
54
+ const DefaultOption = fixedForwardRef(
55
+ (props, ref) => {
56
+ const { kind, ...rest } = props;
57
+ const optionType = defaultOptions[kind] || defaultOptions.help;
58
+ return /* @__PURE__ */ React.createElement(Option, { ...rest, ref }, /* @__PURE__ */ React.createElement("img", { src: optionType.src, alt: optionType.alt }));
59
+ }
60
+ );
61
+ const Help = fixedForwardRef(
62
+ (props, ref) => {
63
+ return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "help", ref });
64
+ }
65
+ );
66
+ const Close = fixedForwardRef(
67
+ (props, ref) => {
68
+ return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "close", ref });
69
+ }
70
+ );
71
+ const Maximize = fixedForwardRef(
72
+ (props, ref) => {
73
+ return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "maximize", ref });
74
+ }
75
+ );
76
+ const Minimize = fixedForwardRef(
77
+ (props, ref) => {
78
+ return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "minimize", ref });
79
+ }
80
+ );
81
+ const Restore = fixedForwardRef(
82
+ (props, ref) => {
83
+ return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "restore", ref });
84
+ }
85
+ );
27
86
  const TitleBarRenderer = ({ children, title: title$1 = "UNKNOWN.EXE", icon, active = true, ...rest }, ref) => /* @__PURE__ */ React.createElement(
28
87
  Frame,
29
88
  {
@@ -36,10 +95,15 @@ const TitleBarRenderer = ({ children, title: title$1 = "UNKNOWN.EXE", icon, acti
36
95
  children
37
96
  );
38
97
  const TitleBar = Object.assign(
39
- forwardRef(TitleBarRenderer),
98
+ fixedForwardRef(TitleBarRenderer),
40
99
  {
41
100
  Option,
42
- OptionsBox
101
+ OptionsBox,
102
+ Help,
103
+ Close,
104
+ Maximize,
105
+ Minimize,
106
+ Restore
43
107
  }
44
108
  );
45
109
  export {
@@ -0,0 +1,4 @@
1
+ const maximize = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J005IDBIMHY5aDlWMHpNOCAySDF2Nmg3VjJ6JyAvPjwvc3ZnPg==";
2
+ export {
3
+ maximize as default
4
+ };
@@ -0,0 +1,4 @@
1
+ const minimize = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiPjxnIGNsYXNzPSJsYXllciI+PHBhdGggZD0iTTAgNi45NWg5djIuMDRIMFY2Ljk1eiIvPjwvZz48L3N2Zz4=";
2
+ export {
3
+ minimize as default
4
+ };
@@ -0,0 +1,4 @@
1
+ const restore = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOCcgaGVpZ2h0PSc5JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTIgMGg2djJIMnpNNyAyaDF2NEg3ek0yIDJoMXYxSDJ6TTYgNWgxdjFINnpNMCAzaDZ2Mkgwek01IDVoMXY0SDV6TTAgNWgxdjRIMHpNMSA4aDR2MUgxeicvPjwvc3ZnPg==";
2
+ export {
3
+ restore as default
4
+ };
package/esm/index.mjs CHANGED
@@ -1,6 +1,4 @@
1
1
  import { Modal } from "./Modal/Modal.mjs";
2
- import { ModalContext } from "./Modal/ModalContext.mjs";
3
- import { ModalProvider } from "./Modal/ModalProvider.mjs";
4
2
  import { Tabs } from "./Tabs/Tabs.mjs";
5
3
  import { Tab } from "./Tabs/Tab.mjs";
6
4
  import { Alert } from "./Alert/Alert.mjs";
@@ -34,8 +32,6 @@ export {
34
32
  Input,
35
33
  List,
36
34
  Modal,
37
- ModalContext,
38
- ModalProvider,
39
35
  ProgressBar,
40
36
  RadioButton,
41
37
  Range,
@@ -0,0 +1,35 @@
1
+ class Emitter {
2
+ constructor() {
3
+ this.listeners = {};
4
+ }
5
+ on(eventName, callback) {
6
+ if (!this.listeners[eventName]) {
7
+ this.listeners[eventName] = [];
8
+ }
9
+ this.listeners[eventName].push(callback);
10
+ }
11
+ off(eventName, callback) {
12
+ if (this.listeners[eventName]) {
13
+ this.listeners[eventName] = this.listeners[eventName].filter(
14
+ (cb) => cb !== callback
15
+ );
16
+ }
17
+ }
18
+ emit(eventName, data) {
19
+ if (this.listeners[eventName]) {
20
+ this.listeners[eventName].forEach((callback) => callback(data));
21
+ }
22
+ }
23
+ }
24
+ var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
25
+ ModalEvents2["AddModal"] = "add-modal";
26
+ ModalEvents2["RemoveModal"] = "remove-modal";
27
+ ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
28
+ return ModalEvents2;
29
+ })(ModalEvents || {});
30
+ const modals = new Emitter();
31
+ export {
32
+ Emitter,
33
+ ModalEvents,
34
+ modals
35
+ };
@@ -1,3 +1,2 @@
1
1
  import './azureOrange.css.ts.vanilla.css';
2
- import "./contract.css.ts.vanilla.css.mjs";
3
2
  /* empty css */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react95/core",
3
- "version": "8.1.4-alpha.0",
3
+ "version": "9.1.0",
4
4
  "description": "Windows 95 styleguide",
5
5
  "main": "cjs/index.cjs",
6
6
  "type": "module",
@@ -84,11 +84,6 @@
84
84
  "import": "./esm/Modal/Modal.mjs",
85
85
  "require": "./cjs/Modal/Modal.cjs"
86
86
  },
87
- "./ModalProvider": {
88
- "types": "./types/Modal/ModalProvider.d.ts",
89
- "import": "./esm/Modal/ModalProvider.mjs",
90
- "require": "./cjs/Modal/ModalProvider.cjs"
91
- },
92
87
  "./ProgressBar": {
93
88
  "types": "./types/ProgressBar/ProgressBar.d.ts",
94
89
  "import": "./esm/ProgressBar/ProgressBar.mjs",
@@ -153,13 +148,14 @@
153
148
  "author": "ggdaltoso <ggdaltoso@gmail.com>",
154
149
  "license": "MIT",
155
150
  "dependencies": {
151
+ "@neodrag/react": "^2.0.4",
156
152
  "@react95/icons": "^2.1.1",
157
153
  "@vanilla-extract/dynamic": "^2.1.0",
158
154
  "@vanilla-extract/recipes": "^0.5.1",
159
155
  "classnames": "^2.5.1",
160
156
  "nanoid": "^3.3.1",
161
157
  "rainbow-sprinkles": "^0.17.1",
162
- "react-draggable": "^4.4.4"
158
+ "usehooks-ts": "^3.1.0"
163
159
  },
164
160
  "peerDependencies": {
165
161
  "react": ">= 16.8.0",
@@ -184,7 +180,7 @@
184
180
  "url": "https://github.com/React95/React95/issues"
185
181
  },
186
182
  "homepage": "https://github.com/React95/React95#readme",
187
- "gitHead": "f2e4e605e3b511df9cc892775fa68121c8ec0c92",
183
+ "gitHead": "f0836d6ccf2168ea0a42d8a63815518b4a17b5c5",
188
184
  "module": "esm/index.mjs",
189
185
  "private": false,
190
186
  "types": "types/index.d.ts"
@@ -1 +1 @@
1
- export declare const Cursor: Record<"Auto" | "Text" | "VerticalText" | "Help" | "Crosshair" | "Pointer" | "Progress" | "Wait" | "Alias" | "Copy" | "Move" | "None" | "NoDrop" | "NotAllowed" | "Grab" | "Grabbing" | "ColResize" | "RowResize" | "NResize" | "EResize" | "SResize" | "WResize" | "NsResize" | "EwResize" | "NeResize" | "NwResize" | "SeResize" | "SwResize" | "NeswResize" | "NwseResize" | "ZoomIn" | "ZoomOut", string>;
1
+ export declare const Cursor: Record<"Help" | "Auto" | "Text" | "VerticalText" | "Crosshair" | "Pointer" | "Progress" | "Wait" | "Alias" | "Copy" | "Move" | "None" | "NoDrop" | "NotAllowed" | "Grab" | "Grabbing" | "ColResize" | "RowResize" | "NResize" | "EResize" | "SResize" | "WResize" | "NsResize" | "EwResize" | "NeResize" | "NwResize" | "SeResize" | "SwResize" | "NeswResize" | "NwseResize" | "ZoomIn" | "ZoomOut", string>;