react-miui 0.33.0 → 0.34.0

package/esm/components/ui/drawer/Drawer.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUhB,CAAC;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEX,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,OAAO,GACV,CAAC"}
+{"version":3,"file":"Drawer.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUhB,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUR,CAAC;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEX,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,IAAI,EACJ,OAAO,GACV,CAAC"}

package/esm/components/ui/drawer/Drawer.styled.js

@@ -10,8 +10,19 @@ const StyledDrawer = styled("div", {
     transition: "transform 300ms",
     overflow: "auto",
 });
+const Tint = styled("div", {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "$text",
+    opacity: 0,
+    transition: "opacity 300ms",
+    zIndex: 0,
+});
 const Content = styled("div", {
     height: "100%",
 });
-export { StyledDrawer, Content, };
+export { StyledDrawer, Tint, Content, };
 //# sourceMappingURL=Drawer.styled.js.map

package/esm/components/ui/drawer/Drawer.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,iBAAiB;IAC7B,QAAQ,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,OAAO,GACV,CAAC"}
+{"version":3,"file":"Drawer.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,iBAAiB;IAC7B,QAAQ,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE;IACvB,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,eAAe;IAC3B,MAAM,EAAE,CAAC;CACZ,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,IAAI,EACJ,OAAO,GACV,CAAC"}

package/esm/components/ui/toaster/Toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEzD,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAErE,UAAU,oBAAqB,SAAQ,kBAAkB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAOnD,CAAC;AAEF,KAAK,SAAS,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;AAErE,QAAA,MAAM,UAAU,QAAO,SAItB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;AAC9C,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEzD,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAErE,UAAU,oBAAqB,SAAQ,kBAAkB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgBnD,CAAC;AAEF,KAAK,SAAS,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;AAErE,QAAA,MAAM,UAAU,QAAO,SAItB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;AAC9C,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

package/esm/components/ui/toaster/Toaster.js

