@blockle/blocks-react 1.1.1 → 1.2.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 (128) hide show
  1. package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.stories.d.ts +1 -1
  2. package/dist/components/display/Divider/Divider.js +2 -2
  3. package/dist/components/display/Divider/Divider.stories.d.ts +1 -1
  4. package/dist/components/display/Divider/divider.css.js +2 -2
  5. package/dist/components/feedback/Progress/Progress.stories.d.ts +1 -1
  6. package/dist/components/feedback/Spinner/Spinner.stories.d.ts +1 -1
  7. package/dist/components/form/Button/Button.css.js +2 -2
  8. package/dist/components/form/Button/Button.js +2 -2
  9. package/dist/components/form/Button/Button.stories.d.ts +1 -1
  10. package/dist/components/form/Checkbox/Checkbox.js +1 -1
  11. package/dist/components/form/Checkbox/Checkbox.stories.d.ts +1 -1
  12. package/dist/components/form/Checkbox/checkbox.css.js +3 -3
  13. package/dist/components/form/Input/Input.js +2 -2
  14. package/dist/components/form/Input/Input.stories.d.ts +1 -1
  15. package/dist/components/form/Input/input.css.js +2 -2
  16. package/dist/components/form/Label/Label.stories.d.ts +1 -1
  17. package/dist/components/form/Radio/Radio.js +1 -1
  18. package/dist/components/form/Radio/Radio.stories.d.ts +1 -1
  19. package/dist/components/form/Radio/radio.css.js +3 -3
  20. package/dist/components/form/Select/Select.js +1 -1
  21. package/dist/components/form/Select/Select.stories.d.ts +1 -1
  22. package/dist/components/form/Select/select.css.js +4 -4
  23. package/dist/components/form/Slider/Slider.js +1 -1
  24. package/dist/components/form/Slider/Slider.stories.d.ts +1 -1
  25. package/dist/components/form/Slider/slider.css.js +6 -6
  26. package/dist/components/form/Switch/Switch.js +1 -1
  27. package/dist/components/form/Switch/Switch.stories.d.ts +1 -1
  28. package/dist/components/form/Switch/switch.css.js +3 -3
  29. package/dist/components/layout/Box/Box.stories.d.ts +1 -1
  30. package/dist/components/layout/Inline/Inline.stories.d.ts +1 -1
  31. package/dist/components/layout/Stack/Stack.stories.d.ts +1 -1
  32. package/dist/components/navigation/Link/Link.stories.d.ts +1 -1
  33. package/dist/components/overlay/Dialog/Dialog.js +5 -5
  34. package/dist/components/overlay/Dialog/Dialog.stories.d.ts +1 -1
  35. package/dist/components/overlay/Dialog/dialog.css.js +2 -2
  36. package/dist/components/overlay/Popover/Popover.js +2 -2
  37. package/dist/components/overlay/Popover/Popover.stories.d.ts +1 -1
  38. package/dist/components/overlay/Tooltip/Tooltip.d.ts +1 -1
  39. package/dist/components/overlay/Tooltip/Tooltip.stories.d.ts +1 -1
  40. package/dist/components/typography/Heading/Heading.js +1 -1
  41. package/dist/components/typography/Heading/heading.css.js +2 -2
  42. package/dist/components/typography/Heading/heading.stories.d.ts +1 -1
  43. package/dist/components/typography/Text/Text.js +1 -1
  44. package/dist/components/typography/Text/Text.stories.d.ts +1 -1
  45. package/dist/components/typography/Text/text.css.js +2 -2
  46. package/dist/index.d.ts +28 -27
  47. package/package.json +8 -14
  48. package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.cjs +0 -20
  49. package/dist/components/accessibility/VisuallyHidden/index.d.ts +0 -1
  50. package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.cjs +0 -16
  51. package/dist/components/display/Divider/Divider.cjs +0 -28
  52. package/dist/components/display/Divider/divider.css.cjs +0 -16
  53. package/dist/components/display/Divider/index.d.ts +0 -1
  54. package/dist/components/feedback/Progress/Progress.cjs +0 -55
  55. package/dist/components/feedback/Progress/index.d.ts +0 -1
  56. package/dist/components/feedback/Spinner/Spinner.cjs +0 -27
  57. package/dist/components/feedback/Spinner/index.d.ts +0 -1
  58. package/dist/components/form/Button/Button.cjs +0 -58
  59. package/dist/components/form/Button/Button.css.cjs +0 -16
  60. package/dist/components/form/Button/index.d.ts +0 -1
  61. package/dist/components/form/Checkbox/Checkbox.cjs +0 -80
  62. package/dist/components/form/Checkbox/checkbox.css.cjs +0 -32
  63. package/dist/components/form/Checkbox/index.d.ts +0 -1
  64. package/dist/components/form/Input/Input.cjs +0 -52
  65. package/dist/components/form/Input/index.d.ts +0 -1
  66. package/dist/components/form/Input/input.css.cjs +0 -21
  67. package/dist/components/form/Label/Label.cjs +0 -30
  68. package/dist/components/form/Label/index.d.ts +0 -1
  69. package/dist/components/form/Radio/Radio.cjs +0 -50
  70. package/dist/components/form/Radio/index.d.ts +0 -2
  71. package/dist/components/form/Radio/radio.css.cjs +0 -32
  72. package/dist/components/form/Select/Select.cjs +0 -73
  73. package/dist/components/form/Select/index.d.ts +0 -1
  74. package/dist/components/form/Select/select.css.cjs +0 -38
  75. package/dist/components/form/Slider/Slider.cjs +0 -139
  76. package/dist/components/form/Slider/index.d.ts +0 -1
  77. package/dist/components/form/Slider/slider.css.cjs +0 -75
  78. package/dist/components/form/Slider/usePointerProgress.cjs +0 -46
  79. package/dist/components/form/Switch/Switch.cjs +0 -73
  80. package/dist/components/form/Switch/index.d.ts +0 -1
  81. package/dist/components/form/Switch/switch.css.cjs +0 -27
  82. package/dist/components/layout/Box/Box.cjs +0 -26
  83. package/dist/components/layout/Box/index.d.ts +0 -1
  84. package/dist/components/layout/Inline/Inline.cjs +0 -30
  85. package/dist/components/layout/Inline/index.d.ts +0 -1
  86. package/dist/components/layout/Stack/Stack.cjs +0 -27
  87. package/dist/components/layout/Stack/index.d.ts +0 -1
  88. package/dist/components/navigation/Link/Link.cjs +0 -33
  89. package/dist/components/navigation/Link/index.d.ts +0 -1
  90. package/dist/components/overlay/Dialog/Dialog.cjs +0 -82
  91. package/dist/components/overlay/Dialog/dialog.css.cjs +0 -22
  92. package/dist/components/overlay/Dialog/dialogHelper.cjs +0 -21
  93. package/dist/components/overlay/Dialog/index.d.ts +0 -1
  94. package/dist/components/overlay/Popover/Popover.cjs +0 -106
  95. package/dist/components/overlay/Popover/index.d.ts +0 -1
  96. package/dist/components/overlay/Popover/popover-utils.cjs +0 -57
  97. package/dist/components/overlay/Portal/Portal.cjs +0 -15
  98. package/dist/components/overlay/Portal/index.d.ts +0 -1
  99. package/dist/components/overlay/Tooltip/Tooltip.cjs +0 -73
  100. package/dist/components/overlay/Tooltip/index.d.ts +0 -1
  101. package/dist/components/providers/BlocksProvider/BlocksProvider.cjs +0 -35
  102. package/dist/components/providers/BlocksProvider/context.cjs +0 -5
  103. package/dist/components/providers/BlocksProvider/index.d.ts +0 -2
  104. package/dist/components/typography/Heading/Heading.cjs +0 -24
  105. package/dist/components/typography/Heading/heading.css.cjs +0 -16
  106. package/dist/components/typography/Heading/index.d.ts +0 -1
  107. package/dist/components/typography/Text/Text.cjs +0 -21
  108. package/dist/components/typography/Text/index.d.ts +0 -1
  109. package/dist/components/typography/Text/text.css.cjs +0 -16
  110. package/dist/hooks/useClickOutside/useClickOutside.cjs +0 -23
  111. package/dist/hooks/useComponentStyles/index.d.ts +0 -2
  112. package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.cjs +0 -12
  113. package/dist/hooks/useComponentStyles/useComponentStyles.cjs +0 -74
  114. package/dist/hooks/useControlledValue/index.d.ts +0 -1
  115. package/dist/hooks/useControlledValue/useControlledValue.cjs +0 -33
  116. package/dist/hooks/useIsomorphicLayoutEffect/index.d.ts +0 -1
  117. package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs +0 -6
  118. package/dist/hooks/useKeyboard/index.d.ts +0 -1
  119. package/dist/hooks/useKeyboard/useKeyboard.cjs +0 -21
  120. package/dist/hooks/useLayer/index.d.ts +0 -1
  121. package/dist/hooks/usePreventBodyScroll/index.d.ts +0 -1
  122. package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs +0 -31
  123. package/dist/hooks/useRestoreFocus/index.d.ts +0 -1
  124. package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs +0 -19
  125. package/dist/hooks/useTheme/index.d.ts +0 -1
  126. package/dist/hooks/useTheme/useTheme.cjs +0 -13
  127. package/dist/hooks/useVisibilityState/index.d.ts +0 -1
  128. package/dist/index.cjs +0 -58
