@lets-events/react 11.6.5 → 11.7.0

package/src/components/TextField.tsx

@@ -1,312 +1,316 @@
-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",
-        },
-      },
-    },
-  ],
-});
-
-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;
-  typography?: string;
-  fontWeight?: "regular" | "medium" | "semibold" | "bold";
-  textAlign?: "left" | "right" | "center";
-  mask?: MaskOptions;
-};
-
-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,
-});
-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,
-      ...props
-    },
-    fowardedRef
-  ) => {
-    const maskRef = mask ? useMask(mask) : undefined;
-    return (
-      <Flex gap={"0"} css={{ width: "100%" }}>
-        {!!addon && <InputAddon typography="labelSmall">{addon}</InputAddon>}
-
-        <TextFieldStyled
-          color={color}
-          isValid={isValid}
-          name={name}
-          typography={typography}
-          fontWeight={fontWeight}
-          textAlign={textAlign}
-          ref={(r) => {
-            if (!r) return;
-            if (maskRef) maskRef.current = r;
-
-            if (fowardedRef) {
-              if (typeof fowardedRef === "function") fowardedRef(r);
-              else fowardedRef.current = r;
-            }
-          }}
-          {...props}
-          style={
-            addon
-              ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" }
-              : undefined
-          }
-        >
-          {children}
-          {isValid && (
-            <TextFieldSlot
-              position="flex-end"
-              name={name}
-              color={color as TextFieldSlotProps["color"]}
-              typography={typography}
-              fontWeight={fontWeight}
-              textAlign={textAlign}
-            >
-              <Icon name="check" />
-            </TextFieldSlot>
-          )}
-        </TextFieldStyled>
-      </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 onClick ? (
-    <TextFieldSlotStyled
-      {...sharedStyles}
-      style={{
-        float: position === "flex-start" ? "left" : "right",
-        order: position === "flex-start" ? 0 : 2,
-        textAlign,
-        zIndex: 2,
-        cursor: "pointer",
-      }}
-      onClick={() => onClick()}
-    >
-      {children}
-    </TextFieldSlotStyled>
-  ) : (
-    <TextFieldSlotStyled
-      {...sharedStyles}
-      style={{
-        float: position === "flex-start" ? "left" : "right",
-        order: position === "flex-start" ? 0 : 2,
-        textAlign,
-      }}
-    >
-      {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;
+  typography?: string;
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: "left" | "right" | "center";
+  mask?: MaskOptions;
+};
+
+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",
+      },
+    },
+  },
+});
+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,
+      ...props
+    },
+    fowardedRef
+  ) => {
+    const maskRef = mask ? useMask(mask) : undefined;
+    return (
+      <Flex gap={"0"} css={{ width: "100%" }}>
+        {!!addon && <InputAddon color={color} typography="labelSmall">{addon}</InputAddon>}
+
+        <TextFieldStyled
+          color={color}
+          isValid={isValid}
+          name={name}
+          typography={typography}
+          fontWeight={fontWeight}
+          textAlign={textAlign}
+          ref={(r) => {
+            if (!r) return;
+            if (maskRef) maskRef.current = r;
+
+            if (fowardedRef) {
+              if (typeof fowardedRef === "function") fowardedRef(r);
+              else fowardedRef.current = r;
+            }
+          }}
+          {...props}
+          style={
+            addon
+              ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" }
+              : undefined
+          }
+        >
+          {children}
+          {isValid && (
+            <TextFieldSlot
+              position="flex-end"
+              name={name}
+              color={color as TextFieldSlotProps["color"]}
+              typography={typography}
+              fontWeight={fontWeight}
+              textAlign={textAlign}
+            >
+              <Icon name="check" />
+            </TextFieldSlot>
+          )}
+        </TextFieldStyled>
+      </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>
+  );
+}