react-miui 0.27.2 → 0.27.4

package/esm/components/form/textarea/TextArea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE,EAAE;CACX,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,QAAQ;IACnB,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;KAChC;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,WAAW,EAAE,qBAAqB;KACrC;CACJ,CAAC;AAEF,OAAO,EACH,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/components/form/textarea/TextArea.styled.d.ts

@@ -2,6 +2,7 @@ declare const StyledTextArea: import("@stitches/react/types/styled-component").S
     disabled?: boolean | "true";
     readOnly?: boolean | "true";
     focused?: boolean | "true";
+    error?: boolean | "true";
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {
     colors: {
         background: string;

package/esm/components/form/textarea/TextArea.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUlB,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}
+{"version":3,"file":"TextArea.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GASlB,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}

package/esm/components/form/textarea/TextArea.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styled.js","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,EAAE;IACtC,GAAG,cAAc;IACjB,GAAG,KAAK;IACR,GAAG,OAAO;IAEV,OAAO,EAAE,SAAS,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACzC,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,UAAU;IAClB,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC;CAEpC,CAAC,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}
+{"version":3,"file":"TextArea.styled.js","sourceRoot":"","sources":["../../../../src/components/form/textarea/TextArea.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,EAAE;IACtC,GAAG,cAAc;IACjB,GAAG,KAAK;IACR,GAAG,OAAO;IAEV,OAAO,EAAE,SAAS,iBAAiB,CAAC,EAAE,CAAC,EAAE;IACzC,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,UAAU;IAClB,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC;CACpC,CAAC,CAAC;AAEH,OAAO,EACH,cAAc,GACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.27.2",
+  "version": "0.27.4",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

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

@@ -39,6 +39,11 @@ const meta: Meta = {
                 type: "boolean",
             },
         },
+        error: {
+            control: {
+                type: "boolean",
+            },
+        },
         onChange: {
             action: "onChange",
         },

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

@@ -45,11 +45,18 @@ const CheckmarkWrapper = styled("div", {
         },
     },
 
-    ":readonly + &": {
+    "[readonly] + &": {
         [`+ ${TextLabel.toString()}`]: {
             color: "$inputDisabledText",
         },
     },
+
+    "[data-error=true] + &": {
+        borderColor: "$pinky2",
+        [`+ ${TextLabel.toString()}`]: {
+            color: "$red1",
+        },
+    },
 });
 
 const LabelWrapper = styled("label", {

package/src/components/form/Checkbox.tsx

@@ -15,6 +15,7 @@ interface Props extends Partial<Pick<WrapperProps, "css" | "className">>, Omit<I
      */
     color?: string;
     children: React.ReactNode;
+    error?: boolean;
 }
 
 /**
@@ -22,7 +23,7 @@ interface Props extends Partial<Pick<WrapperProps, "css" | "className">>, Omit<I
  */
 const Checkbox: React.FC<Props> = ({
     // eslint-disable-next-line @typescript-eslint/no-shadow
-    color, name, onChange, children, css, className, ...inputProps
+    color, error, name, onChange, children, css, className, ...inputProps
 }) => {
     const style: ThemeCSS = {};
     color && (style["--color"] = color);
@@ -47,6 +48,7 @@ const Checkbox: React.FC<Props> = ({
                 type={"checkbox"}
                 name={name}
                 onChange={handleChange}
+                data-error={error}
                 {...inputProps}
             />
             <CheckmarkWrapper css={style}><Checkmark /></CheckmarkWrapper>

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

@@ -8,6 +8,10 @@ const meta: Meta = {
     title: "Components/Form/Select",
     component: Select,
     tags: ["autodocs", "form"],
+    argTypes: {
+        error: { type: "boolean" },
+        disabled: { type: "boolean" },
+    },
 };
 
 type Story = StoryObj<typeof Select>;

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

@@ -1,5 +1,7 @@
 import { borderPxToRem, dimensionsPxToRem, pxToRem, styled } from "../../theme";
 
+import { errorCSS, focusCSS } from "./input/Input.css";
+
 const Select = styled("select", {
     "boxSizing": "border-box",
     "height": dimensionsPxToRem(103),
@@ -14,10 +16,18 @@ const Select = styled("select", {
     "border": `${borderPxToRem(1)} solid $border`,
     "appearance": "auto",
 
-    "&:disabled": {
+    "&:where(:disabled)": {
         background: "$inputDisabledBg",
         color: "$inputDisabledText",
     },
+
+    "&:focus": focusCSS,
+
+    "variants": {
+        error: {
+            true: errorCSS,
+        },
+    },
 });
 
 export {

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

@@ -24,6 +24,15 @@ const input = {
 };
 // satisfies ThemeCSS; @TODO restore
 
+const focusCSS = {
+    borderColor: "$focusColor",
+};
+
+const errorCSS = {
+    borderColor: "$pinky2",
+    color: "$red1",
+};
+
 const wrapper = {
     background: "white",
     display: "inline-flex",
@@ -46,8 +55,11 @@ const wrapper = {
             },
         },
         focused: {
+            true: focusCSS,
+        },
+        error: {
             true: {
-                borderColor: "$focusColor",
+                "&": errorCSS,
             },
         },
     },
@@ -57,4 +69,6 @@ const wrapper = {
 export {
     input,
     wrapper,
+    focusCSS,
+    errorCSS,
 };

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

@@ -12,12 +12,11 @@ const meta: Meta<typeof Input> = {
     component: Input,
     tags: ["autodocs", "form"],
     argTypes: {
-        prefix: {
-            type: "string",
-        },
-        suffix: {
-            type: "string",
-        },
+        error: { type: "boolean" },
+        disabled: { type: "boolean" },
+        readOnly: { type: "boolean" },
+        prefix: { type: "string" },
+        suffix: { type: "string" },
     },
 };
 

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

@@ -12,6 +12,7 @@ interface CustomProps<T extends string> {
     children?: never;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    error?: boolean;
     suggestions?: Value<T>[];
     onSuggestionMatch?: (value: Exclude<Value<T>, ObjectValue>, __chromiumPickedFromList: boolean) => void;
 }
@@ -68,7 +69,7 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
         }
         info.picked = false;
         onChange?.(e);
-    }, [suggestions]);
+    }, [suggestions, onChange]);
 
     const prefixElem = prefix ? <StyledPrefix>{prefix}</StyledPrefix> : null;
     const suffixElem = suffix ? <StyledSuffix>{suffix}</StyledSuffix> : null;
@@ -84,6 +85,7 @@ const Input = <T extends string>({ // eslint-disable-line max-lines-per-function
             focused={Boolean(focused)}
             disabled={Boolean(props.disabled)}
             readOnly={Boolean(props.readOnly)}
+            error={Boolean(props.error)}
         >
             {prefixElem}
             <StyledInput

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

@@ -6,12 +6,19 @@ const meta: Meta = {
     title: "Components/Form/TextArea",
     component: TextArea,
     tags: ["autodocs", "form"],
+    argTypes: {
+        error: { type: "boolean" },
+        disabled: { type: "boolean" },
+        readOnly: { type: "boolean" },
+    },
 };
 
 type Story = StoryObj<typeof TextArea>;
 
 const Primary: Story = {
-    args: {},
+    args: {
+        placeholder: "Type something here",
+    },
 };
 
 export {

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

@@ -12,7 +12,6 @@ const StyledTextArea = styled("textarea", {
     height: "unset",
     resize: "vertical",
     minHeight: dimensionsPxToRem(103),
-
 });
 
 export {

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

@@ -4,6 +4,7 @@ import { StyledTextArea } from "./TextArea.styled";
 
 interface Props {
     children?: never;
+    error?: boolean;
 }
 
 const TextArea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement> & Props> = ({