react-miui 0.34.0 → 0.36.0

package/esm/components/ui/pop/Pop.styled.js

@@ -1,4 +1,5 @@
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+import { rippleHostStyles } from "../../../utils/useRipple.styled.js";
 const Overlay = styled("div", {
     position: "fixed",
     background: "#0000004c",
@@ -21,23 +22,20 @@ const ListItem = styled("li", {
         borderTop: "1px solid $border",
     },
 });
-const Button = styled("button", {
-    "border": "none",
-    "background": "$background",
-    "height": dimensionsPxToRem(116),
-    "padding": `0 ${dimensionsPxToRem(42)}`,
-    "boxSizing": "border-box",
-    "width": "100%",
-    "minWidth": dimensionsPxToRem(460),
-    "textAlign": "left",
-    "color": "$popText",
-    "fontSize": fontPxToRem(26),
-    "fontWeight": "revert",
-    "display": "flex",
-    "alignItems": "center",
-    "&:hover": {
-        background: "$activeBg",
-    },
+const Button = styled("button", rippleHostStyles, {
+    border: "none",
+    background: "$background",
+    height: dimensionsPxToRem(116),
+    padding: `0 ${dimensionsPxToRem(42)}`,
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: dimensionsPxToRem(460),
+    textAlign: "left",
+    color: "$popText",
+    fontSize: fontPxToRem(26),
+    fontWeight: "revert",
+    display: "flex",
+    alignItems: "center",
 });
 const Icon = styled("div", {
     fill: "currentColor",

package/esm/components/ui/pop/Pop.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pop.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExE,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,WAAW;IACvB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACZ,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE;IACtB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,aAAa,EAAE,MAAM;CACxB,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE;IAC1B,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,eAAe,EAAE,MAAM;IAEvB,OAAO,EAAE;QACL,SAAS,EAAE,mBAAmB;KACjC;CACJ,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,aAAa;IAC3B,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,SAAS,EAAE,KAAK,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACvC,WAAW,EAAE,YAAY;IACzB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAClC,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,YAAY,EAAE,QAAQ;IACtB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IAEtB,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;CACJ,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE;IACvB,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE;IAC5B,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAEH,OAAO,EACH,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACX,CAAC"}
+{"version":3,"file":"Pop.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/Pop.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,WAAW;IACvB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACZ,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE;IACtB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,aAAa,EAAE,MAAM;CACxB,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE;IAC1B,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,eAAe,EAAE,MAAM;IAEvB,OAAO,EAAE;QACL,SAAS,EAAE,mBAAmB;KACjC;CACJ,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE,gBAAgB,EAAE;IAC9C,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAC9B,OAAO,EAAE,KAAK,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACrC,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,iBAAiB,CAAC,GAAG,CAAC;IAChC,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE;IACvB,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE;IAC5B,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,iBAAiB,CAAC,EAAE,CAAC;CACrC,CAAC,CAAC;AAEH,OAAO,EACH,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACX,CAAC"}

package/esm/components/ui/pop/PopOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,6EAUb,CAAC;AAKH,QAAA,MAAM,uBAAuB,QAAoB,CAAC;AAClD,QAAA,MAAM,qBAAqB,QAAkB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,6EAqBb,CAAC;AAKH,QAAA,MAAM,uBAAuB,QAAoB,CAAC;AAClD,QAAA,MAAM,qBAAqB,QAAkB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAC"}

package/esm/components/ui/pop/PopOption.js

@@ -1,14 +1,19 @@
 import React, { forwardRef } from "react";
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+import { useRipple } from "../../../utils/useRipple.js";
 import { Button, FakeIcon, Icon, ListItem } from "./Pop.styled.js";
 const PopOption = forwardRef((props, ref) => {
     var _a;
+    const buttonRef = useForwardedRef(null);
+    const ripple = useRipple({ ref: buttonRef });
     const ic = props.icon
         ? React.createElement(Icon, null, props.icon)
         : (((_a = props.forceEmptyIcon) !== null && _a !== void 0 ? _a : true) ? React.createElement(FakeIcon, null) : null);
     return (React.createElement(ListItem, { ref: ref, className: props.className },
-        React.createElement(Button, { onClick: props.onClick },
+        React.createElement(Button, { ref: buttonRef, onClick: props.onClick, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown },
             ic,
-            props.children)));
+            props.children,
+            ripple.ripples)));
 });
 PopOption.displayName = "PopOption";
 PopOption.toString = () => ListItem.toString();

package/esm/components/ui/pop/PopOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUhE,MAAM,SAAS,GAAG,UAAU,CAAuB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;;IAC9D,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ;QAC3B,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,oBAAC,QAAQ,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7D,OAAO,CACH,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1C,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CACtD,CACd,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;AAE/C,MAAM,uBAAuB,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;AAClD,MAAM,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUhE,MAAM,SAAS,GAAG,UAAU,CAAuB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;;IAC9D,MAAM,SAAS,GAAG,eAAe,CAA2B,IAAI,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;IAE7C,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ;QAC3B,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,oBAAC,QAAQ,OAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7D,OAAO,CACH,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1C,oBAAC,MAAM,IACH,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS;YAE1B,EAAE;YAAE,KAAK,CAAC,QAAQ;YAClB,MAAM,CAAC,OAAO,CACV,CACF,CACd,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,SAAS,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;AAE/C,MAAM,uBAAuB,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;AAClD,MAAM,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,CAAC"}

package/esm/components/ui/toolButton/ToolButton.d.ts

@@ -1,2 +1,95 @@
-export { ToolButton } from "./ToolButton.styled";
+import React from "react";
+declare const ToolButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "css" | "inline" | "variant"> & import("../../../../node_modules/@stitches/react/types/styled-component").TransformProps<{
+    inline?: boolean | "true";
+    variant?: "secondary" | "secondaryOnLight";
+}, {}> & {
+    css?: 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;
+        };
+    }>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ToolButton, };
 //# sourceMappingURL=ToolButton.d.ts.map

package/esm/components/ui/toolButton/ToolButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAS1C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAgBd,CAAC;AAKH,OAAO,EACH,UAAU,GACb,CAAC"}

package/esm/components/ui/toolButton/ToolButton.js

@@ -1,2 +1,16 @@
-export { ToolButton } from "./ToolButton.styled.js";
+import React, { forwardRef } from "react";
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+import { useRipple } from "../../../utils/useRipple.js";
+import { StyledToolButton } from "./ToolButton.styled.js";
+const ToolButton = forwardRef((props, ref) => {
+    const { children, onPointerDown, onKeyDown, ...rest } = props;
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, onPointerDown, onKeyDown });
+    return (React.createElement(StyledToolButton, { ref: innerRef, onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown, ...rest },
+        children,
+        ripple.ripples));
+});
+ToolButton.displayName = "ToolButton";
+ToolButton.toString = () => StyledToolButton.toString();
+export { ToolButton, };
 //# sourceMappingURL=ToolButton.js.map

