@lets-events/react 12.2.6 → 12.2.7

package/src/components/TextareaField.tsx

@@ -1,127 +1,127 @@
-import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import { styled } from "../styles";
-import React, { ComponentProps, useRef, useState, useEffect } from "react";
-import { typographyValues } from "../types/typographyValues";
-import { Text } from "./Text";
-
-export const TextareaFieldStyle = styled(TextAreaRadix, {
-  display: "flex",
-  flex: 1,
-  textarea: {
-    width: "100%",
-    border: "none",
-    padding: "$12 $14",
-    fontFamily: "$default",
-    outline: "none",
-    resize: "vertical",
-    height: "auto",
-  },
-  variants: {
-    typography: typographyValues,
-  },
-  defaultVariants: {
-    typography: "labelSmall",
-  },
-});
-
-const TextareaContainer = styled("div", {
-  display: "flex",
-  flexDirection: "column",
-  overflow: "hidden",
-  width: "100%",
-  border: "1px solid",
-  borderRadius: "$sm",
-
-  "&:has(textarea:focus)": {
-    border: "1px solid $brand300",
-  },
-  "&:has(textarea:disabled)": {
-    backgroundColor: "$dark100",
-    color: "$dark400",
-    border: "1px solid $dark200",
-    cursor: "not-allowed",
-  },
-
-  variants: {
-    color: {
-      default: {
-        borderColor: "$dark300",
-      },
-      error: {
-        borderColor: "$error400",
-      },
-    },
-  },
-
-  defaultVariants: {
-    color: "default",
-  },
-});
-
-const TextareaLimitIndicator = styled("div", {
-  padding: "$12 $16",
-  borderTop: "1px solid $neutral300",
-  width: "100%",
-  flex: 1,
-  display: "flex",
-  backgroundColor: "$dark50",
-  span: {
-    backgroundColor: "$neutral200",
-    color: "$neutral700",
-    borderRadius: "$2xs",
-    padding: "$4",
-  },
-});
-
-export type TextareaFieldProps = Omit<
-  ComponentProps<typeof TextareaFieldStyle>,
-  "color"
-> &
-  ComponentProps<typeof TextareaContainer>;
-
-export const TextareaField = React.forwardRef<
-  HTMLTextAreaElement,
-  TextareaFieldProps
->(({ maxLength, color, ...props }, forwardedRef) => {
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [remaining, setRemaining] = useState(maxLength);
-
-  useEffect(() => {
-    if (maxLength && inputRef.current) {
-      setRemaining(maxLength - (inputRef.current.value.length ?? 0));
-    }
-  }, [maxLength]);
-
-  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    if (maxLength) {
-      setRemaining(maxLength - e.currentTarget.value.length);
-    }
-    props.onInput?.(e);
-  };
-
-  return (
-    <TextareaContainer color={color}>
-      <TextareaFieldStyle
-        rows={4}
-        ref={(r) => {
-          if (!r) return;
-          inputRef.current = r;
-          if (forwardedRef) {
-            if (typeof forwardedRef === "function") forwardedRef(r);
-            else forwardedRef.current = r;
-          }
-        }}
-        onInput={handleInput}
-        maxLength={maxLength}
-        {...props}
-      />
-      {maxLength && (
-        <TextareaLimitIndicator>
-          <Text typography="badgeMedium">
-            {remaining}
-          </Text>
-        </TextareaLimitIndicator>
-      )}
-    </TextareaContainer>
-  );
-});
+import { TextArea as TextAreaRadix } from "@radix-ui/themes";
+import { styled } from "../styles";
+import React, { ComponentProps, useRef, useState, useEffect } from "react";
+import { typographyValues } from "../types/typographyValues";
+import { Text } from "./Text";
+
+export const TextareaFieldStyle = styled(TextAreaRadix, {
+  display: "flex",
+  flex: 1,
+  textarea: {
+    width: "100%",
+    border: "none",
+    padding: "$12 $14",
+    fontFamily: "$default",
+    outline: "none",
+    resize: "vertical",
+    height: "auto",
+  },
+  variants: {
+    typography: typographyValues,
+  },
+  defaultVariants: {
+    typography: "labelSmall",
+  },
+});
+
+const TextareaContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  width: "100%",
+  border: "1px solid",
+  borderRadius: "$sm",
+
+  "&:has(textarea:focus)": {
+    border: "1px solid $brand300",
+  },
+  "&:has(textarea:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed",
+  },
+
+  variants: {
+    color: {
+      default: {
+        borderColor: "$dark300",
+      },
+      error: {
+        borderColor: "$error400",
+      },
+    },
+  },
+
+  defaultVariants: {
+    color: "default",
+  },
+});
+
+const TextareaLimitIndicator = styled("div", {
+  padding: "$12 $16",
+  borderTop: "1px solid $neutral300",
+  width: "100%",
+  flex: 1,
+  display: "flex",
+  backgroundColor: "$dark50",
+  span: {
+    backgroundColor: "$neutral200",
+    color: "$neutral700",
+    borderRadius: "$2xs",
+    padding: "$4",
+  },
+});
+
+export type TextareaFieldProps = Omit<
+  ComponentProps<typeof TextareaFieldStyle>,
+  "color"
+> &
+  ComponentProps<typeof TextareaContainer>;
+
+export const TextareaField = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaFieldProps
+>(({ maxLength, color, ...props }, forwardedRef) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [remaining, setRemaining] = useState(maxLength);
+
+  useEffect(() => {
+    if (maxLength && inputRef.current) {
+      setRemaining(maxLength - (inputRef.current.value.length ?? 0));
+    }
+  }, [maxLength]);
+
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    if (maxLength) {
+      setRemaining(maxLength - e.currentTarget.value.length);
+    }
+    props.onInput?.(e);
+  };
+
+  return (
+    <TextareaContainer color={color}>
+      <TextareaFieldStyle
+        rows={4}
+        ref={(r) => {
+          if (!r) return;
+          inputRef.current = r;
+          if (forwardedRef) {
+            if (typeof forwardedRef === "function") forwardedRef(r);
+            else forwardedRef.current = r;
+          }
+        }}
+        onInput={handleInput}
+        maxLength={maxLength}
+        {...props}
+      />
+      {maxLength && (
+        <TextareaLimitIndicator>
+          <Text typography="badgeMedium">
+            {remaining}
+          </Text>
+        </TextareaLimitIndicator>
+      )}
+    </TextareaContainer>
+  );
+});