@hexdspace/react 0.1.19 → 0.1.20
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/dist/css/component.css +0 -58
- package/dist/index.js +11 -47
- package/package.json +1 -1
package/dist/css/component.css
CHANGED
|
@@ -143,64 +143,6 @@
|
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
-
@keyframes dialog-overlay-in {
|
|
147
|
-
from {
|
|
148
|
-
opacity: 0;
|
|
149
|
-
}
|
|
150
|
-
to {
|
|
151
|
-
opacity: 1;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
@keyframes dialog-overlay-out {
|
|
156
|
-
from {
|
|
157
|
-
opacity: 1;
|
|
158
|
-
}
|
|
159
|
-
to {
|
|
160
|
-
opacity: 0;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
@keyframes dialog-fade-in {
|
|
165
|
-
from {
|
|
166
|
-
opacity: 0;
|
|
167
|
-
}
|
|
168
|
-
to {
|
|
169
|
-
opacity: 1;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
@keyframes dialog-fade-out {
|
|
174
|
-
from {
|
|
175
|
-
opacity: 1;
|
|
176
|
-
}
|
|
177
|
-
to {
|
|
178
|
-
opacity: 0;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
@keyframes dialog-surface-in {
|
|
183
|
-
from {
|
|
184
|
-
opacity: 0;
|
|
185
|
-
transform: translateY(1.25rem);
|
|
186
|
-
}
|
|
187
|
-
to {
|
|
188
|
-
opacity: 1;
|
|
189
|
-
transform: translateY(0);
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
@keyframes dialog-surface-out {
|
|
194
|
-
from {
|
|
195
|
-
opacity: 1;
|
|
196
|
-
transform: translateY(0);
|
|
197
|
-
}
|
|
198
|
-
to {
|
|
199
|
-
opacity: 0;
|
|
200
|
-
transform: translateY(1.25rem);
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
|
|
204
146
|
:root .prose code {
|
|
205
147
|
background: rgba(0, 0, 0, 0.08);
|
|
206
148
|
padding: 3px 3px 0;
|
package/dist/index.js
CHANGED
|
@@ -1586,7 +1586,7 @@ var dialogSurfaceVariants = cva2("dialog-surface relative overflow-hidden", {
|
|
|
1586
1586
|
}
|
|
1587
1587
|
});
|
|
1588
1588
|
function DialogContent({ className, ...props }) {
|
|
1589
|
-
return /* @__PURE__ */ jsx7("div", { className: cn("
|
|
1589
|
+
return /* @__PURE__ */ jsx7("div", { className: cn("p-6", className), ...props });
|
|
1590
1590
|
}
|
|
1591
1591
|
function AutoHeight({
|
|
1592
1592
|
children,
|
|
@@ -1695,12 +1695,10 @@ function Dialog({
|
|
|
1695
1695
|
const isControlled = open2 !== void 0;
|
|
1696
1696
|
const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen ?? false);
|
|
1697
1697
|
const isOpen = isControlled ? open2 : uncontrolledOpen;
|
|
1698
|
-
const prevOpenRef = React2.useRef(false);
|
|
1699
|
-
const [contentCycle, setContentCycle] = React2.useState(0);
|
|
1700
1698
|
const [surfaceReady, setSurfaceReady] = React2.useState(false);
|
|
1701
1699
|
const [overlayReady, setOverlayReady] = React2.useState(false);
|
|
1702
1700
|
const Template = template;
|
|
1703
|
-
const motionDuration = useMotionDuration("--motion-
|
|
1701
|
+
const motionDuration = useMotionDuration("--motion-med", 0.16);
|
|
1704
1702
|
const handleOpenChange = (nextOpen) => {
|
|
1705
1703
|
if (!isControlled) setUncontrolledOpen(nextOpen);
|
|
1706
1704
|
onOpenChange?.(nextOpen);
|
|
@@ -1721,16 +1719,6 @@ function Dialog({
|
|
|
1721
1719
|
},
|
|
1722
1720
|
[onResolve]
|
|
1723
1721
|
);
|
|
1724
|
-
React2.useEffect(() => {
|
|
1725
|
-
const wasOpen = prevOpenRef.current;
|
|
1726
|
-
prevOpenRef.current = Boolean(isOpen);
|
|
1727
|
-
if (isOpen && !wasOpen) {
|
|
1728
|
-
setContentCycle((value) => value + 1);
|
|
1729
|
-
setSurfaceReady(false);
|
|
1730
|
-
setOverlayReady(false);
|
|
1731
|
-
return;
|
|
1732
|
-
}
|
|
1733
|
-
}, [isOpen]);
|
|
1734
1722
|
const handleAutoHeightReady = React2.useCallback(() => {
|
|
1735
1723
|
if (!isOpen) return;
|
|
1736
1724
|
requestAnimationFrame(() => {
|
|
@@ -1738,7 +1726,7 @@ function Dialog({
|
|
|
1738
1726
|
setOverlayReady(true);
|
|
1739
1727
|
});
|
|
1740
1728
|
}, [isOpen]);
|
|
1741
|
-
const overlayClassName = cn(
|
|
1729
|
+
const overlayClassName = cn(dialogOverlayClass);
|
|
1742
1730
|
const surfaceClassName = cn(dialogSurfaceVariants({ chrome }));
|
|
1743
1731
|
return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
|
|
1744
1732
|
trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
|
|
@@ -1749,16 +1737,8 @@ function Dialog({
|
|
|
1749
1737
|
className: overlayClassName,
|
|
1750
1738
|
style: { zIndex: zIndex - 1 },
|
|
1751
1739
|
variants: {
|
|
1752
|
-
open: {
|
|
1753
|
-
|
|
1754
|
-
pointerEvents: "auto",
|
|
1755
|
-
transition: { duration: motionDuration, ease: "easeOut" }
|
|
1756
|
-
},
|
|
1757
|
-
closed: {
|
|
1758
|
-
opacity: 0,
|
|
1759
|
-
pointerEvents: "none",
|
|
1760
|
-
transition: { duration: motionDuration, ease: "easeOut" }
|
|
1761
|
-
}
|
|
1740
|
+
open: { opacity: 1, pointerEvents: "auto", transition: { duration: motionDuration, ease: "easeOut" } },
|
|
1741
|
+
closed: { opacity: 0, pointerEvents: "none", transition: { duration: motionDuration, ease: "easeOut" } }
|
|
1762
1742
|
},
|
|
1763
1743
|
initial: "closed",
|
|
1764
1744
|
animate: overlayReady ? "open" : "closed",
|
|
@@ -1780,23 +1760,15 @@ function Dialog({
|
|
|
1780
1760
|
children: /* @__PURE__ */ jsx7(
|
|
1781
1761
|
motion.div,
|
|
1782
1762
|
{
|
|
1783
|
-
className: cn(
|
|
1763
|
+
className: cn(dialogPanelVariants(), className),
|
|
1784
1764
|
style: {
|
|
1785
1765
|
...style,
|
|
1786
1766
|
zIndex,
|
|
1787
1767
|
"--dialog-width": `${maxWidthPx}px`
|
|
1788
1768
|
},
|
|
1789
1769
|
variants: {
|
|
1790
|
-
open: {
|
|
1791
|
-
|
|
1792
|
-
pointerEvents: "auto",
|
|
1793
|
-
transition: { duration: motionDuration, ease: "easeOut" }
|
|
1794
|
-
},
|
|
1795
|
-
closed: {
|
|
1796
|
-
opacity: 0,
|
|
1797
|
-
pointerEvents: "none",
|
|
1798
|
-
transition: { duration: motionDuration, ease: "easeIn" }
|
|
1799
|
-
}
|
|
1770
|
+
open: { opacity: 1, pointerEvents: "auto", transition: { duration: motionDuration, ease: "easeOut" } },
|
|
1771
|
+
closed: { opacity: 0, pointerEvents: "none", transition: { duration: motionDuration, ease: "easeIn" } }
|
|
1800
1772
|
},
|
|
1801
1773
|
initial: "open",
|
|
1802
1774
|
animate: "open",
|
|
@@ -1807,16 +1779,8 @@ function Dialog({
|
|
|
1807
1779
|
className: surfaceClassName,
|
|
1808
1780
|
style: { willChange: "transform" },
|
|
1809
1781
|
variants: {
|
|
1810
|
-
open: {
|
|
1811
|
-
|
|
1812
|
-
y: 0,
|
|
1813
|
-
transition: { duration: motionDuration, ease: "easeOut" }
|
|
1814
|
-
},
|
|
1815
|
-
closed: {
|
|
1816
|
-
opacity: 0,
|
|
1817
|
-
y: 20,
|
|
1818
|
-
transition: { duration: motionDuration, ease: "easeIn" }
|
|
1819
|
-
}
|
|
1782
|
+
open: { opacity: 1, y: 0, transition: { duration: motionDuration, ease: "easeOut" } },
|
|
1783
|
+
closed: { opacity: 0, y: 20, transition: { duration: motionDuration, ease: "easeIn" } }
|
|
1820
1784
|
},
|
|
1821
1785
|
initial: "closed",
|
|
1822
1786
|
animate: surfaceReady ? "open" : "closed",
|
|
@@ -1836,7 +1800,6 @@ function Dialog({
|
|
|
1836
1800
|
AutoHeight,
|
|
1837
1801
|
{
|
|
1838
1802
|
onReady: handleAutoHeightReady,
|
|
1839
|
-
resetKey: contentCycle,
|
|
1840
1803
|
durationSeconds: motionDuration,
|
|
1841
1804
|
children: /* @__PURE__ */ jsx7(
|
|
1842
1805
|
Template,
|
|
@@ -1882,6 +1845,7 @@ var CustomDialog = (props) => {
|
|
|
1882
1845
|
const p = props.payload ?? { children: /* @__PURE__ */ jsx9("div", { children: "Empty custom dialog" }) };
|
|
1883
1846
|
return /* @__PURE__ */ jsxs5(DialogContent, { children: [
|
|
1884
1847
|
/* @__PURE__ */ jsx9(DialogPrimitive3.Title, { className: "sr-only", children: p.title ?? "Dialog" }),
|
|
1848
|
+
/* @__PURE__ */ jsx9(DialogPrimitive3.Description, { "aria-describedby": void 0 }),
|
|
1885
1849
|
p.children
|
|
1886
1850
|
] });
|
|
1887
1851
|
};
|