@once-ui-system/core 1.4.32 → 1.5.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.
- package/.eslintrc.json +3 -3
- package/{LICENSE → LICENSE.md} +1 -1
- package/dist/components/Animation.d.ts +34 -0
- package/dist/components/Animation.d.ts.map +1 -0
- package/dist/components/Animation.js +230 -0
- package/dist/components/Animation.js.map +1 -0
- package/dist/components/ArrowNavigationContext.d.ts.map +1 -1
- package/dist/components/ArrowNavigationContext.js +2 -1
- package/dist/components/ArrowNavigationContext.js.map +1 -1
- package/dist/components/AutoScroll.module.scss +8 -8
- package/dist/components/Background.d.ts.map +1 -1
- package/dist/components/Background.js +23 -15
- package/dist/components/Background.js.map +1 -1
- package/dist/components/Button.d.ts +1 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +2 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Card.d.ts.map +1 -1
- package/dist/components/Card.js +2 -4
- package/dist/components/Card.js.map +1 -1
- package/dist/components/Card.module.scss +4 -2
- package/dist/components/Carousel.module.scss +31 -31
- package/dist/components/ClientFlex.d.ts.map +1 -1
- package/dist/components/ClientFlex.js +8 -58
- package/dist/components/ClientFlex.js.map +1 -1
- package/dist/components/ClientGrid.d.ts.map +1 -1
- package/dist/components/ClientGrid.js +8 -58
- package/dist/components/ClientGrid.js.map +1 -1
- package/dist/components/ColorInput.d.ts.map +1 -1
- package/dist/components/ColorInput.js +5 -19
- package/dist/components/ColorInput.js.map +1 -1
- package/dist/components/CompareImage.d.ts.map +1 -1
- package/dist/components/CompareImage.js +1 -1
- package/dist/components/CompareImage.js.map +1 -1
- package/dist/components/Dialog.module.scss +32 -32
- package/dist/components/DropdownWrapper.d.ts.map +1 -1
- package/dist/components/DropdownWrapper.js +144 -30
- package/dist/components/DropdownWrapper.js.map +1 -1
- package/dist/components/EmojiPicker.d.ts.map +1 -1
- package/dist/components/EmojiPicker.js +14 -12
- package/dist/components/EmojiPicker.js.map +1 -1
- package/dist/components/EmojiPicker.module.scss +14 -0
- package/dist/components/EmojiPickerDropdown.d.ts.map +1 -1
- package/dist/components/EmojiPickerDropdown.js +1 -1
- package/dist/components/EmojiPickerDropdown.js.map +1 -1
- package/dist/components/Flex.d.ts.map +1 -1
- package/dist/components/Flex.js +1 -80
- package/dist/components/Flex.js.map +1 -1
- package/dist/components/Grid.d.ts.map +1 -1
- package/dist/components/Grid.js +1 -80
- package/dist/components/Grid.js.map +1 -1
- package/dist/components/Hover.d.ts +14 -0
- package/dist/components/Hover.d.ts.map +1 -0
- package/dist/components/Hover.js +99 -0
- package/dist/components/Hover.js.map +1 -0
- package/dist/components/Hover.module.scss +12 -0
- package/dist/components/HoverCard.d.ts +5 -0
- package/dist/components/HoverCard.d.ts.map +1 -0
- package/dist/components/HoverCard.js +10 -0
- package/dist/components/HoverCard.js.map +1 -0
- package/dist/components/HoverCard.module.scss +12 -0
- package/dist/components/Icon.d.ts.map +1 -1
- package/dist/components/Icon.js +8 -19
- package/dist/components/Icon.js.map +1 -1
- package/dist/components/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton.js +9 -20
- package/dist/components/IconButton.js.map +1 -1
- package/dist/components/IconButton.module.scss +0 -24
- package/dist/components/Input.d.ts +1 -0
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +6 -2
- package/dist/components/Input.js.map +1 -1
- package/dist/components/MatrixFx.d.ts +15 -0
- package/dist/components/MatrixFx.d.ts.map +1 -0
- package/dist/components/MatrixFx.js +307 -0
- package/dist/components/MatrixFx.js.map +1 -0
- package/dist/components/Option.d.ts.map +1 -1
- package/dist/components/Option.js +38 -7
- package/dist/components/Option.js.map +1 -1
- package/dist/components/Option.module.scss +13 -10
- package/dist/components/Particle.d.ts +2 -1
- package/dist/components/Particle.d.ts.map +1 -1
- package/dist/components/Particle.js +27 -6
- package/dist/components/Particle.js.map +1 -1
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/components/Select.js +41 -31
- package/dist/components/Select.js.map +1 -1
- package/dist/components/ServerFlex.d.ts +1 -0
- package/dist/components/ServerFlex.d.ts.map +1 -1
- package/dist/components/ServerFlex.js +37 -22
- package/dist/components/ServerFlex.js.map +1 -1
- package/dist/components/ServerGrid.d.ts +1 -0
- package/dist/components/ServerGrid.d.ts.map +1 -1
- package/dist/components/ServerGrid.js +7 -2
- package/dist/components/ServerGrid.js.map +1 -1
- package/dist/components/SharedInteractiveStyles.module.scss +1 -1
- package/dist/components/ShineFx.d.ts +11 -0
- package/dist/components/ShineFx.d.ts.map +1 -0
- package/dist/components/ShineFx.js +15 -0
- package/dist/components/ShineFx.js.map +1 -0
- package/dist/components/ShineFx.module.scss +33 -0
- package/dist/components/Swiper.d.ts +17 -0
- package/dist/components/Swiper.d.ts.map +1 -0
- package/dist/components/Swiper.js +170 -0
- package/dist/components/Swiper.js.map +1 -0
- package/dist/components/Swiper.module.scss +31 -0
- package/dist/components/Switch.module.scss +1 -1
- package/dist/components/Textarea.d.ts +1 -0
- package/dist/components/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea.js +6 -2
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/TiltFx.d.ts +1 -0
- package/dist/components/TiltFx.d.ts.map +1 -1
- package/dist/components/TiltFx.js +5 -4
- package/dist/components/TiltFx.js.map +1 -1
- package/dist/components/Timeline.d.ts +18 -0
- package/dist/components/Timeline.d.ts.map +1 -0
- package/dist/components/Timeline.js +28 -0
- package/dist/components/Timeline.js.map +1 -0
- package/dist/components/Tooltip.d.ts +2 -2
- package/dist/components/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip.js +4 -3
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/Tooltip.module.scss +14 -0
- package/dist/components/TypeFx.d.ts +15 -0
- package/dist/components/TypeFx.d.ts.map +1 -0
- package/dist/components/TypeFx.js +105 -0
- package/dist/components/TypeFx.js.map +1 -0
- package/dist/components/UserMenu.d.ts.map +1 -1
- package/dist/components/UserMenu.js +3 -3
- package/dist/components/UserMenu.js.map +1 -1
- package/dist/components/index.d.ts +8 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +8 -0
- package/dist/components/index.js.map +1 -1
- package/dist/contexts/LayoutProvider.d.ts +1 -0
- package/dist/contexts/LayoutProvider.d.ts.map +1 -1
- package/dist/contexts/LayoutProvider.js +30 -4
- package/dist/contexts/LayoutProvider.js.map +1 -1
- package/dist/css/styles.css +1 -1
- package/dist/css/styles.css.map +1 -1
- package/dist/css/tokens.css +1 -1
- package/dist/css/tokens.css.map +1 -1
- package/dist/data/emoji-data.json +0 -8
- package/dist/hooks/useResponsiveClasses.d.ts +9 -0
- package/dist/hooks/useResponsiveClasses.d.ts.map +1 -0
- package/dist/hooks/useResponsiveClasses.js +250 -0
- package/dist/hooks/useResponsiveClasses.js.map +1 -0
- package/dist/icons.d.ts.map +1 -1
- package/dist/icons.js +3 -1
- package/dist/icons.js.map +1 -1
- package/dist/interfaces.d.ts +1 -0
- package/dist/interfaces.d.ts.map +1 -1
- package/dist/modules/code/CodeBlock.d.ts.map +1 -1
- package/dist/modules/code/CodeBlock.js +17 -7
- package/dist/modules/code/CodeBlock.js.map +1 -1
- package/dist/modules/code/LineNumber.css +34 -34
- package/dist/modules/navigation/HeadingLink.d.ts +2 -2
- package/dist/modules/navigation/HeadingLink.d.ts.map +1 -1
- package/dist/modules/navigation/HeadingLink.js +3 -3
- package/dist/modules/navigation/HeadingLink.js.map +1 -1
- package/dist/modules/navigation/HeadingLink.module.scss +5 -14
- package/dist/modules/navigation/HeadingNav.d.ts +1 -0
- package/dist/modules/navigation/HeadingNav.d.ts.map +1 -1
- package/dist/modules/navigation/HeadingNav.js +32 -30
- package/dist/modules/navigation/HeadingNav.js.map +1 -1
- package/dist/modules/navigation/Kbar.d.ts.map +1 -1
- package/dist/modules/navigation/Kbar.js +40 -99
- package/dist/modules/navigation/Kbar.js.map +1 -1
- package/dist/modules/navigation/MegaMenu.d.ts +1 -0
- package/dist/modules/navigation/MegaMenu.d.ts.map +1 -1
- package/dist/modules/navigation/MegaMenu.js +121 -44
- package/dist/modules/navigation/MegaMenu.js.map +1 -1
- package/dist/package.json +10 -1
- package/dist/styles/border.scss +36 -0
- package/dist/styles/breakpoints.scss +7 -0
- package/dist/styles/display.scss +64 -0
- package/dist/styles/flex.scss +87 -0
- package/dist/styles/global.scss +3 -24
- package/dist/styles/grid.scss +58 -0
- package/dist/styles/position.scss +310 -0
- package/dist/styles/typography.scss +36 -10
- package/dist/tokens/border.scss +28 -4
- package/dist/tokens/theme.scss +2 -0
- package/dist/tokens/typography.scss +5 -1
- package/package.json +10 -1
- package/README.md +0 -159
- package/USAGE.md +0 -55
- package/dist/README.md +0 -159
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../src/components/Flex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AASnC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../src/components/Flex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AASnC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB1C,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,6CAA6C;IAC7C,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,qCAAqC;QACrC,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM;YAAE,OAAO,IAAI,CAAC;QAEtD,uCAAuC;QACvC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAAE,OAAO,IAAI,CAAC;QAEzC,qCAAqC;QACrC,IACE,KAAK;YACL,OAAO,KAAK,KAAK,QAAQ;YACzB,MAAM,CAAC,IAAI,CAAC,KAA4B,CAAC,CAAC,MAAM,GAAG,CAAC;YAEpD,OAAO,IAAI,CAAC;QAEd,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,kEAAkE;IAClE,IAAI,eAAe,EAAE,EAAE,CAAC;QACtB,OAAO,CACL,KAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,KACN,KAAK,GACT,CACH,CAAC;IACJ,CAAC;IAED,0CAA0C;IAC1C,yDAAyD;IACzD,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AACzE,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACb,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACb,MAAM,eAAe,CAAC;AAIvB,UAAU,cACR,SAAQ,SAAS,EACf,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,CAAC,CAAC,EAAE,GAAG,CAAC;IACR,CAAC,CAAC,EAAE,GAAG,CAAC;IACR,CAAC,CAAC,EAAE,GAAG,CAAC;IACR,EAAE,CAAC,EAAE,GAAG,CAAC;CACV;AAED,QAAA,MAAM,IAAI,2GA2CT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
package/dist/components/Grid.js
CHANGED
|
@@ -1,84 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import { useLayout } from "../contexts";
|
|
4
3
|
import { ClientGrid } from "./ClientGrid";
|
|
5
4
|
import { ServerGrid } from "./ServerGrid";
|
|
6
5
|
const Grid = forwardRef(({ cursor, xl, l, m, s, xs, style, hide, ...props }, ref) => {
|
|
7
|
-
// Check if component should be hidden based on layout context
|
|
8
|
-
const shouldHide = () => {
|
|
9
|
-
if (!hide && !xl?.hide && !l?.hide && !m?.hide && !s?.hide && !xs?.hide)
|
|
10
|
-
return false;
|
|
11
|
-
try {
|
|
12
|
-
const { isBreakpoint } = useLayout();
|
|
13
|
-
// Get the current breakpoint from the layout context
|
|
14
|
-
const currentBreakpoint = isBreakpoint("xs")
|
|
15
|
-
? "xs"
|
|
16
|
-
: isBreakpoint("s")
|
|
17
|
-
? "s"
|
|
18
|
-
: isBreakpoint("m")
|
|
19
|
-
? "m"
|
|
20
|
-
: isBreakpoint("l")
|
|
21
|
-
? "l"
|
|
22
|
-
: "xl";
|
|
23
|
-
// Max-width CSS-like behavior: check from largest to smallest breakpoint
|
|
24
|
-
// Only apply hiding when hide is explicitly true
|
|
25
|
-
// Check xl breakpoint
|
|
26
|
-
if (currentBreakpoint === "xl") {
|
|
27
|
-
// For xl, we only apply the default hide prop
|
|
28
|
-
return hide === true;
|
|
29
|
-
}
|
|
30
|
-
// Check large breakpoint
|
|
31
|
-
if (currentBreakpoint === "l") {
|
|
32
|
-
// If l.hide is explicitly set, use that value
|
|
33
|
-
if (l?.hide !== undefined)
|
|
34
|
-
return l.hide === true;
|
|
35
|
-
// Otherwise fall back to default hide prop
|
|
36
|
-
return hide === true;
|
|
37
|
-
}
|
|
38
|
-
// Check medium breakpoint
|
|
39
|
-
if (currentBreakpoint === "m") {
|
|
40
|
-
// If m.hide is explicitly set, use that value
|
|
41
|
-
if (m?.hide !== undefined)
|
|
42
|
-
return m.hide === true;
|
|
43
|
-
// Otherwise check if l.hide is set (cascading down)
|
|
44
|
-
if (l?.hide !== undefined)
|
|
45
|
-
return l.hide === true;
|
|
46
|
-
// Finally fall back to default hide prop
|
|
47
|
-
return hide === true;
|
|
48
|
-
}
|
|
49
|
-
// Check small breakpoint
|
|
50
|
-
if (currentBreakpoint === "s") {
|
|
51
|
-
// If s.hide is explicitly set, use that value
|
|
52
|
-
if (s?.hide !== undefined)
|
|
53
|
-
return s.hide === true;
|
|
54
|
-
// Otherwise check if m.hide is set (cascading down)
|
|
55
|
-
if (m?.hide !== undefined)
|
|
56
|
-
return m.hide === true;
|
|
57
|
-
// Otherwise check if l.hide is set (cascading down)
|
|
58
|
-
if (l?.hide !== undefined)
|
|
59
|
-
return l.hide === true;
|
|
60
|
-
// Finally fall back to default hide prop
|
|
61
|
-
return hide === true;
|
|
62
|
-
}
|
|
63
|
-
// Check xs breakpoint
|
|
64
|
-
if (currentBreakpoint === "xs") {
|
|
65
|
-
// For xs, we cascade down from all larger breakpoints
|
|
66
|
-
if (s?.hide !== undefined)
|
|
67
|
-
return s.hide === true;
|
|
68
|
-
if (m?.hide !== undefined)
|
|
69
|
-
return m.hide === true;
|
|
70
|
-
if (l?.hide !== undefined)
|
|
71
|
-
return l.hide === true;
|
|
72
|
-
return hide === true;
|
|
73
|
-
}
|
|
74
|
-
// Default fallback
|
|
75
|
-
return hide === true;
|
|
76
|
-
}
|
|
77
|
-
catch {
|
|
78
|
-
// If LayoutProvider is not available, fall back to CSS classes
|
|
79
|
-
return false;
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
6
|
// Check if we need client-side functionality
|
|
83
7
|
const needsClientSide = () => {
|
|
84
8
|
// Custom cursor requires client-side
|
|
@@ -94,15 +18,12 @@ const Grid = forwardRef(({ cursor, xl, l, m, s, xs, style, hide, ...props }, ref
|
|
|
94
18
|
return true;
|
|
95
19
|
return false;
|
|
96
20
|
};
|
|
97
|
-
// If component should be hidden, don't render it
|
|
98
|
-
if (shouldHide()) {
|
|
99
|
-
return null;
|
|
100
|
-
}
|
|
101
21
|
// Use client component if any client-side functionality is needed
|
|
102
22
|
if (needsClientSide()) {
|
|
103
23
|
return (_jsx(ClientGrid, { ref: ref, cursor: cursor, xl: xl, l: l, m: m, s: s, xs: xs, style: style, hide: hide, ...props }));
|
|
104
24
|
}
|
|
105
25
|
// Use server component for static content
|
|
26
|
+
// The hide prop is handled via CSS classes in ServerGrid
|
|
106
27
|
return _jsx(ServerGrid, { ref: ref, cursor: cursor, hide: hide, ...props });
|
|
107
28
|
});
|
|
108
29
|
Grid.displayName = "Grid";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AASnC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AASnC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB1C,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,6CAA6C;IAC7C,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,qCAAqC;QACrC,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM;YAAE,OAAO,IAAI,CAAC;QAEtD,uCAAuC;QACvC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAAE,OAAO,IAAI,CAAC;QAEzC,qCAAqC;QACrC,IACE,KAAK;YACL,OAAO,KAAK,KAAK,QAAQ;YACzB,MAAM,CAAC,IAAI,CAAC,KAA4B,CAAC,CAAC,MAAM,GAAG,CAAC;YAEpD,OAAO,IAAI,CAAC;QAEd,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,kEAAkE;IAClE,IAAI,eAAe,EAAE,EAAE,CAAC;QACtB,OAAO,CACL,KAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,KACN,KAAK,GACT,CACH,CAAC;IACJ,CAAC;IAED,0CAA0C;IAC1C,yDAAyD;IACzD,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;AACzE,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import { Flex } from ".";
|
|
3
|
+
export interface HoverProps extends React.ComponentProps<typeof Flex> {
|
|
4
|
+
trigger: ReactNode;
|
|
5
|
+
overlay: ReactNode;
|
|
6
|
+
interactive?: boolean;
|
|
7
|
+
delay?: number;
|
|
8
|
+
hideDelay?: number;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
touch?: "disable" | "enable" | "display";
|
|
11
|
+
}
|
|
12
|
+
declare const Hover: React.ForwardRefExoticComponent<Omit<HoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export { Hover };
|
|
14
|
+
//# sourceMappingURL=Hover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Hover.d.ts","sourceRoot":"","sources":["../../src/components/Hover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAO,MAAM,GAAG,CAAC;AAG9B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC1C;AAED,QAAA,MAAM,KAAK,gGA2IV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useRef, useEffect, forwardRef, useImperativeHandle, useCallback, } from "react";
|
|
4
|
+
import { Row } from ".";
|
|
5
|
+
import styles from "./Hover.module.scss";
|
|
6
|
+
const Hover = forwardRef(({ trigger, overlay, interactive = false, delay = 0, hideDelay = 0, disabled = false, touch = "disable", ...flex }, ref) => {
|
|
7
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
8
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
9
|
+
const [mounted, setMounted] = useState(false);
|
|
10
|
+
const [isTouchDevice, setIsTouchDevice] = useState(false);
|
|
11
|
+
const wrapperRef = useRef(null);
|
|
12
|
+
const showTimeoutRef = useRef(null);
|
|
13
|
+
const hideTimeoutRef = useRef(null);
|
|
14
|
+
useImperativeHandle(ref, () => wrapperRef.current);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
setMounted(true);
|
|
17
|
+
setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
|
|
18
|
+
}, []);
|
|
19
|
+
const showOverlay = useCallback(() => {
|
|
20
|
+
if (disabled)
|
|
21
|
+
return;
|
|
22
|
+
// Clear any pending hide timeout
|
|
23
|
+
if (hideTimeoutRef.current) {
|
|
24
|
+
clearTimeout(hideTimeoutRef.current);
|
|
25
|
+
hideTimeoutRef.current = null;
|
|
26
|
+
}
|
|
27
|
+
if (delay > 0) {
|
|
28
|
+
showTimeoutRef.current = setTimeout(() => {
|
|
29
|
+
setIsHovered(true);
|
|
30
|
+
}, delay);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
setIsHovered(true);
|
|
34
|
+
}
|
|
35
|
+
}, [delay, disabled]);
|
|
36
|
+
const hideOverlay = useCallback(() => {
|
|
37
|
+
// Clear any pending show timeout
|
|
38
|
+
if (showTimeoutRef.current) {
|
|
39
|
+
clearTimeout(showTimeoutRef.current);
|
|
40
|
+
showTimeoutRef.current = null;
|
|
41
|
+
}
|
|
42
|
+
if (hideDelay > 0) {
|
|
43
|
+
hideTimeoutRef.current = setTimeout(() => {
|
|
44
|
+
setIsHovered(false);
|
|
45
|
+
}, hideDelay);
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
setIsHovered(false);
|
|
49
|
+
}
|
|
50
|
+
}, [hideDelay]);
|
|
51
|
+
const handleMouseEnter = useCallback(() => {
|
|
52
|
+
showOverlay();
|
|
53
|
+
}, [showOverlay]);
|
|
54
|
+
const handleMouseLeave = useCallback(() => {
|
|
55
|
+
hideOverlay();
|
|
56
|
+
}, [hideOverlay]);
|
|
57
|
+
const handleFocus = useCallback(() => {
|
|
58
|
+
setIsFocused(true);
|
|
59
|
+
showOverlay();
|
|
60
|
+
}, [showOverlay]);
|
|
61
|
+
const handleBlur = useCallback(() => {
|
|
62
|
+
setIsFocused(false);
|
|
63
|
+
hideOverlay();
|
|
64
|
+
}, [hideOverlay]);
|
|
65
|
+
// Cleanup timeouts on unmount
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
return () => {
|
|
68
|
+
if (showTimeoutRef.current) {
|
|
69
|
+
clearTimeout(showTimeoutRef.current);
|
|
70
|
+
}
|
|
71
|
+
if (hideTimeoutRef.current) {
|
|
72
|
+
clearTimeout(hideTimeoutRef.current);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
}, []);
|
|
76
|
+
// Determine if overlay should show based on touch mode
|
|
77
|
+
const shouldShowOverlay = (() => {
|
|
78
|
+
if (!mounted || disabled)
|
|
79
|
+
return false;
|
|
80
|
+
// If on touch device, handle based on touch prop
|
|
81
|
+
if (isTouchDevice) {
|
|
82
|
+
if (touch === 'disable')
|
|
83
|
+
return false;
|
|
84
|
+
if (touch === 'display')
|
|
85
|
+
return true;
|
|
86
|
+
// touch === 'enable', fall through to normal hover logic
|
|
87
|
+
}
|
|
88
|
+
return isHovered || isFocused;
|
|
89
|
+
})();
|
|
90
|
+
return (_jsxs(Row, { ref: wrapperRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...flex, children: [trigger, shouldShowOverlay && (_jsx(Row, { position: "absolute", pointerEvents: interactive ? "auto" : "none", fill: true, style: {
|
|
91
|
+
top: 0,
|
|
92
|
+
left: 0,
|
|
93
|
+
right: 0,
|
|
94
|
+
bottom: 0,
|
|
95
|
+
}, className: styles.fadeIn, children: overlay }))] }));
|
|
96
|
+
});
|
|
97
|
+
Hover.displayName = "Hover";
|
|
98
|
+
export { Hover };
|
|
99
|
+
//# sourceMappingURL=Hover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Hover.js","sourceRoot":"","sources":["../../src/components/Hover.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { AnimationProps } from ".";
|
|
2
|
+
type HoverCardProps = Omit<AnimationProps, 'triggerType' | 'portal'>;
|
|
3
|
+
declare const HoverCard: import("react").ForwardRefExoticComponent<Omit<HoverCardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
export { HoverCard };
|
|
5
|
+
//# sourceMappingURL=HoverCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/components/HoverCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,cAAc,EAAE,MAAM,GAAG,CAAC;AAE9C,KAAK,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,GAAG,QAAQ,CAAC,CAAC;AAErE,QAAA,MAAM,SAAS,wHAkBd,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { Animation } from ".";
|
|
5
|
+
const HoverCard = forwardRef(({ children, ...props }, ref) => {
|
|
6
|
+
return (_jsx(Animation, { ref: ref, fade: 0, slideUp: 0.5, scale: 0.9, duration: 200, triggerType: "hover", placement: "top", portal: true, ...props, children: children }));
|
|
7
|
+
});
|
|
8
|
+
HoverCard.displayName = "HoverCard";
|
|
9
|
+
export { HoverCard };
|
|
10
|
+
//# sourceMappingURL=HoverCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HoverCard.js","sourceRoot":"","sources":["../../src/components/HoverCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,SAAS,EAAkB,MAAM,GAAG,CAAC;AAI9C,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,GAAG,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,GAAG,EACb,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,KAAK,EACf,MAAM,WACF,KAAK,YAER,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAsB,MAAM,GAAG,CAAC;AAG7C,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC3D,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,GAAG,WAAW,IAAI,WAAW,EAAE,CAAC;IAC/C,OAAO,CAAC,EAAE,GAAG,WAAW,IAAI,WAAW,EAAE,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,IAAI,+FAqET,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
package/dist/components/Icon.js
CHANGED
|
@@ -1,26 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import { forwardRef
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
4
|
import classNames from "classnames";
|
|
5
5
|
import { useIcons } from "../contexts/IconProvider";
|
|
6
|
-
import { Flex, Tooltip } from ".";
|
|
6
|
+
import { Flex, Tooltip, HoverCard } from ".";
|
|
7
7
|
import styles from "./Icon.module.scss";
|
|
8
|
-
import iconStyles from "./IconButton.module.scss";
|
|
9
8
|
const Icon = forwardRef(({ name, onBackground, onSolid, size = "m", decorative = true, tooltip, tooltipPosition = "top", className, style, ...rest }, ref) => {
|
|
10
|
-
const [isTooltipVisible, setTooltipVisible] = useState(false);
|
|
11
|
-
const [isHover, setIsHover] = useState(false);
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
let timer;
|
|
14
|
-
if (isHover) {
|
|
15
|
-
timer = setTimeout(() => {
|
|
16
|
-
setTooltipVisible(true);
|
|
17
|
-
}, 400);
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
setTooltipVisible(false);
|
|
21
|
-
}
|
|
22
|
-
return () => clearTimeout(timer);
|
|
23
|
-
}, [isHover]);
|
|
24
9
|
const { icons } = useIcons();
|
|
25
10
|
const IconComponent = icons[name];
|
|
26
11
|
if (!IconComponent) {
|
|
@@ -39,7 +24,11 @@ const Icon = forwardRef(({ name, onBackground, onSolid, size = "m", decorative =
|
|
|
39
24
|
const [scheme, weight] = onSolid.split("-");
|
|
40
25
|
colorClass = `${scheme}-on-solid-${weight}`;
|
|
41
26
|
}
|
|
42
|
-
|
|
27
|
+
const icon = (_jsx(Flex, { inline: true, fit: true, as: "span", ref: ref, className: classNames(colorClass, styles.icon, styles[size], className), "aria-hidden": decorative ? "true" : undefined, "aria-label": decorative ? undefined : name, style: style, ...rest, children: _jsx(IconComponent, {}) }));
|
|
28
|
+
if (tooltip) {
|
|
29
|
+
return (_jsx(HoverCard, { trigger: icon, placement: tooltipPosition, offsetDistance: "4", children: _jsx(Tooltip, { label: tooltip }) }));
|
|
30
|
+
}
|
|
31
|
+
return icon;
|
|
43
32
|
});
|
|
44
33
|
Icon.displayName = "Icon";
|
|
45
34
|
export { Icon };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AACrD,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,GAAG,CAAC;AAC7C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAcxC,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EACE,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,IAAI,GAAG,GAAG,EACV,UAAU,GAAG,IAAI,EACjB,OAAO,EACP,eAAe,GAAG,KAAK,EACvB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,aAAa,GAAyB,KAAK,CAAC,IAAI,CAAC,CAAC;IAExD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,kCAAkC,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,YAAY,IAAI,OAAO,EAAE,CAAC;QAC5B,OAAO,CAAC,IAAI,CACV,kGAAkG,CACnG,CAAC;IACJ,CAAC;IAED,IAAI,UAAU,GAAG,eAAe,CAAC;IACjC,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,CAA+B,CAAC;QAC/E,UAAU,GAAG,GAAG,MAAM,kBAAkB,MAAM,EAAE,CAAC;IACnD,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAA+B,CAAC;QAC1E,UAAU,GAAG,GAAG,MAAM,aAAa,MAAM,EAAE,CAAC;IAC9C,CAAC;IAED,MAAM,IAAI,GAAG,CACX,KAAC,IAAI,IACH,MAAM,QACN,GAAG,QACH,EAAE,EAAC,MAAM,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,iBAC1D,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAChC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACzC,KAAK,EAAE,KAAK,KACR,IAAI,YAER,KAAC,aAAa,KAAG,GACZ,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,eAAe,EAC1B,cAAc,EAAC,GAAG,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,GAAI,GACjB,CACb,CAAC;IACJ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,MAAM,CAAC,EACH,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,cAAc,GACd,aAAa,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAC1F,KAAK,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/E,QAAA,MAAM,UAAU,2GAmEf,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,33 +1,22 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import { forwardRef
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
4
|
import { ElementType } from "./ElementType";
|
|
5
|
-
import { Flex, Icon, Tooltip } from ".";
|
|
5
|
+
import { Flex, Icon, Tooltip, HoverCard } from ".";
|
|
6
6
|
import buttonStyles from "./Button.module.scss";
|
|
7
7
|
import iconStyles from "./IconButton.module.scss";
|
|
8
8
|
import classNames from "classnames";
|
|
9
9
|
const IconButton = forwardRef(({ icon = "refresh", size = "m", id, radius, tooltip, tooltipPosition = "top", variant = "primary", href, children, className, style, ...props }, ref) => {
|
|
10
|
-
const [isTooltipVisible, setTooltipVisible] = useState(false);
|
|
11
|
-
const [isHover, setIsHover] = useState(false);
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
let timer;
|
|
14
|
-
if (isHover) {
|
|
15
|
-
timer = setTimeout(() => {
|
|
16
|
-
setTooltipVisible(true);
|
|
17
|
-
}, 400);
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
setTooltipVisible(false);
|
|
21
|
-
}
|
|
22
|
-
return () => clearTimeout(timer);
|
|
23
|
-
}, [isHover]);
|
|
24
|
-
const content = (_jsxs(_Fragment, { children: [children ? children : _jsx(Icon, { name: icon, size: "s" }), tooltip && isTooltipVisible && (_jsx(Flex, { position: "absolute", zIndex: 1, className: iconStyles[tooltipPosition], children: _jsx(Tooltip, { label: tooltip }) }))] }));
|
|
25
10
|
const radiusSize = size === "s" || size === "m" ? "m" : "l";
|
|
26
|
-
|
|
11
|
+
const button = (_jsx(ElementType, { id: id, href: href, ref: ref, className: classNames(buttonStyles.button, buttonStyles[variant], iconStyles[size], className, radius === "none"
|
|
27
12
|
? "radius-none"
|
|
28
13
|
: radius
|
|
29
14
|
? `radius-${radiusSize}-${radius}`
|
|
30
|
-
: `radius-${radiusSize}`, "text-decoration-none", "button", "cursor-interactive", className), style: style,
|
|
15
|
+
: `radius-${radiusSize}`, "text-decoration-none", "button", "cursor-interactive", className), style: style, "aria-label": tooltip || icon, ...props, children: _jsx(Flex, { fill: true, center: true, children: children ? children : _jsx(Icon, { name: icon, size: "s" }) }) }));
|
|
16
|
+
if (tooltip) {
|
|
17
|
+
return (_jsx(HoverCard, { trigger: button, placement: tooltipPosition, fade: 0, scale: 0.9, duration: 200, offsetDistance: "4", children: _jsx(Tooltip, { label: tooltip }) }));
|
|
18
|
+
}
|
|
19
|
+
return button;
|
|
31
20
|
});
|
|
32
21
|
IconButton.displayName = "IconButton";
|
|
33
22
|
export { IconButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,GAAG,CAAC;AACnD,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AA6BpC,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EACE,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,EACV,EAAE,EACF,MAAM,EACN,OAAO,EACP,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAE5D,MAAM,MAAM,GAAG,CACb,KAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,YAAY,CAAC,MAAM,EACnB,YAAY,CAAC,OAAO,CAAC,EACrB,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,EACT,MAAM,KAAK,MAAM;YACf,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,MAAM;gBACN,CAAC,CAAC,UAAU,UAAU,IAAI,MAAM,EAAE;gBAClC,CAAC,CAAC,UAAU,UAAU,EAAE,EAC5B,sBAAsB,EACtB,QAAQ,EACR,oBAAoB,EACpB,SAAS,CACV,EACD,KAAK,EAAE,KAAK,gBACA,OAAO,IAAI,IAAI,KACvB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,QAAC,MAAM,kBACd,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,GAAG,GAAG,GAC/C,GACK,CACf,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,GAAG,EACb,cAAc,EAAC,GAAG,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,GAAI,GACjB,CACb,CAAC;IACJ,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,27 +1,3 @@
|
|
|
1
|
-
.top {
|
|
2
|
-
bottom: calc(100% + var(--static-space-2));
|
|
3
|
-
left: 50%;
|
|
4
|
-
transform: translateX(-50%);
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.bottom {
|
|
8
|
-
top: calc(100% + var(--static-space-2));
|
|
9
|
-
left: 50%;
|
|
10
|
-
transform: translateX(-50%);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.left {
|
|
14
|
-
right: calc(100% + var(--static-space-2));
|
|
15
|
-
top: 50%;
|
|
16
|
-
transform: translateY(-50%);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.right {
|
|
20
|
-
left: calc(100% + var(--static-space-2));
|
|
21
|
-
top: 50%;
|
|
22
|
-
transform: translateY(-50%);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
1
|
.s {
|
|
26
2
|
min-height: var(--static-space-24);
|
|
27
3
|
min-width: var(--static-space-24);
|
|
@@ -12,6 +12,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
12
12
|
style?: React.CSSProperties;
|
|
13
13
|
hasPrefix?: ReactNode;
|
|
14
14
|
hasSuffix?: ReactNode;
|
|
15
|
+
characterCount?: boolean;
|
|
15
16
|
cursor?: undefined | "interactive";
|
|
16
17
|
validate?: (value: ReactNode) => ReactNode | null;
|
|
17
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EACH,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,cAAc,GACd,aAAa,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC;CACnD;AAED,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EACH,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,cAAc,GACd,aAAa,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC;CACnD;AAED,QAAA,MAAM,KAAK,qFAuLV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/components/Input.js
CHANGED
|
@@ -5,7 +5,7 @@ import classNames from "classnames";
|
|
|
5
5
|
import { Column, Row, Text } from ".";
|
|
6
6
|
import styles from "./Input.module.scss";
|
|
7
7
|
import { useDebounce } from "../hooks/useDebounce";
|
|
8
|
-
const Input = forwardRef(({ id, label, placeholder, height = "m", error = false, errorMessage, description, radius, className, style, hasPrefix, hasSuffix, children, onFocus, onBlur, validate, cursor, ...props }, ref) => {
|
|
8
|
+
const Input = forwardRef(({ id, label, placeholder, height = "m", error = false, errorMessage, description, radius, className, style, hasPrefix, hasSuffix, characterCount, children, onFocus, onBlur, validate, cursor, ...props }, ref) => {
|
|
9
9
|
const [isFocused, setIsFocused] = useState(false);
|
|
10
10
|
const [isFilled, setIsFilled] = useState(!!props.value);
|
|
11
11
|
const [validationError, setValidationError] = useState(null);
|
|
@@ -68,7 +68,11 @@ const Input = forwardRef(({ id, label, placeholder, height = "m", error = false,
|
|
|
68
68
|
[styles.m]: height === "m",
|
|
69
69
|
}, radius === "none" ? "radius-none" : radius ? `radius-l-${radius}` : "radius-l"), children: [hasPrefix && (_jsx(Row, { paddingLeft: "12", className: styles.prefix, position: "static", children: hasPrefix })), _jsxs(Column, { fillWidth: true, children: [_jsx("input", { ...props, ref: ref, id: id, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, className: inputClassNames, "aria-describedby": displayError ? `${id}-error` : undefined, "aria-invalid": !!displayError }), label && (_jsx(Text, { as: "label", variant: "label-default-m", htmlFor: id, className: classNames(styles.label, styles.inputLabel, {
|
|
70
70
|
[styles.floating]: isFocused || isFilled || placeholder,
|
|
71
|
-
}), children: label })), children] }),
|
|
71
|
+
}), children: label })), children] }), characterCount && props.maxLength && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: _jsx(Text, { variant: "label-default-s", onBackground: props.maxLength - String(props.value || '').length <= 5
|
|
72
|
+
? "danger-weak"
|
|
73
|
+
: props.maxLength - String(props.value || '').length <= 10
|
|
74
|
+
? "warning-weak"
|
|
75
|
+
: "neutral-weak", children: props.maxLength - String(props.value || '').length }) })), hasSuffix && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: hasSuffix }))] }), displayError && errorMessage !== false && (_jsx(Row, { paddingX: "16", id: `${id}-error`, textVariant: "body-default-s", onBackground: "danger-weak", children: validationError || errorMessage })), description && (_jsx(Row, { paddingX: "16", id: `${id}-description`, textVariant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
|
|
72
76
|
});
|
|
73
77
|
Input.displayName = "Input";
|
|
74
78
|
export { Input };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,QAAQ,EACR,SAAS,EACT,UAAU,EAEV,WAAW,GAEZ,MAAM,OAAO,CAAC;AACf,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Flex } from ".";
|
|
3
|
+
interface MatrixFxProps extends React.ComponentProps<typeof Flex> {
|
|
4
|
+
speed?: number;
|
|
5
|
+
colors?: string[];
|
|
6
|
+
size?: number;
|
|
7
|
+
spacing?: number;
|
|
8
|
+
revealFrom?: "center" | "top" | "bottom" | "left" | "right";
|
|
9
|
+
trigger?: "hover" | "instant" | "mount";
|
|
10
|
+
flicker?: boolean;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const MatrixFx: React.ForwardRefExoticComponent<Omit<MatrixFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export { MatrixFx };
|
|
15
|
+
//# sourceMappingURL=MatrixFx.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MatrixFx.d.ts","sourceRoot":"","sources":["../../src/components/MatrixFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,mGAoYb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|