@tapizlabs/ui 0.2.21 → 0.2.23
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/README.md +5 -0
- package/dist/index.js +5 -3
- package/dist/index.js.map +1 -1
- package/dist/theme.css +329 -329
- package/fonts.css +1 -1
- package/package.json +80 -80
- package/tailwind-theme.css +1 -1
- package/theme.css +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# @tapizlabs/ui
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@tapizlabs/ui)
|
|
4
|
+
[](https://github.com/owlCoder/tapiz-design-system/actions/workflows/ci.yml)
|
|
5
|
+
[](./LICENSE)
|
|
6
|
+
[](https://www.npmjs.com/package/@tapizlabs/ui)
|
|
7
|
+
|
|
3
8
|
Shared Tapiz design system package for React applications.
|
|
4
9
|
|
|
5
10
|
Repository: `https://github.com/owlCoder/tapiz-design-system`
|
package/dist/index.js
CHANGED
|
@@ -2763,6 +2763,8 @@ var widthRem = {
|
|
|
2763
2763
|
};
|
|
2764
2764
|
var MOBILE_QUERY = "(max-width: 639px)";
|
|
2765
2765
|
var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
|
|
2766
|
+
var TRANSITION_MS = 240;
|
|
2767
|
+
var TRANSITION_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
2766
2768
|
function SidePanel({
|
|
2767
2769
|
isOpen,
|
|
2768
2770
|
onClose,
|
|
@@ -2791,7 +2793,7 @@ function SidePanel({
|
|
|
2791
2793
|
const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
|
|
2792
2794
|
return () => cancelAnimationFrame(raf);
|
|
2793
2795
|
}
|
|
2794
|
-
const timer = setTimeout(() => setMounted(false),
|
|
2796
|
+
const timer = setTimeout(() => setMounted(false), TRANSITION_MS);
|
|
2795
2797
|
return () => clearTimeout(timer);
|
|
2796
2798
|
}, [isOpen]);
|
|
2797
2799
|
useEffect4(() => {
|
|
@@ -2830,7 +2832,7 @@ function SidePanel({
|
|
|
2830
2832
|
const panelStyle = {
|
|
2831
2833
|
maxWidth: isMobile ? "100%" : `${widthRem[width]}rem`,
|
|
2832
2834
|
transform: shown ? "translateX(0)" : `translateX(${hiddenOffset})`,
|
|
2833
|
-
transition: reduceMotion ? "none" :
|
|
2835
|
+
transition: reduceMotion ? "none" : `transform ${TRANSITION_MS}ms ${TRANSITION_EASE}`,
|
|
2834
2836
|
willChange: "transform"
|
|
2835
2837
|
};
|
|
2836
2838
|
return createPortal5(
|
|
@@ -2841,7 +2843,7 @@ function SidePanel({
|
|
|
2841
2843
|
"aria-modal": "true",
|
|
2842
2844
|
"aria-labelledby": titleId,
|
|
2843
2845
|
className: `fixed inset-0 z-50 flex bg-[rgba(5,6,8,0.75)] backdrop-blur-[2px] ${side === "right" ? "justify-end" : "justify-start"} ${shown ? "opacity-100" : "opacity-0"}`,
|
|
2844
|
-
style: { transition: reduceMotion ? "none" :
|
|
2846
|
+
style: { transition: reduceMotion ? "none" : `opacity ${TRANSITION_MS}ms ${TRANSITION_EASE}` },
|
|
2845
2847
|
onClick: (e) => e.target === e.currentTarget && onClose(),
|
|
2846
2848
|
children: /* @__PURE__ */ jsxs47(
|
|
2847
2849
|
"div",
|