react-miui 0.28.1 → 0.28.2

package/esm/components/form/input/Input.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAY5B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,QAAA,MAAM,OAAO,EAAE,KAMd,CAAC;AAMF,QAAA,MAAM,KAAK,EAAE,KAeZ,CAAC;AAEF,OAAO,EACH,OAAO,EAAE,KAAK,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input/Input.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAY5B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,QAAA,MAAM,OAAO,EAAE,KAMd,CAAC;AAMF,QAAA,MAAM,KAAK,EAAE,KAeZ,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAiBf,CAAC;AAEF,OAAO,EACH,OAAO,EAAE,KAAK,EAAE,QAAQ,GAC3B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/form/input/Input.stories.js

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Icon, ICON } from "../../icons/Icon.js";
 import { countries } from "../../../demo/components/form/countries.const.js";
+import { Button } from "../../ui/button/Button.js";
 import { Input } from "./Input.js";
 const meta = {
     title: "Components/Form/Input",
@@ -34,6 +35,19 @@ const Mixed = {
         React.createElement(Input, { prefix: "Read only", value: "Norma J. Gomez", readOnly: true }),
         React.createElement(Input, { placeholder: "With suggestions, try country name", suggestions: countries, onSuggestionMatch: handleSuggestionMatch }))),
 };
-export { Primary, Mixed, };
+const InputRef = {
+    render: () => {
+        const ref = React.useRef(null);
+        const handleRandomValue = useCallback(() => {
+            if (ref.current) {
+                ref.current.value = (Math.random() * 100).toFixed(2);
+            }
+        }, []);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Input, { ref: ref, placeholder: "Capacity", prefix: React.createElement(Icon, { name: ICON.battery }), suffix: "kWh" }),
+            React.createElement(Button, { onClick: handleRandomValue }, "Set random value")));
+    },
+};
+export { Primary, Mixed, InputRef, };
 export default meta;
 //# sourceMappingURL=Input.stories.js.map

package/esm/components/form/input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,+CAA+C,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,IAAI,GAAuB;IAC7B,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE;QACN,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAC1B,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAC7B,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAC7B,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC1B,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC1B,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;KACzC;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,WAAW,EAAE,UAAU;QACvB,MAAM,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAI;QACpC,MAAM,EAAE,KAAK;KAChB;CACJ,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,CAAS,EAAE,MAAe,EAAE,EAAE;IACzD,KAAK,CAAC,aAAa,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,KAAK,GAAU;IACjB,MAAM,EAAE,GAAG,EAAE,CAAC,CACV;QACI,oBAAC,KAAK,IAAC,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAI,EAAE,MAAM,EAAE,KAAK,GAAI;QACvF,oBAAC,KAAK,IAAC,KAAK,EAAE,mBAAmB,GAAI;QACrC,oBAAC,KAAK,IAAC,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,iBAAiB,GAAI;QAC1D,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,IAAI,GAAI;QACzE,oBAAC,KAAK,IAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,GAAI;QACvE,oBAAC,KAAK,IACF,WAAW,EAAE,oCAAoC,EACjD,WAAW,EAAE,SAAS,EACtB,iBAAiB,EAAE,qBAAqB,GAC1C,CACH,CACN;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,EAAE,KAAK,GACjB,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../src/components/form/input/Input.stories.tsx"],"names":[],"mappings":"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"}

package/esm/components/utils/Spacer.d.ts

@@ -1,6 +1,85 @@
-import React from "react";
-interface Props {
-}
-declare const Spacer: React.FC<Props>;
+declare const Spacer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@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";
+        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("@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 { Spacer };
 //# sourceMappingURL=Spacer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;CAAG;AAElB,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAE3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/utils/Spacer.js

@@ -1,7 +1,4 @@
-import React from "react";
-import styles from "./Spacer.module.scss";
-const Spacer = (props) => {
-    return React.createElement("div", { className: styles.spacer });
-};
+import { styled } from "../../theme.js";
+const Spacer = styled("div", { flex: 1 });
 export { Spacer };
 //# sourceMappingURL=Spacer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAI1C,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CAAC;AAC7C,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/components/utils/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/package.json

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

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

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import type { StoryObj, Meta } from "@storybook/react";
 
 import { Icon, ICON } from "../../icons/Icon";
 import { countries } from "../../../demo/components/form/countries.const";
+import { Button } from "../../ui/button/Button";
 
 import { Input } from "./Input";
 
@@ -52,8 +53,27 @@ const Mixed: Story = {
     ),
 };
 
+const InputRef: Story = {
+    render: () => {
+        const ref = React.useRef<HTMLInputElement>(null);
+
+        const handleRandomValue = useCallback(() => {
+            if (ref.current) {
+                ref.current.value = (Math.random() * 100).toFixed(2);
+            }
+        }, []);
+
+        return (
+            <>
+                <Input ref={ref} placeholder={"Capacity"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+                <Button onClick={handleRandomValue}>Set random value</Button>
+            </>
+        );
+    },
+};
+
 export {
-    Primary, Mixed,
+    Primary, Mixed, InputRef,
 };
 
 export default meta;

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

@@ -20,7 +20,7 @@ type Props<T extends string> = Omit<React.InputHTMLAttributes<HTMLInputElement>,
 /**
  * Input component.
  */
-const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
+const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-function
     className, children,
     prefix, suffix,
     onFocus, onBlur, onKeyDown, onChange,
@@ -28,7 +28,7 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
     onSuggestionMatch,
     error,
     ...props
-}: Props<T>): ReturnType<React.FC<Props<T>>> => {
+}: Props<T>, ref: React.Ref<HTMLInputElement>) => {
     const [focused, setFocused] = useState(false);
     const suggestionsId = useId();
     const [info] = useState<{ picked?: boolean }>({});
@@ -88,6 +88,7 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
         >
             {prefixElem}
             <StyledInput
+                ref={ref}
                 {...props}
                 {...extraProps}
                 onChange={handleChange}
@@ -102,6 +103,11 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
     );
 };
 
+// Forward ref wrapper for Input
+const Input = React.forwardRef(InputInner) as <T extends string>(
+    props: Props<T> & React.RefAttributes<HTMLInputElement>
+) => JSX.Element;
+
 export {
     Input,
 };

package/src/components/utils/Spacer.tsx

@@ -1,11 +1,5 @@
-import React from "react";
+import { styled } from "../../theme";
 
-import styles from "./Spacer.module.scss";
-
-interface Props {}
-
-const Spacer: React.FC<Props> = (props) => {
-    return <div className={styles.spacer} />;
-};
+const Spacer = styled("div", { flex: 1 });
 
 export { Spacer };

package/dist/components/utils/Spacer.module.scss

@@ -1,3 +0,0 @@
-.spacer {
-    flex: 1;
-}

package/esm/components/utils/Spacer.module.scss

@@ -1,3 +0,0 @@
-.spacer {
-    flex: 1;
-}

package/src/components/utils/Spacer.module.scss

@@ -1,3 +0,0 @@
-.spacer {
-    flex: 1;
-}