@@ -1,9 +1,15 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { toast, Toaster as SonnerToaster } from "sonner";
 const ToasterProvider = ({ children, position = "bottom-center", ...rest }) => {
+    const [body, setBody] = useState(null);
+    useEffect(() => {
+        setBody(document.body);
+    }, []);
+    const toaster = React.createElement(SonnerToaster, { position: position, ...rest });
     return (React.createElement(React.Fragment, null,
         children,
-        React.createElement(SonnerToaster, { position: position, ...rest })));
+        body ? createPortal(toaster, body) : null));
 };
 const useToaster = () => {
     return useCallback((text, timeout) => {

package/esm/components/ui/toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAC;AAQzD,MAAM,eAAe,GAAmC,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1G,OAAO,CACH;QACK,QAAQ;QACT,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,KAAM,IAAI,GAAI,CAChD,CACN,CAAC;AACN,CAAC,CAAC;AAIF,MAAM,UAAU,GAAG,GAAc,EAAE;IAC/B,OAAO,WAAW,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;QACjC,OAAO,KAAK,CAAC,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC5E,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAC;AAQzD,MAAM,eAAe,GAAmC,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1G,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QAEX,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,KAAM,IAAI,GAAI,CAAC;IAEhE,OAAO,CACH;QACK,QAAQ;QACR,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC3C,CACN,CAAC;AACN,CAAC,CAAC;AAIF,MAAM,UAAU,GAAG,GAAc,EAAE;IAC/B,OAAO,WAAW,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;QACjC,OAAO,KAAK,CAAC,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC5E,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/ui/tooltip/Tooltip.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+interface TooltipProviderProps {
+    delayDuration?: number;
+    skipDelayDuration?: number;
+    disableHoverableContent?: boolean;
+    children: React.ReactNode;
+}
+declare const TooltipProvider: (props: TooltipProviderProps) => React.JSX.Element;
+interface TooltipProps {
+    content: React.ReactNode;
+    side?: Side;
+    sideOffset?: number;
+    align?: Align;
+    alignOffset?: number;
+    delayDuration?: number;
+    avoidCollisions?: boolean;
+    arrow?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    children: React.ReactElement;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipContentSelector: string;
+export { Tooltip, TooltipProvider, TooltipContentSelector, };
+export type { TooltipProps, TooltipProviderProps };
+//# sourceMappingURL=Tooltip.d.ts.map

package/esm/components/ui/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExC,UAAU,oBAAoB;IAK1B,aAAa,CAAC,EAAE,MAAM,CAAC;IAMvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAM3B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAUD,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAanD,CAAC;AAEF,UAAU,YAAY;IAIlB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAMzB,IAAI,CAAC,EAAE,IAAI,CAAC;IAKZ,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,KAAK,CAAC,EAAE,KAAK,CAAC;IAKd,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAIhB,IAAI,CAAC,EAAE,OAAO,CAAC;IAIf,WAAW,CAAC,EAAE,OAAO,CAAC;IAItB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAIvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAqBD,QAAA,MAAM,OAAO,qFA8CX,CAAC;AAKH,QAAA,MAAM,sBAAsB,QAA2B,CAAC;AAExD,OAAO,EACH,OAAO,EACP,eAAe,EACf,sBAAsB,GACzB,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

package/esm/components/ui/tooltip/Tooltip.js

@@ -0,0 +1,43 @@
+import React, { forwardRef } from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { StyledArrow, StyledContent } from "./Tooltip.styled.js";
+const TooltipProvider = (props) => {
+    const radixProps = {};
+    if (props.delayDuration !== undefined) {
+        radixProps.delayDuration = props.delayDuration;
+    }
+    if (props.skipDelayDuration !== undefined) {
+        radixProps.skipDelayDuration = props.skipDelayDuration;
+    }
+    if (props.disableHoverableContent !== undefined) {
+        radixProps.disableHoverableContent = props.disableHoverableContent;
+    }
+    return (React.createElement(RadixTooltip.Provider, { ...radixProps }, props.children));
+};
+const Tooltip = forwardRef((props, ref) => {
+    const { content, side = "top", sideOffset = 6, align = "center", alignOffset = 0, delayDuration, avoidCollisions = true, arrow = true, open, defaultOpen, onOpenChange, className, children, } = props;
+    const rootProps = {};
+    if (open !== undefined) {
+        rootProps.open = open;
+    }
+    if (defaultOpen !== undefined) {
+        rootProps.defaultOpen = defaultOpen;
+    }
+    if (onOpenChange !== undefined) {
+        rootProps.onOpenChange = onOpenChange;
+    }
+    if (delayDuration !== undefined) {
+        rootProps.delayDuration = delayDuration;
+    }
+    return (React.createElement(RadixTooltip.Root, { ...rootProps },
+        React.createElement(RadixTooltip.Trigger, { asChild: true }, children),
+        React.createElement(RadixTooltip.Portal, null,
+            React.createElement(StyledContent, { ref: ref, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, avoidCollisions: avoidCollisions, className: className },
+                content,
+                arrow && React.createElement(StyledArrow, { width: 10, height: 5 })))));
+});
+Tooltip.displayName = "Tooltip";
+Tooltip.toString = () => StyledContent.toString();
+const TooltipContentSelector = StyledContent.toString();
+export { Tooltip, TooltipProvider, TooltipContentSelector, };
+//# sourceMappingURL=Tooltip.js.map

package/esm/components/ui/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/ui/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkC9D,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IACpD,MAAM,UAAU,GAAyE,EAAE,CAAC;IAC5F,IAAI,KAAK,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;QAAC,UAAU,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;IAAC,CAAC;IAC1F,IAAI,KAAK,CAAC,iBAAiB,KAAK,SAAS,EAAE,CAAC;QAAC,UAAU,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAC,CAAC;IACtG,IAAI,KAAK,CAAC,uBAAuB,KAAK,SAAS,EAAE,CAAC;QAC9C,UAAU,CAAC,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,CAAC;IACvE,CAAC;IAED,OAAO,CACH,oBAAC,YAAY,CAAC,QAAQ,OAAK,UAAU,IAChC,KAAK,CAAC,QAAQ,CACK,CAC3B,CAAC;AACN,CAAC,CAAC;AAqFF,MAAM,OAAO,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,EACF,OAAO,EACP,IAAI,GAAG,KAAK,EAEZ,UAAU,GAAG,CAAC,EACd,KAAK,GAAG,QAAQ,EAChB,WAAW,GAAG,CAAC,EACf,aAAa,EACb,eAAe,GAAG,IAAI,EACtB,KAAK,GAAG,IAAI,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,QAAQ,GACX,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAmD,EAAE,CAAC;IACrE,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;IAAC,CAAC;IAClD,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAAC,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IAAC,CAAC;IACvE,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QAAC,SAAS,CAAC,YAAY,GAAG,YAAY,CAAC;IAAC,CAAC;IAC1E,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QAAC,SAAS,CAAC,aAAa,GAAG,aAAa,CAAC;IAAC,CAAC;IAE7E,OAAO,CACH,oBAAC,YAAY,CAAC,IAAI,OAAK,SAAS;QAC5B,oBAAC,YAAY,CAAC,OAAO,IAAC,OAAO,EAAE,IAAI,IAC9B,QAAQ,CACU;QACvB,oBAAC,YAAY,CAAC,MAAM;YAChB,oBAAC,aAAa,IACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS;gBAEnB,OAAO;gBAEP,KAAK,IAAI,oBAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,GAAI,CACnC,CACE,CACN,CACvB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAChC,OAAO,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;AAElD,MAAM,sBAAsB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;AAExD,OAAO,EACH,OAAO,EACP,eAAe,EACf,sBAAsB,GACzB,CAAC"}

package/esm/components/ui/tooltip/Tooltip.styled.d.ts

@@ -0,0 +1,173 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+declare const StyledContent: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        text2: "#181818";
+        text3: "#000000";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("../../../../node_modules/@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+declare const StyledArrow: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        text2: "#181818";
+        text3: "#000000";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("../../../../node_modules/@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+export { StyledContent, StyledArrow, };
+//# sourceMappingURL=Tooltip.styled.d.ts.map

package/esm/components/ui/tooltip/Tooltip.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tooltip/Tooltip.styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiBjB,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEf,CAAC;AAEH,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}

package/esm/components/ui/tooltip/Tooltip.styled.js

@@ -0,0 +1,28 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { dimensionsPxToRem, fontPxToRem, keyframes, pxToRem, styled } from "../../../theme.js";
+const fadeIn = keyframes({
+    from: { opacity: 0, transform: "scale(0.96)" },
+    to: { opacity: 1, transform: "scale(1)" },
+});
+const StyledContent = styled(RadixTooltip.Content, {
+    "zIndex": 10,
+    "background": "$text2",
+    "color": "$background",
+    "padding": `${dimensionsPxToRem(18)} ${dimensionsPxToRem(36)}`,
+    "borderRadius": dimensionsPxToRem(12),
+    "fontSize": fontPxToRem(24),
+    "lineHeight": 1.3,
+    "maxWidth": pxToRem(280),
+    "boxShadow": `0 ${pxToRem(2)} ${pxToRem(8)} rgba(0, 0, 0, 0.18)`,
+    "userSelect": "none",
+    "transformOrigin": "var(--radix-tooltip-content-transform-origin)",
+    "animation": `${fadeIn.toString()} 120ms ease-out`,
+    "&[data-state=\"closed\"]": {
+        animationDirection: "reverse",
+    },
+});
+const StyledArrow = styled(RadixTooltip.Arrow, {
+    fill: "$text2",
+});
+export { StyledContent, StyledArrow, };
+//# sourceMappingURL=Tooltip.styled.js.map

package/esm/components/ui/tooltip/Tooltip.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/tooltip/Tooltip.styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE5F,MAAM,MAAM,GAAG,SAAS,CAAC;IACrB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE;IAC9C,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;CAC5C,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE;IAC/C,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,QAAQ;IACtB,OAAO,EAAE,aAAa;IACtB,SAAS,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,IAAI,iBAAiB,CAAC,EAAE,CAAC,EAAE;IAC9D,cAAc,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACrC,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,YAAY,EAAE,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC;IACxB,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,sBAAsB;IAChE,YAAY,EAAE,MAAM;IACpB,iBAAiB,EAAE,+CAA+C;IAClE,WAAW,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,iBAAiB;IAElD,0BAA0B,EAAE;QACxB,kBAAkB,EAAE,SAAS;KAChC;CACJ,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE;IAC3C,IAAI,EAAE,QAAQ;CACjB,CAAC,CAAC;AAEH,OAAO,EACH,aAAa,EACb,WAAW,GACd,CAAC"}

package/esm/index.d.ts

@@ -37,6 +37,7 @@ export * from "./components/ui/stats/Stats";
 export * from "./components/ui/tabs/Selector";
 export * from "./components/ui/toaster/Toaster";
 export * from "./components/ui/toolButton/ToolButton";
+export * from "./components/ui/tooltip/Tooltip";
 export * from "./components/utils/Gap";
 export * from "./components/utils/HandleEsc";
 export * from "./components/utils/If";

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/esm/index.js

@@ -37,6 +37,7 @@ export * from "./components/ui/stats/Stats.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
 export * from "./components/ui/toolButton/ToolButton.js";
+export * from "./components/ui/tooltip/Tooltip.js";
 export * from "./components/utils/Gap.js";
 export * from "./components/utils/HandleEsc.js";
 export * from "./components/utils/If.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAIjC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAIjC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {
@@ -16,6 +16,7 @@
   "dependencies": {
     "@bedrock-layout/use-forwarded-ref": "^2.0.17",
     "@ezez/utils": "^3.0.0",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@stitches/react": "^1.2.8",
     "classnames": "^2.5.1",
     "oop-timers": "^5.2.1",

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: false
+  unrs-resolver: false

package/src/bugfixes/ToastsFromModal.stories.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback, useState } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "../components/ui/button/Button";
+import { Modal } from "../components/ui/modal/Modal";
+import { ModalButtons } from "../components/ui/modal/ModalButtons";
+import { toast } from "../components/ui/toaster/Toaster";
+
+const docs = [
+    "Real-world setup: the storybook preview wraps every story in a stacking context",
+    "(`transform: translateZ(0)` above `ToasterProvider`), which mirrors what real apps",
+    "tend to do unintentionally.",
+    "",
+    "**Without the fix:** sonner's huge z-index is trapped inside that stacking context.",
+    "The modal portals to `document.body` and renders on top — the toast is hidden.",
+    "",
+    "**With the fix:** `ToasterProvider` portals `<SonnerToaster>` to `document.body`,",
+    "escaping the stacking context. The toast renders above the modal.",
+].join("\n");
+
+const meta: Meta = {
+    title: "Bugfixes/Toasts from a Modal",
+    tags: ["bugfixes"],
+    parameters: { docs: { description: { component: docs } } },
+};
+
+type Story = StoryObj;
+
+const ToastFromModal: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleOpen = useCallback(() => { setOpen(true); }, []);
+        const handleClose = useCallback(() => { setOpen(false); }, []);
+        const handleToast = useCallback(() => {
+            toast.success("I should appear above the modal");
+        }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal onClose={handleClose} isOpen={open} title={"Repro"} position={"bottom"} full={true}>
+                    <p>Click the button — the toast must appear above this modal.</p>
+                    <ModalButtons>
+                        <ModalButtons.Button onClick={handleClose}>Cancel</ModalButtons.Button>
+                        <ModalButtons.Button variant={"main"} onClick={handleToast}>
+                            Show toast
+                        </ModalButtons.Button>
+                    </ModalButtons>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+export { ToastFromModal };
+
+export default meta;