package/esm/components/ui/toolButton/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"ToolButton.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,MAAM,UAAU,GAAG,UAAU,CAA2B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;IAEtE,OAAO,CACH,oBAAC,gBAAgB,IACb,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,SAAS,EAAE,MAAM,CAAC,SAAS,KACvB,IAAI;QAEP,QAAQ;QACR,MAAM,CAAC,OAAO,CACA,CACtB,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AACtC,UAAU,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;AAExD,OAAO,EACH,UAAU,GACb,CAAC"}

package/esm/components/ui/toolButton/ToolButton.styled.d.ts

@@ -1,4 +1,4 @@
-declare const ToolButton: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"button", {
+declare const StyledToolButton: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"button", {
     inline?: boolean | "true";
     variant?: "secondary" | "secondaryOnLight";
 }, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
@@ -86,5 +86,5 @@ declare const ToolButton: import("../../../../node_modules/@stitches/react/types
         height: string | number;
     };
 }>>;
-export { ToolButton, };
+export { StyledToolButton, };
 //# sourceMappingURL=ToolButton.styled.d.ts.map

package/esm/components/ui/toolButton/ToolButton.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8Cd,CAAC;AAEH,OAAO,EACH,UAAU,GACb,CAAC"}
+{"version":3,"file":"ToolButton.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCpB,CAAC;AAEH,OAAO,EACH,gBAAgB,GACnB,CAAC"}

