react-miui 0.32.1 → 0.32.3

package/esm/components/ui/tabs/Selector.styled.js

@@ -1,11 +1,75 @@
-import { styled } from "@stitches/react";
-import { dimensionsPxToRem } from "../../../theme.js";
-export const Root = styled("div", {
+import { keyframes, styled } from "@stitches/react";
+import { dimensionsPxToRem, fontPxToRem } from "../../../theme.js";
+const nudgeRight = keyframes({
+    "0%, 100%": { transform: "translateX(0)" },
+    "50%": { transform: "translateX(3px)" },
+});
+const nudgeLeft = keyframes({
+    "0%, 100%": { transform: "translateX(0)" },
+    "50%": { transform: "translateX(-3px)" },
+});
+const Root = styled("div", {
     "--selector-text": "$colors$selectorText",
     "--selector-active": "$colors$selectorActive",
     "display": "flex",
     "flex": 1,
     "justifyContent": "center",
     "gap": dimensionsPxToRem(114),
+    "variants": {
+        multiLine: {
+            true: {
+                flexWrap: "wrap",
+                rowGap: dimensionsPxToRem(60),
+            },
+            false: {
+                "flexWrap": "nowrap",
+                "overflowX": "auto",
+                "scrollbarWidth": "none",
+                "justifyContent": "flex-start",
+                "paddingRight": dimensionsPxToRem(60),
+                "&::-webkit-scrollbar": {
+                    display: "none",
+                },
+            },
+        },
+    },
+});
+const Wrapper = styled("div", {
+    position: "relative",
+    display: "flex",
+    flex: 1,
+    overflow: "hidden",
+});
+const Arrow = styled("div", {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    pointerEvents: "none",
+    fontSize: fontPxToRem(29),
+    color: "var(--selector-text)",
+    opacity: 0,
+    transition: "opacity 0.2s ease",
+    variants: {
+        side: {
+            right: {
+                right: 0,
+                paddingRight: dimensionsPxToRem(12),
+                animation: `${String(nudgeRight)} 1.5s ease-in-out 0.5s 2`,
+            },
+            left: {
+                left: 0,
+                paddingLeft: dimensionsPxToRem(12),
+                animation: `${String(nudgeLeft)} 1.5s ease-in-out 0.5s 2`,
+            },
+        },
+        visible: {
+            true: {
+                opacity: 0.65,
+            },
+        },
+    },
 });
+export { Arrow, Root, Wrapper };
 //# sourceMappingURL=Selector.styled.js.map

package/esm/components/ui/tabs/Selector.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE;IAC9B,iBAAiB,EAAE,sBAAsB;IACzC,mBAAmB,EAAE,wBAAwB;IAE7C,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,CAAC;IACT,gBAAgB,EAAE,QAAQ;IAC1B,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC;CAChC,CAAC,CAAC"}
+{"version":3,"file":"Selector.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,UAAU,GAAG,SAAS,CAAC;IACzB,UAAU,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE;IAC1C,KAAK,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE;CAC1C,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,SAAS,CAAC;IACxB,UAAU,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE;IAC1C,KAAK,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE;CAC3C,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE;IACvB,iBAAiB,EAAE,sBAAsB;IACzC,mBAAmB,EAAE,wBAAwB;IAE7C,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,CAAC;IACT,gBAAgB,EAAE,QAAQ;IAC1B,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAE7B,UAAU,EAAE;QACR,SAAS,EAAE;YACP,IAAI,EAAE;gBACF,QAAQ,EAAE,MAAM;gBAChB,MAAM,EAAE,iBAAiB,CAAC,EAAE,CAAC;aAChC;YACD,KAAK,EAAE;gBACH,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,MAAM;gBACnB,gBAAgB,EAAE,MAAM;gBACxB,gBAAgB,EAAE,YAAY;gBAC9B,cAAc,EAAE,iBAAiB,CAAC,EAAE,CAAC;gBACrC,sBAAsB,EAAE;oBACpB,OAAO,EAAE,MAAM;iBAClB;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE;IACxB,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,mBAAmB;IAE/B,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,KAAK,EAAE;gBACH,KAAK,EAAE,CAAC;gBACR,YAAY,EAAE,iBAAiB,CAAC,EAAE,CAAC;gBACnC,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,0BAA0B;aAC7D;YACD,IAAI,EAAE;gBACF,IAAI,EAAE,CAAC;gBACP,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;gBAClC,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,0BAA0B;aAC5D;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,OAAO,EAAE,IAAI;aAChB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC,UAAU,KAAK;IACX,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACvC;AAGD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC,UAAU,KAAK;IACX,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACvC;AAGD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -2,9 +2,11 @@ import React, { useCallback, useState } from "react";
 import { StyledToast } from "./Toaster.styled.js";
 const Notification = (props) => {
     const [forceHide, setForceHide] = useState(false);
+    const toastId = props.toast.id;
+    const { onRemove } = props;
     const handleRemove = useCallback(() => {
-        props.onRemove(props.toast.id);
-    }, [props.toast.id]);
+        onRemove(toastId);
+    }, [toastId, onRemove]);
     const handleForceHide = useCallback(() => {
         setForceHide(true);
     }, []);

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQ/C,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAErB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,oBAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,SAAS,EACnC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EACnB,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,eAAe;QAExB,kCAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAQ,CACrB,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQ/C,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,oBAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,SAAS,EACnC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EACnB,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,eAAe;QAExB,kCAAO,KAAK,CAAC,KAAK,CAAC,IAAI,CAAQ,CACrB,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 declare const meta: Meta;
 type Story = StoryObj;
 declare const Primary: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAO5D,QAAA,MAAM,IAAI,EAAE,IAgBX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,QAAA,MAAM,OAAO,EAAE,KA2Bd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI,EAAE,IAgBX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,QAAA,MAAM,OAAO,EAAE,KA2Bd,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC;IACxB,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE;gBACL,IAAI,EAAE,MAAM;aACf;SACJ;QACD,IAAI,EAAE;YACF,OAAO,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,GAAG;aACZ;SACJ;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,IAAI,EAAE,IAAI;KACb;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;QAC3B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAsC,CAAC;QAE9D,MAAM,WAAW,GAAG,GAAG,EAAE;YACrB,KAAK,CAAC,IAAI,IAAI,4BAA4B,EAAE,IAAI,CAAC,CAAC;QACtD,CAAC,CAAC;QAEF,OAAO,CACH,oBAAC,GAAG,IAAC,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;YASrB,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,iBAAqB,CAC/C,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Toaster.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC;IACxB,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE;gBACL,IAAI,EAAE,MAAM;aACf;SACJ;QACD,IAAI,EAAE;YACF,OAAO,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,GAAG;aACZ;SACJ;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,IAAI,EAAE,EAAE;QACR,IAAI,EAAE,IAAI;KACb;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;QAC3B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAsC,CAAC;QAE9D,MAAM,WAAW,GAAG,GAAG,EAAE;YACrB,KAAK,CAAC,IAAI,IAAI,4BAA4B,EAAE,IAAI,CAAC,CAAC;QACtD,CAAC,CAAC;QAEF,OAAO,CACH,oBAAC,GAAG,IAAC,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;YASrB,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,iBAAqB,CAC/C,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/utils/HandleEsc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HandleEsc.d.ts","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,KAAK;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"HandleEsc.d.ts","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,KAAK;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/utils/HandleEsc.js

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { useKeyPress } from "../../utils/index.js";
-const HandleEsc = (props) => {
+const HandleEsc = ({ onPress }) => {
     const pressed = useKeyPress("Escape");
     useEffect(() => {
         if (pressed) {
-            props.onPress();
+            onPress();
         }
-    }, [pressed]);
+    }, [pressed, onPress]);
     return null;
 };
 export { HandleEsc };

package/esm/components/utils/HandleEsc.js.map

@@ -1 +1 @@
-{"version":3,"file":"HandleEsc.js","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhD,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,OAAO,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE,CAAC;YACV,KAAK,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"HandleEsc.js","sourceRoot":"","sources":["../../../src/components/utils/HandleEsc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM1C,MAAM,SAAS,GAAoB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/C,MAAM,OAAO,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,EAAE,CAAC;QACd,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/utils/useTailSpin.js

@@ -11,7 +11,7 @@ const useTailSpin = ({ size = DEFAULT_SIZE, color = DEFAULT_COLOR, speed = DEFAU
         const encoded = encodeURIComponent(svg).replace(/'/gu, "%27")
             .replace(/"/gu, "%22");
         return `data:image/svg+xml,${encoded}`;
-    }, [size, color, speed]);
+    }, [size, color, speed, id]);
 };
 export { useTailSpin, };
 //# sourceMappingURL=useTailSpin.js.map

package/esm/utils/useTailSpin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTailSpin.js","sourceRoot":"","sources":["../../src/utils/useTailSpin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,GAAG,GAAG,6xBAA6xB,CAAC;AAiB1yB,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B,MAAM,aAAa,GAAG,cAAc,CAAC;AAErC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAW,EAAE,EAAE;IACnG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,OAAO,CAAC,GAAG,EAAE;QAChB,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;aAC9D,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;QAC/D,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;aACxD,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3B,OAAO,sBAAsB,OAAO,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF,OAAO,EACH,WAAW,GACd,CAAC"}
+{"version":3,"file":"useTailSpin.js","sourceRoot":"","sources":["../../src/utils/useTailSpin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,GAAG,GAAG,6xBAA6xB,CAAC;AAiB1yB,MAAM,aAAa,GAAG,GAAG,CAAC;AAC1B,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B,MAAM,aAAa,GAAG,cAAc,CAAC;AAErC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,aAAa,EAAE,KAAK,GAAG,aAAa,EAAW,EAAE,EAAE;IACnG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,OAAO,CAAC,GAAG,EAAE;QAChB,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;aAC9D,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;QAC/D,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;aACxD,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3B,OAAO,sBAAsB,OAAO,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;AACjC,CAAC,CAAC;AAEF,OAAO,EACH,WAAW,GACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.32.1",
+  "version": "0.32.3",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {
@@ -19,13 +19,13 @@
     "@stitches/react": "^1.2.8",
     "classnames": "^2.5.1",
     "oop-timers": "^5.1.0",
-    "patch-package": "^8.0.0"
+    "patch-package": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@ezez/eslint": "^9.37.7",
+    "@ezez/eslint": "^9.39.3",
     "@ezez/hooks": "^2.2.0",
     "@icon-park/react": "^1.4.2",
     "@storybook/addon-docs": "^9.1.10",
@@ -36,17 +36,15 @@
     "@types/react-dom": "^18.3.1",
     "babel-plugin-module-extension": "^0.1.3",
     "babel-plugin-module-resolver": "^5.0.2",
-    "eslint-plugin-storybook": "^0.6.15",
-    "jest": "^29.7.0",
+    "eslint-plugin-storybook": "^10.2.8",
+    "jest": "^30.2.0",
     "must": "^0.13.4",
-    "nodemon": "^3.1.9",
     "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-use": "^17.5.1",
     "resolve-tspaths": "^0.8.23",
     "storybook": "^9.1.10",
-    "ts-node": "^10.9.2",
     "typedoc": "0.27.6",
     "typescript": "^5.7.3"
   },

package/src/components/form/Checkbox.stories.tsx

@@ -2,11 +2,10 @@ import React, { useCallback, useState } from "react";
 
 import { omit } from "@ezez/utils";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Div } from "../native";
 import { styled } from "../../theme";
-
+import { Div } from "../native";
 import { Checkbox } from "./Checkbox";
 
 const meta: Meta = {

package/src/components/form/Checkbox.tsx

@@ -3,7 +3,6 @@ import React, { forwardRef, useCallback } from "react";
 import type { ThemeCSS } from "../../theme";
 
 import { Checkmark } from "../icons/Checkmark";
-
 import { CheckmarkWrapper, LabelWrapper, TextLabel } from "./Checkbox.styled";
 
 type LabelWrapperProps = React.ComponentProps<typeof LabelWrapper>;
@@ -23,7 +22,7 @@ type CheckboxProps = Partial<Pick<LabelWrapperProps, "css" | "className">>
  * Checkbox component
  */
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
-    // eslint-disable-next-line @typescript-eslint/no-shadow
+
     color, error, name, onChange, children, css, className, ...inputProps
 }, ref) => {
     const style: ThemeCSS = {};

package/src/components/form/ColorPicker.stories.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../theme";
 import { Section } from "../layout/section/Section";
-
 import { ColorPicker } from "./ColorPicker";
 
 const meta: Meta = {

package/src/components/form/ColorPicker.tsx

@@ -3,7 +3,6 @@ import React, { forwardRef, useCallback } from "react";
 import type { ThemeCSS } from "../../theme";
 
 import { contrastColor } from "../utils/colors";
-
 import { ColorDisplay, LabelWrapper } from "./ColorPicker.styled";
 
 type WrapperProps = React.ComponentProps<typeof LabelWrapper>;

package/src/components/form/Label.stories.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { ICON, Icon } from "../icons/Icon";
-
 import { Input } from "./input/Input";
 import { Label } from "./Label";
 

package/src/components/form/Label.styled.ts

@@ -1,4 +1,4 @@
-import { styled, fontPxToRem, dimensionsPxToRem } from "../../theme";
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../theme";
 
 const StyledLabel = styled("label", {
     "& + &": {

package/src/components/form/Select.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Select } from "./Select";
 

package/src/components/form/Suggestions.tsx

@@ -4,7 +4,7 @@ import type { Value } from "../../types/form";
 
 interface Props<T extends string> {
     id: string;
-    suggestions?: Value<T>[] | undefined;
+    suggestions?: Array<Value<T>> | undefined;
 }
 
 const Suggestions = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {

package/src/components/form/Toggle.styled.ts

@@ -1,4 +1,4 @@
-import { styled, dimensionsPxToRem, borderPxToRem } from "../../theme";
+import { borderPxToRem, dimensionsPxToRem, styled } from "../../theme";
 
 const StyledToggle = styled("div", {
     boxSizing: "border-box",

package/src/components/form/Toggle.tsx

@@ -1,6 +1,7 @@
-import type { ChangeEvent } from "react";
 import React, { forwardRef, useCallback } from "react";
 
+import type { ChangeEvent } from "react";
+
 import { StyledContainer, StyledToggle } from "./Toggle.styled";
 
 type ContainerProps = React.ComponentProps<typeof StyledContainer>;

package/src/components/form/choice/Choice.stories.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 import { Section } from "../../layout/section/Section";
-
 import { Choice } from "./Choice";
 
 const meta: Meta = {

package/src/components/form/choice/Choice.tsx

@@ -3,16 +3,15 @@ import React, { forwardRef } from "react";
 import type { ObjectValue, Value } from "../../../types/form";
 
 import { toObjectValue } from "../../../utils/index";
-
-import { ChoiceItem } from "./ChoiceItem";
 import { StyledChoice } from "./Choice.styled";
+import { ChoiceItem } from "./ChoiceItem";
 
 type Variant = "wide" | "left";
 
 type StyledProps = React.ComponentProps<typeof StyledChoice>;
 
 type ChoiceProps = Omit<StyledProps, "onChange"> & {
-    values: Value<string>[];
+    values: Array<Value<string>>;
     value: string;
     name: string;
     onChange: (value: Exclude<Value<string>, ObjectValue>) => void;
@@ -22,7 +21,7 @@ type ChoiceProps = Omit<StyledProps, "onChange"> & {
 // @TODO handle disabled / readonly!
 
 const Choice = forwardRef<HTMLDivElement, ChoiceProps>(({
-    // eslint-disable-next-line @typescript-eslint/no-shadow
+
     value, values, name, onChange, ...props
 }, ref) => {
     const opts = values.map(option => {

package/src/components/form/choice/ChoiceItem.tsx

@@ -13,10 +13,11 @@ interface Props<T extends string> {
 }
 
 const ChoiceItem = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {
+    const { onChange } = props;
+
     const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-        props.onChange(e.currentTarget.value as Exclude<Value<T>, ObjectValue>);
-    }, [props.onChange]);
+        onChange(e.currentTarget.value as Exclude<Value<T>, ObjectValue>);
+    }, [onChange]);
 
     return (
         <StyledChoiceLabel key={props.value.value} tabIndex={0} className={props.className}>

package/src/components/form/input/Input.stories.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Icon, ICON } from "../../icons/Icon";
 import { countries } from "../../../demo/countries.const";
+import { ICON, Icon } from "../../icons/Icon";
 import { Button } from "../../ui/button/Button";
 import { Gap } from "../../utils/Gap";
-
 import { Input } from "./Input";
 
 const meta: Meta<typeof Input> = {

package/src/components/form/input/Input.styled.ts

@@ -1,5 +1,4 @@
 import { dimensionsPxToRem, styled } from "../../../theme";
-
 import { input, wrapper } from "./Input.css";
 
 const StyledInput = styled("input", input);

package/src/components/form/input/Input.tsx

@@ -1,17 +1,16 @@
-import React, { useCallback, useId, useState } from "react";
+import React, { useCallback, useId, useRef, useState } from "react";
 
 import type { ObjectValue, Value } from "../../../types/form";
 
 import { Suggestions } from "../Suggestions";
-
-import { StyledInput, StyledWrapper, StyledPrefix, StyledSuffix } from "./Input.styled";
+import { StyledInput, StyledPrefix, StyledSuffix, StyledWrapper } from "./Input.styled";
 
 interface CustomProps<T extends string> {
     children?: never;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     error?: boolean;
-    suggestions?: Value<T>[];
+    suggestions?: Array<Value<T>>;
     onSuggestionMatch?: (value: Exclude<Value<T>, ObjectValue>, __chromiumPickedFromList: boolean) => void;
 }
 
@@ -31,7 +30,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
 }: Props<T>, ref: React.Ref<HTMLInputElement>) => {
     const [focused, setFocused] = useState(false);
     const suggestionsId = useId();
-    const [info] = useState<{ picked?: boolean }>({});
+    const infoRef = useRef<{ picked?: boolean }>({});
 
     const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
         setFocused(true);
@@ -46,10 +45,10 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
     const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (e.code === undefined) { // pick from list on Chromium browsers
-            info.picked = true;
+            infoRef.current.picked = true;
         }
         onKeyDown?.(e);
-    }, []);
+    }, [onKeyDown]);
 
     const handleChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
         if (!suggestions) {
@@ -64,12 +63,11 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
             return s.value === val;
         });
         if (matched) {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-            onSuggestionMatch?.(val as Exclude<Value<T>, ObjectValue>, Boolean(info.picked));
+            onSuggestionMatch?.(val as Exclude<Value<T>, ObjectValue>, Boolean(infoRef.current.picked));
         }
-        info.picked = false;
+        infoRef.current.picked = false;
         onChange?.(e);
-    }, [suggestions, onChange]);
+    }, [suggestions, onChange, onSuggestionMatch]);
 
     const prefixElem = prefix ? <StyledPrefix>{prefix}</StyledPrefix> : null;
     const suffixElem = suffix ? <StyledSuffix>{suffix}</StyledSuffix> : null;
@@ -82,7 +80,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
     return (
         <StyledWrapper
             className={className}
-            focused={Boolean(focused)}
+            focused={focused}
             disabled={Boolean(props.disabled)}
             readOnly={Boolean(props.readOnly)}
             error={Boolean(error)}
@@ -104,13 +102,23 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
     );
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-const Input = React.forwardRef(InputInner) as <T extends string>(
-    props: Props<T> & React.RefAttributes<HTMLInputElement>
+const InputRef = React.forwardRef(InputInner);
+InputRef.displayName = "Input";
+InputRef.toString = () => StyledWrapper.toString();
+
+const Input = InputRef as <T extends string>(
+    props: Props<T> & React.RefAttributes<HTMLInputElement>,
 ) => React.ReactElement;
 
+const InputInputSelector = StyledInput.toString();
+const InputPrefixSelector = StyledPrefix.toString();
+const InputSuffixSelector = StyledSuffix.toString();
+
 export {
     Input,
+    InputInputSelector,
+    InputPrefixSelector,
+    InputSuffixSelector,
 };
 
 export type {

package/src/components/form/textarea/TextArea.stories.tsx

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { TextArea } from "./TextArea";
 

package/src/components/form/textarea/TextArea.styled.ts

@@ -1,7 +1,6 @@
+import { miuiScrollbars } from "../../../scrollbars.css";
 import { dimensionsPxToRem, styled } from "../../../theme";
-
 import { input, wrapper } from "../input/Input.css";
-import { miuiScrollbars } from "../../../scrollbars.css";
 
 const StyledTextArea = styled("textarea", {
     ...miuiScrollbars,

package/src/components/icons/Back.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Back: React.FC<Props> = (props) => {
+const Back = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 9 16"}
@@ -16,6 +17,8 @@ const Back: React.FC<Props> = (props) => {
             <path fill={"currentColor"} d={"M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1"} />
         </svg>
     );
-};
+});
+
+Back.displayName = "Back";
 
 export { Back };

package/src/components/icons/Battery.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Battery: React.FC<Props> = (props) => {
+const Battery = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 13 17"}
@@ -30,6 +31,8 @@ const Battery: React.FC<Props> = (props) => {
         </svg>
 
     );
-};
+});
+
+Battery.displayName = "Battery";
 
 export { Battery };

package/src/components/icons/Checkmark.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Checkmark: React.FC<Props> = (props) => {
+const Checkmark = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 26 18"}
@@ -16,6 +17,8 @@ const Checkmark: React.FC<Props> = (props) => {
             <path fill={"currentColor"} d={"M26 1.6q0-.7-.4-1.15Q25.15 0 24.55 0q-.65 0-1.1.45L9.5 14.35l-6.95-7Q2.1 6.9 1.5 6.9q-.65 0-1.05.45Q0 7.8 0 8.4q0 .7.45 1.15l8 8.05q.45.4 1.05.4.6 0 1.05-.4l15-14.95Q26 2.2 26 1.6"} />
         </svg>
     );
-};
+});
+
+Checkmark.displayName = "Checkmark";
 
 export { Checkmark };

package/src/components/icons/Config.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Config: React.FC<Props> = (props) => {
+const Config = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 90 90"}
@@ -16,6 +17,8 @@ const Config: React.FC<Props> = (props) => {
             <path fill={"currentColor"} d={"M87.55 26.85 85.2 21.5l-5.25.6q-2.4.3-3.7.25-1.3-.05-2.35-.65-1-.6-2.5-1.95-1.55-1.3-2.25-2.3-.75-1-.95-2.5-.25-1.45-.25-4.25l-.1-6.15L56.65 0l-4.1 4.5q-1.7 1.8-2.85 2.75-1.25.95-2.35 1.3-1.15.3-2.7.3-1.5 0-2.6-.3-1.2-.35-2.35-1.25-1.2-.9-2.85-2.65L32.75.4 28 2.25q-2.05.8-3.65 1.65-1.6.75-2 1.15-.4.45-.6 2.15-.25 1.75-.1 4 .1 2.1-.05 3.45-.15 1.35-.65 2.4-.45 1-1.45 2.1-1 1.25-1.95 1.8-.9.6-2.4.8-1.45.2-4.15.25l-6.1.1L.1 33 4 36.9q1.55 1.6 2.8 3.4 1.2 1.8 1.5 2.9.5 2.7-.95 5.55Q6 51.55 3.1 53.8L0 56.35 4.9 67.7h4.85q6.5 0 9.4 3 2.95 2.95 2.5 9.1-.25 2.25.1 3.55.3 1.2 1.75 2.1 1.45.85 4.6 2l4.85 1.95 3.5-3.7q8.75-9.1 17.2.7l3 3.6 11.4-4.85-.3-4.2q-.45-6.55 2.7-9.85 3.15-3.35 9.9-3.2l5.35.2 4.1-11.4-3.7-3q-3.25-2.7-4.2-6.2-.95-3.5.35-6.85 1.3-3.25 4.85-5.35 1.2-.65 2-1.35.85-.65.9-.95-.05-.35-.75-2.1-.6-1.7-1.7-4.05m-28.25.8q2 1.5 3.5 3.55 1.45 2.05 2.75 4.9 1.95 4.4 1.9 8.95-.1 4.5-2.2 9.05-2 4.35-5 7.15-2.9 2.75-7.1 4.45-8.65 3.25-17.25-.8-2.9-1.3-4.9-2.8-2.05-1.55-3.5-3.6-1.45-2-2.75-4.9-1.9-4.2-1.9-8.75 0-4.5 1.9-8.75 1.3-2.85 2.75-4.9 1.45-2.05 3.5-3.55 2-1.55 4.9-2.85 4.65-2.3 9.25-2.3t9.25 2.3q2.9 1.3 4.9 2.85"} />
         </svg>
     );
-};
+});
+
+Config.displayName = "Config";
 
 export { Config };