@lets-events/react 11.8.1 → 12.1.0

package/src/components/TextareaField.tsx

@@ -1,128 +1,128 @@
-import { TextArea as TextAreaRadix, Flex, Box } from "@radix-ui/themes";
-import { styled } from "../styles";
-import React, { ComponentProps, useRef } 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",
-  },
-});
-
-export type TextareaFieldProps = Omit<
-  ComponentProps<typeof TextareaFieldStyle>,
-  "color"
-> &
-  ComponentProps<typeof TextareaContainer>;
-
-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 const TextareaField = React.forwardRef<
-  HTMLTextAreaElement,
-  TextareaFieldProps
->(({ maxLength, color, ...props }, fowardedRef) => {
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const badgeRef = useRef<HTMLSpanElement>(null);
-
-  const updateCharCountBadge = () => {
-    if (!maxLength || !badgeRef.current) return;
-    const remainingChars = maxLength - (inputRef?.current?.value.length ?? 0);
-    badgeRef.current.textContent = String(remainingChars);
-  };
-
-  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    updateCharCountBadge();
-    props.onInput?.(e);
-  };
-
-  return (
-    <TextareaContainer color={color}>
-      <TextareaFieldStyle
-        rows={4}
-        ref={(r) => {
-          if (!r) return;
-          inputRef.current = r;
-          if (fowardedRef) {
-            if (typeof fowardedRef === "function") fowardedRef(r);
-            else {
-              fowardedRef.current = r;
-            }
-          }
-        }}
-        onInput={handleInput}
-        maxLength={maxLength}
-        {...props}
-      />
-      {maxLength && (
-        <TextareaLimitIndicator>
-          <Text typography={"badgeMedium"} ref={badgeRef}>
-            {maxLength}
-          </Text>
-        </TextareaLimitIndicator>
-      )}
-    </TextareaContainer>
-  );
-});
+import { TextArea as TextAreaRadix, Flex, Box } from "@radix-ui/themes";
+import { styled } from "../styles";
+import React, { ComponentProps, useRef } 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",
+  },
+});
+
+export type TextareaFieldProps = Omit<
+  ComponentProps<typeof TextareaFieldStyle>,
+  "color"
+> &
+  ComponentProps<typeof TextareaContainer>;
+
+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 const TextareaField = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaFieldProps
+>(({ maxLength, color, ...props }, fowardedRef) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const badgeRef = useRef<HTMLSpanElement>(null);
+
+  const updateCharCountBadge = () => {
+    if (!maxLength || !badgeRef.current) return;
+    const remainingChars = maxLength - (inputRef?.current?.value.length ?? 0);
+    badgeRef.current.textContent = String(remainingChars);
+  };
+
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    updateCharCountBadge();
+    props.onInput?.(e);
+  };
+
+  return (
+    <TextareaContainer color={color}>
+      <TextareaFieldStyle
+        rows={4}
+        ref={(r) => {
+          if (!r) return;
+          inputRef.current = r;
+          if (fowardedRef) {
+            if (typeof fowardedRef === "function") fowardedRef(r);
+            else {
+              fowardedRef.current = r;
+            }
+          }
+        }}
+        onInput={handleInput}
+        maxLength={maxLength}
+        {...props}
+      />
+      {maxLength && (
+        <TextareaLimitIndicator>
+          <Text typography={"badgeMedium"} ref={badgeRef}>
+            {maxLength}
+          </Text>
+        </TextareaLimitIndicator>
+      )}
+    </TextareaContainer>
+  );
+});