package/esm/components/ui/toolButton/ToolButton.styled.js

@@ -1,21 +1,19 @@
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
-const ToolButton = styled("button", {
-    "height": dimensionsPxToRem(79),
-    "borderRadius": dimensionsPxToRem(10),
-    "fontWeight": "bold",
-    "fontSize": fontPxToRem(23),
-    "display": "flex",
-    "alignItems": "center",
-    "justifyContent": "center",
-    "paddingInline": dimensionsPxToRem(16),
-    "background": "white",
-    "boxSizing": "border-box",
-    "border": `${dimensionsPxToRem(6)} solid transparent`,
-    "color": "$toolButtonText",
-    "&:hover": {
-        background: "#ffffffcc",
-    },
-    "variants": {
+import { rippleHostStyles } from "../../../utils/useRipple.styled.js";
+const StyledToolButton = styled("button", rippleHostStyles, {
+    height: dimensionsPxToRem(79),
+    borderRadius: dimensionsPxToRem(10),
+    fontWeight: "bold",
+    fontSize: fontPxToRem(23),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingInline: dimensionsPxToRem(16),
+    background: "white",
+    boxSizing: "border-box",
+    border: `${dimensionsPxToRem(6)} solid transparent`,
+    color: "$toolButtonText",
+    variants: {
         inline: {
             true: {
                 width: "auto",
@@ -24,12 +22,9 @@ const ToolButton = styled("button", {
         },
         variant: {
             secondary: {
-                "border": `${dimensionsPxToRem(6)} solid #ffffff42`,
-                "background": "none",
-                "&:hover": {
-                    background: "#ffffff22",
-                },
-                "color": "white",
+                border: `${dimensionsPxToRem(6)} solid #ffffff42`,
+                background: "none",
+                color: "white",
             },
             secondaryOnLight: {
                 "border": `${dimensionsPxToRem(6)} solid $border`,
@@ -42,5 +37,5 @@ const ToolButton = styled("button", {
         },
     },
 });
-export { ToolButton, };
+export { StyledToolButton, };
 //# sourceMappingURL=ToolButton.styled.js.map

package/esm/components/ui/toolButton/ToolButton.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKxE,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,EAAE;IAChC,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAC/B,cAAc,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,eAAe,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACtC,YAAY,EAAE,OAAO;IACrB,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,oBAAoB;IAErD,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;IAED,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,SAAS,EAAE;gBACP,QAAQ,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;gBACnD,YAAY,EAAE,MAAM;gBAEpB,SAAS,EAAE;oBACP,UAAU,EAAE,WAAW;iBAC1B;gBACD,OAAO,EAAE,OAAO;aACnB;YACD,gBAAgB,EAAE;gBACd,QAAQ,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,gBAAgB;gBACjD,YAAY,EAAE,MAAM;gBACpB,OAAO,EAAE,OAAO;gBAEhB,SAAS,EAAE;oBACP,WAAW,EAAE,eAAe;iBAC/B;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,UAAU,GACb,CAAC"}
+{"version":3,"file":"ToolButton.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,EAAE,gBAAgB,EAAE;IACxD,MAAM,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAC7B,YAAY,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACnC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,aAAa,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACpC,UAAU,EAAE,OAAO;IACnB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,oBAAoB;IACnD,KAAK,EAAE,iBAAiB;IAExB,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,SAAS,EAAE;gBACP,MAAM,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;gBACjD,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,OAAO;aACjB;YACD,gBAAgB,EAAE;gBACd,QAAQ,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,gBAAgB;gBACjD,YAAY,EAAE,MAAM;gBACpB,OAAO,EAAE,OAAO;gBAGhB,SAAS,EAAE;oBACP,WAAW,EAAE,eAAe;iBAC/B;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,gBAAgB,GACnB,CAAC"}

package/esm/theme.css-global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css-global.d.ts","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB,cAYtB,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}
+{"version":3,"file":"theme.css-global.d.ts","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB,cAWtB,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}

package/esm/theme.css-global.js

@@ -6,7 +6,6 @@ const injectGlobalStyles = globalCss({
     "*:focus-visible:focus-visible": {
         outline: "none !important",
         borderColor: "$focusColor",
-        backgroundColor: "var(--focus-bg-set)",
     },
     "body": {
         color: "$text",

package/esm/theme.css-global.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css-global.js","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,kBAAkB,GAAG,SAAS,CAAC;IACjC,SAAS,EAAE;QACP,OAAO,EAAE,iBAAiB;KAC7B;IACD,+BAA+B,EAAE;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,WAAW,EAAE,aAAa;QAC1B,eAAe,EAAE,qBAAqB;KACzC;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,OAAO;KACjB;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}
+{"version":3,"file":"theme.css-global.js","sourceRoot":"","sources":["../src/theme.css-global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,kBAAkB,GAAG,SAAS,CAAC;IACjC,SAAS,EAAE;QACP,OAAO,EAAE,iBAAiB;KAC7B;IACD,+BAA+B,EAAE;QAC7B,OAAO,EAAE,iBAAiB;QAC1B,WAAW,EAAE,aAAa;KAC7B;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,OAAO;KACjB;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,kBAAkB,GACrB,CAAC"}

package/esm/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./toObjectValue";
 export * from "./useKeyPress";
+export * from "./useNativeValidity";
 export * from "./useTailSpin";
 //# sourceMappingURL=index.d.ts.map

package/esm/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}

package/esm/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./toObjectValue.js";
 export * from "./useKeyPress.js";
+export * from "./useNativeValidity.js";
 export * from "./useTailSpin.js";
 //# sourceMappingURL=index.js.map

package/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}

package/esm/utils/useNativeValidity.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+interface UseNativeValidityResult {
+    finalError: boolean;
+    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onInvalid: () => void;
+    revalidate: (input: HTMLInputElement | null) => void;
+}
+declare const useNativeValidity: (error: boolean | undefined) => UseNativeValidityResult;
+export { useNativeValidity };
+//# sourceMappingURL=useNativeValidity.d.ts.map

package/esm/utils/useNativeValidity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeValidity.d.ts","sourceRoot":"","sources":["../../src/utils/useNativeValidity.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,uBAAuB;IAE7B,UAAU,EAAE,OAAO,CAAC;IAEpB,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAExD,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE3D,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,UAAU,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD;AASD,QAAA,MAAM,iBAAiB,GAAI,OAAO,OAAO,GAAG,SAAS,KAAG,uBA8BvD,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/utils/useNativeValidity.js

@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+const useNativeValidity = (error) => {
+    const [nativeInvalid, setNativeInvalid] = useState(false);
+    const onBlur = useCallback((e) => {
+        setNativeInvalid(!e.currentTarget.checkValidity());
+    }, []);
+    const onChange = useCallback((e) => {
+        if (e.currentTarget.checkValidity()) {
+            setNativeInvalid(false);
+        }
+    }, []);
+    const onInvalid = useCallback(() => {
+        setNativeInvalid(true);
+    }, []);
+    const revalidate = useCallback((input) => {
+        if (input === null || input === void 0 ? void 0 : input.checkValidity()) {
+            setNativeInvalid(false);
+        }
+    }, []);
+    return {
+        finalError: Boolean(error) || nativeInvalid,
+        onBlur,
+        onChange,
+        onInvalid,
+        revalidate,
+    };
+};
+export { useNativeValidity };
+//# sourceMappingURL=useNativeValidity.js.map

package/esm/utils/useNativeValidity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeValidity.js","sourceRoot":"","sources":["../../src/utils/useNativeValidity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAwB9C,MAAM,iBAAiB,GAAG,CAAC,KAA0B,EAA2B,EAAE;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACjE,gBAAgB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,aAAa,EAAE,CAAC,CAAC;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QACpE,IAAI,CAAC,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,CAAC;YAClC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,KAA8B,EAAE,EAAE;QAC9D,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,EAAE,EAAE,CAAC;YACzB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACH,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,aAAa;QAC3C,MAAM;QACN,QAAQ;QACR,SAAS;QACT,UAAU;KACb,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/utils/useRipple.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type UseRippleArgs<T extends HTMLElement> = {
+    ref: React.RefObject<T | null>;
+    onPointerDown?: React.PointerEventHandler<T> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<T> | undefined;
+    fromCenter?: boolean | undefined;
+};
+type UseRippleResult<T extends HTMLElement> = {
+    onPointerDown: React.PointerEventHandler<T>;
+    onKeyDown: React.KeyboardEventHandler<T>;
+    ripples: React.ReactNode;
+};
+declare const useRipple: <T extends HTMLElement>(args: UseRippleArgs<T>) => UseRippleResult<T>;
+export { useRipple };
+//# sourceMappingURL=useRipple.d.ts.map

package/esm/utils/useRipple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.d.ts","sourceRoot":"","sources":["../../src/utils/useRipple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAmC7D,KAAK,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI;IACxC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IACzD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAKtD,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI;IAC1C,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAC5C,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAYF,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,MAAM,aAAa,CAAC,CAAC,CAAC,KAAG,eAAe,CAAC,CAAC,CA0EnF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/utils/useRipple.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useRef, useState } from "react";
+const HALF = 2;
+const RIPPLE_SPEED_PX_PER_MS = 1.5;
+const RIPPLE_MIN_DURATION_MS = 250;
+const prefersReducedMotion = () => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+const isDisabled = (el) => {
+    if ("disabled" in el && el.disabled) {
+        return true;
+    }
+    return el.getAttribute("aria-disabled") === "true";
+};
+const isRippleDisabledByCssVar = (el) => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.getComputedStyle(el).getPropertyValue("--miui-ripple").trim() === "0";
+};
+const useRipple = (args) => {
+    const { ref, onPointerDown, onKeyDown, fromCenter = false } = args;
+    const [ripples, setRipples] = useState([]);
+    const idCounter = useRef(0);
+    const addRippleAt = useCallback((clientX, clientY) => {
+        const el = ref.current;
+        if (!el || isDisabled(el) || prefersReducedMotion() || isRippleDisabledByCssVar(el)) {
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        const maxX = Math.max(x, rect.width - x);
+        const maxY = Math.max(y, rect.height - y);
+        const size = Math.hypot(maxX, maxY) * HALF;
+        const duration = Math.max(RIPPLE_MIN_DURATION_MS, size / RIPPLE_SPEED_PX_PER_MS);
+        idCounter.current += 1;
+        const id = idCounter.current;
+        setRipples((arr) => [...arr, { id, x, y, size, duration }]);
+    }, [ref]);
+    const handlePointerDown = useCallback((evt) => {
+        if (fromCenter) {
+            const el = ref.current;
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                addRippleAt(rect.left + (rect.width / HALF), rect.top + (rect.height / HALF));
+            }
+        }
+        else {
+            addRippleAt(evt.clientX, evt.clientY);
+        }
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(evt);
+    }, [addRippleAt, onPointerDown, fromCenter, ref]);
+    const handleKeyDown = useCallback((evt) => {
+        if (!evt.repeat && (evt.key === "Enter" || evt.key === " ")) {
+            const el = ref.current;
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                addRippleAt(rect.left + (rect.width / HALF), rect.top + (rect.height / HALF));
+            }
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
+    }, [addRippleAt, ref, onKeyDown]);
+    const handleAnimationEnd = useCallback((evt) => {
+        const id = Number(evt.currentTarget.dataset.rippleId);
+        setRipples((arr) => arr.filter((r) => r.id !== id));
+    }, []);
+    const elements = ripples.map((r) => (React.createElement("span", { key: r.id, "data-miui-ripple": true, "data-ripple-id": r.id, "aria-hidden": true, style: {
+            left: `${String(r.x - (r.size / HALF))}px`,
+            top: `${String(r.y - (r.size / HALF))}px`,
+            width: `${String(r.size)}px`,
+            height: `${String(r.size)}px`,
+            animationDuration: `${String(r.duration)}ms`,
+        }, onAnimationEnd: handleAnimationEnd })));
+    return {
+        onPointerDown: handlePointerDown,
+        onKeyDown: handleKeyDown,
+        ripples: elements,
+    };
+};
+export { useRipple };
+//# sourceMappingURL=useRipple.js.map

package/esm/utils/useRipple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.js","sourceRoot":"","sources":["../../src/utils/useRipple.tsx"],"names":[],"mappings":"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"}

package/esm/utils/useRipple.styled.d.ts

@@ -0,0 +1,28 @@
+declare const rippleHostStyles: {
+    position: string;
+    overflow: string;
+    WebkitTapHighlightColor: string;
+    transition: string;
+    "&:where(a, button):hover:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: string;
+    };
+    "&:where(a, button):active:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: string;
+    };
+    "@media (prefers-reduced-motion: reduce)": {
+        transition: string;
+    };
+    "& > span[data-miui-ripple]": {
+        position: string;
+        pointerEvents: string;
+        borderRadius: string;
+        backgroundColor: string;
+        transform: string;
+        opacity: number;
+        animationName: string;
+        animationTimingFunction: string;
+        animationFillMode: string;
+    };
+};
+export { rippleHostStyles, };
+//# sourceMappingURL=useRipple.styled.d.ts.map

package/esm/utils/useRipple.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.styled.d.ts","sourceRoot":"","sources":["../../src/utils/useRipple.styled.ts"],"names":[],"mappings":"AAkBA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAiCrB,CAAC;AAEF,OAAO,EACH,gBAAgB,GACnB,CAAC"}

package/esm/utils/useRipple.styled.js

@@ -0,0 +1,33 @@
+import { keyframes } from "../theme.js";
+const rippleKeyframes = keyframes({
+    "0%": { transform: "scale(0)", opacity: 0.35 },
+    "100%": { transform: "scale(1)", opacity: 0 },
+});
+const rippleHostStyles = {
+    "position": "relative",
+    "overflow": "hidden",
+    "WebkitTapHighlightColor": "transparent",
+    "transition": "box-shadow 150ms ease-out",
+    "&:where(a, button):hover:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: "inset 0 0 0 9999px color-mix(in srgb, currentColor calc(6% * var(--miui-ripple, 1)), transparent)",
+    },
+    "&:where(a, button):active:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: "inset 0 0 0 9999px color-mix(in srgb, currentColor calc(12% * var(--miui-ripple, 1)), transparent)",
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+        transition: "none",
+    },
+    "& > span[data-miui-ripple]": {
+        position: "absolute",
+        pointerEvents: "none",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        transform: "scale(0)",
+        opacity: 0,
+        animationName: String(rippleKeyframes),
+        animationTimingFunction: "ease-out",
+        animationFillMode: "forwards",
+    },
+};
+export { rippleHostStyles, };
+//# sourceMappingURL=useRipple.styled.js.map

package/esm/utils/useRipple.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.styled.js","sourceRoot":"","sources":["../../src/utils/useRipple.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,eAAe,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE;IAC9C,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE;CAChD,CAAC,CAAC;AAaH,MAAM,gBAAgB,GAAG;IACrB,UAAU,EAAE,UAAU;IACtB,UAAU,EAAE,QAAQ;IACpB,yBAAyB,EAAE,aAAa;IACxC,YAAY,EAAE,2BAA2B;IAOzC,qEAAqE,EAAE;QACnE,SAAS,EAAE,mGAAmG;KACjH;IACD,sEAAsE,EAAE;QACpE,SAAS,EAAE,oGAAoG;KAClH;IAED,yCAAyC,EAAE;QACvC,UAAU,EAAE,MAAM;KACrB;IAED,4BAA4B,EAAE;QAC1B,QAAQ,EAAE,UAAU;QACpB,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,cAAc;QAC/B,SAAS,EAAE,UAAU;QACrB,OAAO,EAAE,CAAC;QACV,aAAa,EAAE,MAAM,CAAC,eAAe,CAAC;QACtC,uBAAuB,EAAE,UAAU;QACnC,iBAAiB,EAAE,UAAU;KAChC;CACJ,CAAC;AAEF,OAAO,EACH,gBAAgB,GACnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {

package/src/components/form/index.ts

@@ -1 +1,2 @@
 export * from "./input/Input";
+export * from "./timepicker/TimePicker";