@@ -1,82 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- const jsxRuntime = require("react/jsx-runtime");
5
- const blocksCore = require("@blockle/blocks-core");
6
- const react = require("react");
7
- const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
8
- const dialog_css = require("./dialog.css.cjs");
9
- const dialogHelper = require("./dialogHelper.cjs");
10
- const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
11
- const useRestoreFocus = require("../../../hooks/useRestoreFocus/useRestoreFocus.cjs");
12
- const usePreventBodyScroll = require("../../../hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
13
- const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
14
- const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
15
- const Dialog = ({
16
- children,
17
- open,
18
- className,
19
- onRequestClose,
20
- size,
21
- ...restProps
22
- }) => {
23
- const dialogRef = react.useRef(null);
24
- const dialogClassName = useComponentStyles.useComponentStyles("dialog", {
25
- dialog: true,
26
- variants: { size }
27
- });
28
- const [enabled, setEnabled] = react.useState(true);
29
- const [visible, setVisible] = react.useState(open);
30
- useRestoreFocus.useRestoreFocus(open);
31
- const isNested = dialogHelper.useNestedDialog(open);
32
- usePreventBodyScroll.usePreventBodyScroll(open && !isNested);
33
- const onEscape = react.useCallback(
34
- (event) => {
35
- event.preventDefault();
36
- onRequestClose();
37
- },
38
- [onRequestClose]
39
- );
40
- useKeyboard.useKeyboard("Escape", onEscape, { enabled: open && enabled });
41
- useClickOutside.useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
42
- useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
43
- var _a;
44
- if (open && visible) {
45
- if (!dialogRef.current || !dialogRef.current.showModal) {
46
- return;
47
- }
48
- dialogRef.current.showModal();
49
- } else if (open) {
50
- setVisible(true);
51
- } else {
52
- if (!blocksCore.hasAnimationDuration(dialogRef.current)) {
53
- setVisible(false);
54
- }
55
- if ((_a = dialogRef.current) == null ? void 0 : _a.close) {
56
- dialogRef.current.close();
57
- }
58
- }
59
- }, [open, visible]);
60
- const onAnimationEnd = react.useCallback(() => {
61
- if (!open) {
62
- setVisible(false);
63
- }
64
- }, [open]);
65
- if (!visible) {
66
- return null;
67
- }
68
- const dataOpen = typeof window === "undefined" && open ? true : void 0;
69
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(dialogHelper.DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
70
- "dialog",
71
- {
72
- ref: dialogRef,
73
- open: dataOpen,
74
- className: blocksCore.classnames(dialog_css.dialog, dialogClassName, className),
75
- onAnimationEnd,
76
- onTransitionEnd: onAnimationEnd,
77
- ...restProps,
78
- children
79
- }
80
- ) }) });
81
- };
82
- exports.Dialog = Dialog;
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const fileScope = require("@vanilla-extract/css/fileScope");
4
- const blocksCore = require("@blockle/blocks-core");
5
- const css = require("@vanilla-extract/css");
6
- fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks-react");
7
- const dialog = css.style({
8
- "@layer": {
9
- [blocksCore.blocksLayer]: {
10
- position: "fixed",
11
- inset: 0,
12
- border: "none",
13
- "::backdrop": {
14
- // Remove pointer event to prevent clicks on the backdrop
15
- // and make it easier to check if the click was outside the dialog
16
- pointerEvents: "none"
17
- }
18
- }
19
- }
20
- });
21
- fileScope.endFileScope();
22
- exports.dialog = dialog;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const DialogContext = react.createContext(
5
- void 0
6
- );
7
- const useNestedDialog = (open) => {
8
- const parentDialog = react.useContext(DialogContext);
9
- react.useEffect(() => {
10
- if (!parentDialog || !open) {
11
- return;
12
- }
13
- parentDialog.setEnabled(false);
14
- return () => {
15
- parentDialog.setEnabled(true);
16
- };
17
- }, [parentDialog, open]);
18
- return !!parentDialog;
19
- };
20
- exports.DialogContext = DialogContext;
21
- exports.useNestedDialog = useNestedDialog;
@@ -1 +0,0 @@
1
- export { Dialog, type DialogProps } from './Dialog';
@@ -1,106 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- const jsxRuntime = require("react/jsx-runtime");
5
- const blocksCore = require("@blockle/blocks-core");
6
- const react = require("react");
7
- const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
8
- const popoverUtils = require("./popover-utils.cjs");
9
- const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
10
- const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
11
- const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
12
- const Box = require("../../layout/Box/Box.cjs");
13
- const Popover = ({
14
- anchorElement,
15
- children,
16
- className,
17
- onRequestClose,
18
- open,
19
- position = "top",
20
- sticky,
21
- style,
22
- ...restProps
23
- }) => {
24
- const popoverRef = react.useRef(null);
25
- const [popoverPosition, setPopoverPosition] = react.useState({ x: 0, y: 0 });
26
- const [visible, setVisible] = react.useState(open);
27
- const popoverClassName = useComponentStyles.useComponentStyles("popover", { base: true }, false);
28
- useKeyboard.useKeyboard("Escape", onRequestClose, { enabled: open });
29
- useClickOutside.useClickOutside(popoverRef, onRequestClose, { enabled: open });
30
- useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
31
- var _a;
32
- const element = popoverRef.current;
33
- if (open && visible) {
34
- if (!element || typeof element.showPopover !== "function") {
35
- console.warn(
36
- "Popover: showPopover method is not available on the element."
37
- );
38
- return;
39
- }
40
- element.showPopover();
41
- const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
42
- setPopoverPosition({ x, y });
43
- } else if (open) {
44
- setVisible(true);
45
- } else {
46
- if (!blocksCore.hasAnimationDuration(popoverRef.current)) {
47
- setVisible(false);
48
- }
49
- (_a = popoverRef.current) == null ? void 0 : _a.hidePopover();
50
- }
51
- }, [open, visible]);
52
- react.useEffect(() => {
53
- if (open) {
54
- const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
55
- setPopoverPosition({ x, y });
56
- }
57
- }, [open, anchorElement, position]);
58
- react.useEffect(() => {
59
- if (!open || !sticky) {
60
- return;
61
- }
62
- function updatePopoverPosition() {
63
- const [x, y] = popoverUtils.getPopoverPosition(position, anchorElement, popoverRef);
64
- setPopoverPosition((prev) => {
65
- if (prev.x === x && prev.y === y) {
66
- return prev;
67
- }
68
- return { x, y };
69
- });
70
- }
71
- window.addEventListener("resize", updatePopoverPosition);
72
- window.addEventListener("scroll", updatePopoverPosition);
73
- return () => {
74
- window.removeEventListener("resize", updatePopoverPosition);
75
- window.removeEventListener("scroll", updatePopoverPosition);
76
- };
77
- }, [position, anchorElement, open, sticky]);
78
- const onAnimationEnd = react.useCallback(() => {
79
- if (!open) {
80
- setVisible(false);
81
- }
82
- }, [open]);
83
- if (!visible) {
84
- return null;
85
- }
86
- return /* @__PURE__ */ jsxRuntime.jsx(
87
- Box.Box,
88
- {
89
- ref: popoverRef,
90
- "data-open": open ? "" : void 0,
91
- popover: "manual",
92
- className: blocksCore.classnames(popoverClassName, className),
93
- position: "absolute",
94
- onAnimationEnd,
95
- onTransitionEnd: onAnimationEnd,
96
- style: {
97
- ...style,
98
- left: popoverPosition.x,
99
- top: popoverPosition.y
100
- },
101
- ...restProps,
102
- children
103
- }
104
- );
105
- };
106
- exports.Popover = Popover;
@@ -1 +0,0 @@
1
- export { Popover, type PopoverProps } from './Popover';
@@ -1,57 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const blocksCore = require("@blockle/blocks-core");
4
- function getPopoverPosition(position, anchorRef, popoverRef) {
5
- if (!anchorRef.current || !popoverRef.current) {
6
- return [0, 0];
7
- }
8
- const anchorRect = anchorRef.current.getBoundingClientRect();
9
- const popoverRect = popoverRef.current.getBoundingClientRect();
10
- const popoverStyles = getComputedStyle(popoverRef.current);
11
- const [popoverWidth, popoverHeight] = blocksCore.getOriginalElementSize(
12
- popoverStyles,
13
- popoverRect.width,
14
- popoverRect.height
15
- );
16
- const marginTop = blocksCore.cssValueToNumber(
17
- popoverStyles.getPropertyValue("margin-top")
18
- );
19
- const marginRight = blocksCore.cssValueToNumber(
20
- popoverStyles.getPropertyValue("margin-right")
21
- );
22
- const marginBottom = blocksCore.cssValueToNumber(
23
- popoverStyles.getPropertyValue("margin-bottom")
24
- );
25
- const marginLeft = blocksCore.cssValueToNumber(
26
- popoverStyles.getPropertyValue("margin-left")
27
- );
28
- const marginY = marginTop + marginBottom;
29
- const marginX = marginRight + marginLeft;
30
- const docHeight = document.documentElement.clientHeight;
31
- const docWidth = document.documentElement.clientWidth;
32
- const docScrollTop = document.documentElement.scrollTop;
33
- const docScrollLeft = document.documentElement.scrollLeft;
34
- const anchorLeft = anchorRect.left + docScrollLeft;
35
- const anchorTop = anchorRect.top + docScrollTop;
36
- const topPosition = anchorRect.top - (popoverHeight + marginTop);
37
- const rightPosition = anchorRect.left + anchorRect.width + popoverWidth;
38
- const bottomPosition = anchorRect.top + anchorRect.height + popoverHeight;
39
- const leftPosition = anchorRect.left - popoverWidth;
40
- const offsetX = anchorLeft - marginLeft - (popoverWidth - anchorRect.width) / 2;
41
- const offsetY = anchorTop - marginTop - (popoverHeight - anchorRect.height) / 2;
42
- switch (position) {
43
- case "top": {
44
- return topPosition > 0 ? [offsetX, anchorTop - popoverHeight - marginY] : [offsetX, anchorTop + anchorRect.height];
45
- }
46
- case "bottom": {
47
- return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverHeight - marginY];
48
- }
49
- case "left": {
50
- return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverWidth - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
51
- }
52
- case "right": {
53
- return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverWidth - marginX, offsetY];
54
- }
55
- }
56
- }
57
- exports.getPopoverPosition = getPopoverPosition;
@@ -1,15 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- const jsxRuntime = require("react/jsx-runtime");
5
- const reactDom = require("react-dom");
6
- const useTheme = require("../../../hooks/useTheme/useTheme.cjs");
7
- const BlocksProvider = require("../../providers/BlocksProvider/BlocksProvider.cjs");
8
- const Portal = ({ children, container }) => {
9
- const context = useTheme.useTheme();
10
- return reactDom.createPortal(
11
- /* @__PURE__ */ jsxRuntime.jsx(BlocksProvider.BlocksProvider, { theme: context, children }),
12
- container || document.body
13
- );
14
- };
15
- exports.Portal = Portal;
@@ -1 +0,0 @@
1
- export { Portal, type PortalProps } from './Portal';
@@ -1,73 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- const jsxRuntime = require("react/jsx-runtime");
5
- const blocksCore = require("@blockle/blocks-core");
6
- const react = require("react");
7
- const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
8
- const Popover = require("../Popover/Popover.cjs");
9
- const Tooltip = ({
10
- position = "top",
11
- children,
12
- content,
13
- colorScheme
14
- }) => {
15
- const id = react.useId();
16
- const ref = react.useRef(null);
17
- const [open, setOpen] = react.useState(false);
18
- const tooltipClassName = useComponentStyles.useComponentStyles("tooltip", {
19
- base: true,
20
- variants: { colorScheme }
21
- });
22
- react.useEffect(() => {
23
- const element = ref.current;
24
- if (!element) {
25
- return;
26
- }
27
- function onEnter() {
28
- setOpen(true);
29
- }
30
- function onLeave() {
31
- setOpen(false);
32
- }
33
- element.addEventListener("mouseenter", onEnter);
34
- element.addEventListener("mouseleave", onLeave);
35
- element.addEventListener("focusin", onEnter);
36
- element.addEventListener("focusout", onLeave);
37
- return () => {
38
- element.removeEventListener("mouseenter", onEnter);
39
- element.removeEventListener("mouseleave", onLeave);
40
- element.removeEventListener("focusin", onEnter);
41
- element.removeEventListener("focusout", onLeave);
42
- };
43
- }, []);
44
- if (react.Children.count(children) !== 1) {
45
- throw new Error("Tooltip component can only have one child");
46
- }
47
- const child = react.Children.toArray(children)[0];
48
- if (!react.isValidElement(child)) {
49
- return null;
50
- }
51
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
52
- react.cloneElement(child, {
53
- ref: blocksCore.composeRefs(ref, child.ref),
54
- "aria-describedby": open ? id : void 0
55
- }),
56
- /* @__PURE__ */ jsxRuntime.jsx(
57
- Popover.Popover,
58
- {
59
- id,
60
- role: "tooltip",
61
- anchorElement: ref,
62
- open,
63
- onRequestClose: () => {
64
- setOpen(false);
65
- },
66
- position,
67
- className: tooltipClassName,
68
- children: content
69
- }
70
- )
71
- ] });
72
- };
73
- exports.Tooltip = Tooltip;
@@ -1 +0,0 @@
1
- export { Tooltip, type TooltipProps } from './Tooltip';
@@ -1,35 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- const jsxRuntime = require("react/jsx-runtime");
5
- const react = require("react");
6
- const blocksCore = require("@blockle/blocks-core");
7
- const blocksReactSlot = require("@blockle/blocks-react-slot");
8
- const context = require("./context.cjs");
9
- const [Template, Slot] = blocksReactSlot.createSlottable("div");
10
- const BlocksProvider = ({
11
- children,
12
- theme,
13
- className,
14
- ...restProps
15
- }) => {
16
- const contextValue = react.useMemo(
17
- () => ({
18
- theme
19
- }),
20
- [theme]
21
- );
22
- return /* @__PURE__ */ jsxRuntime.jsx(context.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
23
- Template,
24
- {
25
- className: blocksCore.classnames(
26
- theme.vars,
27
- blocksCore.atoms({ fontFamily: "primary" }),
28
- className
29
- ),
30
- ...restProps,
31
- children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
32
- }
33
- ) });
34
- };
35
- exports.BlocksProvider = BlocksProvider;
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const BlocksProviderContext = react.createContext(null);
5
- exports.BlocksProviderContext = BlocksProviderContext;
@@ -1,2 +0,0 @@
1
- export { BlocksProvider } from './BlocksProvider';
2
- export type { BlocksProviderProps } from './BlocksProvider';
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const blocksCore = require("@blockle/blocks-core");
5
- const heading_css = require("./heading.css.cjs");
6
- const Box = require("../../layout/Box/Box.cjs");
7
- const Heading = ({
8
- className,
9
- level = 1,
10
- children,
11
- ...restProps
12
- }) => {
13
- const Tag = `h${level}`;
14
- return /* @__PURE__ */ jsxRuntime.jsx(
15
- Box.Box,
16
- {
17
- asChild: true,
18
- className: blocksCore.classnames(heading_css.heading, className),
19
- ...restProps,
20
- children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
21
- }
22
- );
23
- };
24
- exports.Heading = Heading;
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const fileScope = require("@vanilla-extract/css/fileScope");
4
- const blocksCore = require("@blockle/blocks-core");
5
- const css = require("@vanilla-extract/css");
6
- fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks-react");
7
- const heading = css.style({
8
- "@layer": {
9
- [blocksCore.blocksLayer]: {
10
- margin: 0,
11
- padding: 0
12
- }
13
- }
14
- });
15
- fileScope.endFileScope();
16
- exports.heading = heading;
@@ -1 +0,0 @@
1
- export { Heading, type HeadingProps } from './Heading';
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("react/jsx-runtime");
4
- const blocksCore = require("@blockle/blocks-core");
5
- const text_css = require("./text.css.cjs");
6
- const Box = require("../../layout/Box/Box.cjs");
7
- const Text = ({
8
- asChild,
9
- children,
10
- className,
11
- ref,
12
- tag,
13
- ...restProps
14
- }) => {
15
- const Component = tag ?? "span";
16
- return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { asChild: true, className: blocksCore.classnames(text_css.text, className), ...restProps, children: asChild ? children : (
17
- // biome-ignore lint/suspicious/noExplicitAny: Safe to assert ref as React.RefObject<any>
18
- /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, children })
19
- ) });
20
- };
21
- exports.Text = Text;
@@ -1 +0,0 @@
1
- export { Text, type TextProps } from './Text';
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const fileScope = require("@vanilla-extract/css/fileScope");
4
- const blocksCore = require("@blockle/blocks-core");
5
- const css = require("@vanilla-extract/css");
6
- fileScope.setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks-react");
7
- const text = css.style({
8
- "@layer": {
9
- [blocksCore.blocksLayer]: {
10
- margin: 0,
11
- padding: 0
12
- }
13
- }
14
- });
15
- fileScope.endFileScope();
16
- exports.text = text;
@@ -1,23 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const react = require("react");
4
- const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
5
- react.useEffect(() => {
6
- if (!enabled) {
7
- return;
8
- }
9
- const listener = (event) => {
10
- if (ref.current && !ref.current.contains(event.target)) {
11
- onClickOutside();
12
- }
13
- };
14
- const rafId = requestAnimationFrame(() => {
15
- document.addEventListener("click", listener);
16
- });
17
- return () => {
18
- cancelAnimationFrame(rafId);
19
- document.removeEventListener("click", listener);
20
- };
21
- }, [ref, onClickOutside, enabled]);
22
- };
23
- exports.useClickOutside = useClickOutside;
@@ -1,2 +0,0 @@
1
- export { useComponentStyles } from './useComponentStyles';
2
- export { useComponentStyleDefaultProps } from './useComponentStyleDefaultProps';
@@ -1,12 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const useTheme = require("../useTheme/useTheme.cjs");
4
- const useComponentStyleDefaultProps = (name) => {
5
- const { components } = useTheme.useTheme();
6
- const component = components[name];
7
- if (!component) {
8
- return {};
9
- }
10
- return component.defaultVariants ?? {};
11
- };
12
- exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
@@ -1,74 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- const useTheme = require("../useTheme/useTheme.cjs");
5
- function useComponentStyles(name, props, useDefaultVariants = true) {
6
- const { components } = useTheme.useTheme();
7
- const component = components[name];
8
- if (!component) {
9
- console.warn(`Component ${name} is not defined in the theme`);
10
- return "";
11
- }
12
- const classNames = [];
13
- const variants = props.variants ?? {};
14
- const variantsWithDefaults = { ...variants };
15
- for (const key in props) {
16
- const value = props[key];
17
- if (typeof value === "boolean" && value) {
18
- classNames.push(
19
- // biome-ignore lint/suspicious/noExplicitAny: type assertion
20
- component[key]
21
- );
22
- }
23
- }
24
- if (!component.variants) {
25
- return classNames.join(" ");
26
- }
27
- const { defaultVariants } = component;
28
- if (useDefaultVariants && defaultVariants) {
29
- const keys2 = Object.keys(defaultVariants);
30
- for (const key of keys2) {
31
- if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
32
- variantsWithDefaults[key] = defaultVariants[key];
33
- }
34
- }
35
- }
36
- const keys = Object.keys(variantsWithDefaults);
37
- const componentVariants = component.variants;
38
- for (const key of keys) {
39
- const value = variantsWithDefaults[key];
40
- if (value === void 0 || componentVariants[key] === void 0) {
41
- continue;
42
- }
43
- if (typeof value === "boolean") {
44
- if (value && componentVariants[key]) {
45
- classNames.push(componentVariants[key]);
46
- }
47
- continue;
48
- }
49
- const variant = componentVariants[key][value];
50
- if (variant) {
51
- classNames.push(variant);
52
- }
53
- }
54
- const { compoundVariants } = component;
55
- if (compoundVariants) {
56
- for (const compoundVariant of compoundVariants) {
57
- const keys2 = Object.keys(
58
- compoundVariant.variants
59
- );
60
- const matches = keys2.every((key) => {
61
- const value = variantsWithDefaults[key];
62
- if (value === void 0) {
63
- return false;
64
- }
65
- return value === compoundVariant.variants[key];
66
- });
67
- if (matches) {
68
- classNames.push(compoundVariant.style);
69
- }
70
- }
71
- }
72
- return classNames.join(" ");
73
- }
74
- exports.useComponentStyles = useComponentStyles;
@@ -1 +0,0 @@
1
- export { useControlledValue } from './useControlledValue';