@lets-events/react 12.2.10 → 12.2.12

package/src/components/TextField.tsx

@@ -1,372 +1,372 @@
-import React, { ComponentProps, ReactNode } from "react";
-import { styled } from "../styles";
-import { TextField as TextFieldRadix } from "@radix-ui/themes";
-import Icon from "./Icon";
-import { typographyValues } from "../types/typographyValues";
-import { TextStyle } from "./Text";
-import { Flex } from "./Flex";
-import { format, MaskOptions, useMask, unformat } from "@react-input/mask";
-
-export const TextFieldStyled = styled(TextFieldRadix.Root, {
-  height: "$40",
-  fontFamily: "$default",
-  borderRadius: "$sm",
-  boxSizing: "border-box",
-  color: "$dark500",
-  border: "1px solid $dark300",
-  position: "relative",
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  padding: "0 $14",
-  gap: "$14",
-  backgroundColor: "$dark50",
-  input: {
-    order: 1,
-    outline: "none",
-    border: "none",
-    margin: 0,
-    width: "100%",
-    font: "inherit",
-    textAlign: "left",
-  },
-
-  "&:has(input:focus)": {
-    border: "2px solid $brand300",
-  },
-  "&:has(input:disabled)": {
-    backgroundColor: "$dark100",
-    color: "$dark400",
-    border: "1px solid $dark200",
-    cursor: "not-allowed",
-  },
-
-  variants: {
-    color: {
-      default: {
-        color: "$dark400",
-        border: "1px solid $dark300",
-        "&:has(input:focus)": {
-          border: "2px solid $brand300",
-        },
-        "&:has(input:disabled)": {
-          backgroundColor: "$dark100",
-          color: "$dark400",
-          border: "1px solid $dark300",
-          cursor: "not-allowed",
-        },
-      },
-      error: {
-        border: "1px solid $error400",
-        color: "$error400",
-        "input::placeholder": {
-          color: "$error400",
-        },
-        "&:has(input:focus)": {
-          border: "2px solid $error400",
-        },
-        "&:has(input:disabled)": {
-          backgroundColor: "$error50",
-          color: "$error300",
-          border: "1px solid $error100",
-          cursor: "not-allowed",
-        },
-      },
-    },
-
-    typography: typographyValues,
-    fontWeight: {
-      regular: { fontWeight: "$regular" },
-      medium: { fontWeight: "$medium" },
-      semibold: { fontWeight: "$semibold" },
-      bold: { fontWeight: "$bold" },
-    },
-    textAlign: {
-      left: { textAlign: "left" },
-      center: { textAlign: "center" },
-      right: { textAlign: "right" },
-    },
-    isValid: {
-      true: {},
-      false: {},
-    },
-  },
-
-  compoundVariants: [
-    {
-      isValid: false,
-      css: {
-        border: "1px solid $error400",
-        color: "$error400",
-        backgroundColor: "$error50",
-        input: {
-          "&::placeholder": {
-            color: "$error400",
-          },
-          backgroundColor: "$error50",
-        },
-        "&:has(input:focus)": {
-          border: "2px solid $error400",
-        },
-        "&:has(input:disabled)": {
-          input: {
-            backgroundColor: "$error50",
-          },
-          backgroundColor: "$error50",
-          color: "$error300",
-          border: "1px solid $error100",
-          cursor: "not-allowed",
-        },
-      },
-    },
-    {
-      isValid: true,
-      css: {
-        "&:has(input:focus)": {
-          border: "2px solid $success500",
-        },
-        "&:has(input:disabled)": {
-          backgroundColor: "$dark100",
-          color: "$dark400",
-          border: "1px solid $dark200",
-          cursor: "not-allowed",
-        },
-      },
-    },
-  ],
-
-  defaultVariants: {
-    typography: "labelSmall",
-  },
-});
-
-export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: 4,
-
-  variants: {
-    typography: typographyValues,
-    fontWeight: {
-      regular: { fontWeight: "$regular" },
-      medium: { fontWeight: "$medium" },
-      semibold: { fontWeight: "$semibold" },
-      bold: { fontWeight: "$bold" },
-    },
-    textAlign: {
-      left: { textAlign: "left" },
-      right: { textAlign: "right" },
-      center: { textAlign: "center" },
-    },
-  },
-});
-
-export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
-  addon?: ReactNode;
-  placeholder?: string;
-  children?: React.ReactNode;
-  isValid?: boolean;
-  name?: string;
-  maxLength?: number;
-  typography?: string;
-  fontWeight?: "regular" | "medium" | "semibold" | "bold";
-  textAlign?: "left" | "right" | "center";
-  mask?: MaskOptions;
-  hasError?: boolean;
-};
-
-export type TextFieldSlotProps = Omit<
-  ComponentProps<typeof TextFieldStyled>,
-  "color"
-> & {
-  placeholder?: string;
-  children?: React.ReactNode;
-  position?: "flex-start" | "flex-end";
-  onClick?: () => void;
-  color?: "error" | "success" | undefined;
-  typography?: string;
-  fontWeight?: "regular" | "medium" | "semibold" | "bold";
-  textAlign?: "left" | "right" | "center";
-};
-
-const InputAddon = styled(TextStyle, {
-  boxSizing: "border-box",
-  border: "1px solid $dark300",
-  height: "$40",
-  padding: "0  $12",
-  margin: "0 auto",
-
-  color: "$dark600",
-  whiteSpace: "nowrap",
-  borderRadius: "$sm 0px 0px $sm",
-  borderRightWidth: "0px",
-  display: "flex",
-  flexWrap: "nowrap",
-  alignItems: "center",
-  lineHeight: 1,
-
-  variants: {
-    color: {
-      default: {
-        borderColor: "$dark300",
-      },
-      error: {
-        borderColor: "$error400",
-      },
-    },
-  },
-});
-const TextFieldLimitIndicator = styled("div", {
-  width: "fit-content",
-  display: "flex",
-  justifyContent: "flex-end",
-  position: "absolute",
-  top: "0.5rem",
-  right: "1rem",
-  span: {
-    color: "$neutral700",
-    borderRadius: "$2xs",
-    padding: "$4",
-    fontSize: "$labelSmall",
-    backgroundColor: "$neutral200",
-    fontFamily: "$default",
-  },
-});
-export const maskFormat = format;
-export const maskUnformat = unformat;
-
-export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
-  (
-    {
-      children,
-      isValid,
-      name,
-      color,
-      typography,
-      fontWeight,
-      addon,
-      textAlign = "left",
-      mask,
-      maxLength,
-      hasError,
-      ...props
-    },
-    fowardedRef
-  ) => {
-    const maskRef = mask ? useMask(mask) : undefined;
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    const badgeRef = React.useRef<HTMLSpanElement>(null);
-
-    const updateCharCountBadge = () => {
-      if (!maxLength || !badgeRef.current) return;
-      const currentLength = inputRef.current?.value.length ?? 0;
-      badgeRef.current.textContent = String(maxLength - currentLength);
-    };
-
-    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-      updateCharCountBadge();
-      props.onInput?.(e);
-    };
-
-    return (
-      <Flex direction="column" css={{ width: "100%", position: "relative" }}>
-        <Flex gap={"0"} css={{ width: "100%" }}>
-          {!!addon && (
-            <InputAddon
-              color={hasError ? "error" : color}
-              typography="labelSmall"
-            >
-              {addon}
-            </InputAddon>
-          )}
-
-          <TextFieldStyled
-            color={hasError ? "error" : color || "default"}
-            isValid={isValid}
-            name={name}
-            typography={typography}
-            fontWeight={fontWeight}
-            textAlign={textAlign}
-            maxLength={maxLength}
-            ref={(r) => {
-              if (!r) return;
-              inputRef.current = r;
-              if (maskRef) maskRef.current = r;
-
-              if (fowardedRef) {
-                if (typeof fowardedRef === "function") fowardedRef(r);
-                else fowardedRef.current = r;
-              }
-            }}
-            onInput={handleInput}
-            {...props}
-            style={
-              addon
-                ? {
-                    borderTopLeftRadius: "0px",
-                    borderBottomLeftRadius: "0px",
-                  }
-                : undefined
-            }
-          >
-            {children}
-            {isValid && (
-              <TextFieldSlot
-                position="flex-end"
-                name={name}
-                color={
-                  (hasError ? "error" : color) as TextFieldSlotProps["color"]
-                }
-                typography={typography}
-                fontWeight={fontWeight}
-                textAlign={textAlign}
-              >
-                <Icon name="check" />
-              </TextFieldSlot>
-            )}
-          </TextFieldStyled>
-        </Flex>
-        {maxLength && (
-          <TextFieldLimitIndicator>
-            <span ref={badgeRef}>{maxLength}</span>
-          </TextFieldLimitIndicator>
-        )}
-      </Flex>
-    );
-  }
-);
-
-export function TextFieldSlot({
-  children,
-  position = "flex-start",
-  onClick,
-  typography = "bodyXS",
-  fontWeight = "regular",
-  textAlign = "right",
-  ...props
-}: TextFieldSlotProps) {
-  const sharedStyles = {
-    typography,
-    fontWeight,
-    textAlign,
-    ...props,
-    color: undefined,
-  };
-
-  return (
-    <TextFieldSlotStyled
-      {...sharedStyles}
-      style={{
-        float: position === "flex-start" ? "left" : "right",
-        order: position === "flex-start" ? 0 : 2,
-        textAlign,
-        zIndex: onClick ? 2 : undefined,
-        cursor: onClick ? "pointer" : undefined,
-      }}
-      onClick={onClick}
-    >
-      {children}
-    </TextFieldSlotStyled>
-  );
-}
+import React, { ComponentProps, ReactNode } from "react";
+import { styled } from "../styles";
+import { TextField as TextFieldRadix } from "@radix-ui/themes";
+import Icon from "./Icon";
+import { typographyValues } from "../types/typographyValues";
+import { TextStyle } from "./Text";
+import { Flex } from "./Flex";
+import { format, MaskOptions, useMask, unformat } from "@react-input/mask";
+
+export const TextFieldStyled = styled(TextFieldRadix.Root, {
+  height: "$40",
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  color: "$dark500",
+  border: "1px solid $dark300",
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  padding: "0 $14",
+  gap: "$14",
+  backgroundColor: "$dark50",
+  input: {
+    order: 1,
+    outline: "none",
+    border: "none",
+    margin: 0,
+    width: "100%",
+    font: "inherit",
+    textAlign: "left",
+  },
+
+  "&:has(input:focus)": {
+    border: "2px solid $brand300",
+  },
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed",
+  },
+
+  variants: {
+    color: {
+      default: {
+        color: "$dark400",
+        border: "1px solid $dark300",
+        "&:has(input:focus)": {
+          border: "2px solid $brand300",
+        },
+        "&:has(input:disabled)": {
+          backgroundColor: "$dark100",
+          color: "$dark400",
+          border: "1px solid $dark300",
+          cursor: "not-allowed",
+        },
+      },
+      error: {
+        border: "1px solid $error400",
+        color: "$error400",
+        "input::placeholder": {
+          color: "$error400",
+        },
+        "&:has(input:focus)": {
+          border: "2px solid $error400",
+        },
+        "&:has(input:disabled)": {
+          backgroundColor: "$error50",
+          color: "$error300",
+          border: "1px solid $error100",
+          cursor: "not-allowed",
+        },
+      },
+    },
+
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
+    },
+    textAlign: {
+      left: { textAlign: "left" },
+      center: { textAlign: "center" },
+      right: { textAlign: "right" },
+    },
+    isValid: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      isValid: false,
+      css: {
+        border: "1px solid $error400",
+        color: "$error400",
+        backgroundColor: "$error50",
+        input: {
+          "&::placeholder": {
+            color: "$error400",
+          },
+          backgroundColor: "$error50",
+        },
+        "&:has(input:focus)": {
+          border: "2px solid $error400",
+        },
+        "&:has(input:disabled)": {
+          input: {
+            backgroundColor: "$error50",
+          },
+          backgroundColor: "$error50",
+          color: "$error300",
+          border: "1px solid $error100",
+          cursor: "not-allowed",
+        },
+      },
+    },
+    {
+      isValid: true,
+      css: {
+        "&:has(input:focus)": {
+          border: "2px solid $success500",
+        },
+        "&:has(input:disabled)": {
+          backgroundColor: "$dark100",
+          color: "$dark400",
+          border: "1px solid $dark200",
+          cursor: "not-allowed",
+        },
+      },
+    },
+  ],
+
+  defaultVariants: {
+    typography: "labelSmall",
+  },
+});
+
+export const TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 4,
+
+  variants: {
+    typography: typographyValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
+    },
+    textAlign: {
+      left: { textAlign: "left" },
+      right: { textAlign: "right" },
+      center: { textAlign: "center" },
+    },
+  },
+});
+
+export type TextFieldProps = ComponentProps<typeof TextFieldStyled> & {
+  addon?: ReactNode;
+  placeholder?: string;
+  children?: React.ReactNode;
+  isValid?: boolean;
+  name?: string;
+  maxLength?: number;
+  typography?: string;
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: "left" | "right" | "center";
+  mask?: MaskOptions;
+  hasError?: boolean;
+};
+
+export type TextFieldSlotProps = Omit<
+  ComponentProps<typeof TextFieldStyled>,
+  "color"
+> & {
+  placeholder?: string;
+  children?: React.ReactNode;
+  position?: "flex-start" | "flex-end";
+  onClick?: () => void;
+  color?: "error" | "success" | undefined;
+  typography?: string;
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: "left" | "right" | "center";
+};
+
+const InputAddon = styled(TextStyle, {
+  boxSizing: "border-box",
+  border: "1px solid $dark300",
+  height: "$40",
+  padding: "0  $12",
+  margin: "0 auto",
+
+  color: "$dark600",
+  whiteSpace: "nowrap",
+  borderRadius: "$sm 0px 0px $sm",
+  borderRightWidth: "0px",
+  display: "flex",
+  flexWrap: "nowrap",
+  alignItems: "center",
+  lineHeight: 1,
+
+  variants: {
+    color: {
+      default: {
+        borderColor: "$dark300",
+      },
+      error: {
+        borderColor: "$error400",
+      },
+    },
+  },
+});
+const TextFieldLimitIndicator = styled("div", {
+  width: "fit-content",
+  display: "flex",
+  justifyContent: "flex-end",
+  position: "absolute",
+  top: "0.5rem",
+  right: "1rem",
+  span: {
+    color: "$neutral700",
+    borderRadius: "$2xs",
+    padding: "$4",
+    fontSize: "$labelSmall",
+    backgroundColor: "$neutral200",
+    fontFamily: "$default",
+  },
+});
+export const maskFormat = format;
+export const maskUnformat = unformat;
+
+export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      children,
+      isValid,
+      name,
+      color,
+      typography,
+      fontWeight,
+      addon,
+      textAlign = "left",
+      mask,
+      maxLength,
+      hasError,
+      ...props
+    },
+    fowardedRef
+  ) => {
+    const maskRef = mask ? useMask(mask) : undefined;
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const badgeRef = React.useRef<HTMLSpanElement>(null);
+
+    const updateCharCountBadge = () => {
+      if (!maxLength || !badgeRef.current) return;
+      const currentLength = inputRef.current?.value.length ?? 0;
+      badgeRef.current.textContent = String(maxLength - currentLength);
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+      updateCharCountBadge();
+      props.onInput?.(e);
+    };
+
+    return (
+      <Flex direction="column" css={{ width: "100%", position: "relative" }}>
+        <Flex gap={"0"} css={{ width: "100%" }}>
+          {!!addon && (
+            <InputAddon
+              color={hasError ? "error" : color}
+              typography="labelSmall"
+            >
+              {addon}
+            </InputAddon>
+          )}
+
+          <TextFieldStyled
+            color={hasError ? "error" : color || "default"}
+            isValid={isValid}
+            name={name}
+            typography={typography}
+            fontWeight={fontWeight}
+            textAlign={textAlign}
+            maxLength={maxLength}
+            ref={(r) => {
+              if (!r) return;
+              inputRef.current = r;
+              if (maskRef) maskRef.current = r;
+
+              if (fowardedRef) {
+                if (typeof fowardedRef === "function") fowardedRef(r);
+                else fowardedRef.current = r;
+              }
+            }}
+            onInput={handleInput}
+            {...props}
+            style={
+              addon
+                ? {
+                    borderTopLeftRadius: "0px",
+                    borderBottomLeftRadius: "0px",
+                  }
+                : undefined
+            }
+          >
+            {children}
+            {isValid && (
+              <TextFieldSlot
+                position="flex-end"
+                name={name}
+                color={
+                  (hasError ? "error" : color) as TextFieldSlotProps["color"]
+                }
+                typography={typography}
+                fontWeight={fontWeight}
+                textAlign={textAlign}
+              >
+                <Icon name="check" />
+              </TextFieldSlot>
+            )}
+          </TextFieldStyled>
+        </Flex>
+        {maxLength && (
+          <TextFieldLimitIndicator>
+            <span ref={badgeRef}>{maxLength}</span>
+          </TextFieldLimitIndicator>
+        )}
+      </Flex>
+    );
+  }
+);
+
+export function TextFieldSlot({
+  children,
+  position = "flex-start",
+  onClick,
+  typography = "bodyXS",
+  fontWeight = "regular",
+  textAlign = "right",
+  ...props
+}: TextFieldSlotProps) {
+  const sharedStyles = {
+    typography,
+    fontWeight,
+    textAlign,
+    ...props,
+    color: undefined,
+  };
+
+  return (
+    <TextFieldSlotStyled
+      {...sharedStyles}
+      style={{
+        float: position === "flex-start" ? "left" : "right",
+        order: position === "flex-start" ? 0 : 2,
+        textAlign,
+        zIndex: onClick ? 2 : undefined,
+        cursor: onClick ? "pointer" : undefined,
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </TextFieldSlotStyled>
+  );
+}