@traefik-labs/faency 12.2.0 → 12.2.2

package/dist/components/TextField/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const inputRef = React.useRef<InputHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <Label variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </Label>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType]\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid]\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType]\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus]\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup]\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible]\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible]\n    );\n\n    return (\n      <Box css={css}>\n        {LabelNode}\n        <Input\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </Box>\n    );\n  }\n);\n"],"names":["styled","ExclamationTriangleIcon","EyeOpenIcon","EyeClosedIcon","CrossCircledIcon","Label","jsx","jsxs","Box","Input","Tooltip"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","names":[],"sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const inputRef = React.useRef<InputHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <Label variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </Label>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType]\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid]\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType]\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus]\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup]\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible]\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible]\n    );\n\n    return (\n      <Box css={css}>\n        {LabelNode}\n        <Input\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}

package/dist/components/TextField/TextField.js

@@ -1,167 +1,125 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { EyeClosedIcon, EyeOpenIcon, ExclamationTriangleIcon, CrossCircledIcon } from "@radix-ui/react-icons";
-import React from "react";
 import { styled } from "../../stitches.config.js";
 import { Box } from "../Box/Box.js";
-import { Tooltip } from "../Tooltip/Tooltip.js";
 import { Label } from "../Label/Label.js";
 import { Input } from "../Input/Input.js";
-const AdornmentGroup = styled("div", {
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center"
-});
-const StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {
-  "& + *": {
-    marginLeft: "$1"
-  }
-});
-const StyledEyeOpenIcon = styled(EyeOpenIcon, {
-  "@hover": {
-    "&:hover": {
-      cursor: "pointer"
-    }
-  }
-});
-const StyledEyeClosedIcon = styled(EyeClosedIcon, {
-  "@hover": {
-    "&:hover": {
-      cursor: "pointer"
-    }
-  }
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { CrossCircledIcon, ExclamationTriangleIcon, EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/TextField/TextField.tsx
+var AdornmentGroup = styled("div", {
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "center"
 });
-const StyledCrossCircledIcon = styled(CrossCircledIcon, {
-  "@hover": {
-    "&:hover": {
-      cursor: "pointer"
-    }
-  }
+var StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, { "& + *": { marginLeft: "$1" } });
+var StyledEyeOpenIcon = styled(EyeOpenIcon, { "@hover": { "&:hover": { cursor: "pointer" } } });
+var StyledEyeClosedIcon = styled(EyeClosedIcon, { "@hover": { "&:hover": { cursor: "pointer" } } });
+var StyledCrossCircledIcon = styled(CrossCircledIcon, { "@hover": { "&:hover": { cursor: "pointer" } } });
+var TextField = React.forwardRef(({ state, clearable, label: LabelOrComponent, id, type, disabled, readOnly, onBlur, onFocus, css, ...props }, forwardedRef) => {
+	const inputRef = React.useRef(null);
+	React.useImperativeHandle(forwardedRef, () => inputRef.current);
+	const [inputHasFocus, setInputHasFocus] = React.useState(false);
+	const [innerType, setInnerType] = React.useState(type);
+	const isPasswordVisible = React.useMemo(() => innerType !== "password", [innerType]);
+	const invalid = React.useMemo(() => state === "invalid", [state]);
+	const labelVariant = React.useMemo(() => {
+		if (disabled) return "subtle";
+		if (invalid) return "invalid";
+		if (inputHasFocus) return "contrast";
+		return "default";
+	}, [
+		invalid,
+		disabled,
+		inputHasFocus
+	]);
+	const LabelNode = React.useMemo(() => {
+		if (LabelOrComponent === void 0 || LabelOrComponent === null) return null;
+		if (typeof LabelOrComponent === "string") return /* @__PURE__ */ jsx(Label, {
+			variant: labelVariant,
+			htmlFor: id,
+			children: LabelOrComponent
+		});
+		return /* @__PURE__ */ jsx(LabelOrComponent, {
+			variant: labelVariant,
+			htmlFor: id
+		});
+	}, [
+		LabelOrComponent,
+		labelVariant,
+		id
+	]);
+	const isPasswordType = React.useMemo(() => type === "password", [type]);
+	const typeOrInnerType = React.useMemo(() => isPasswordType ? innerType : type, [
+		isPasswordType,
+		type,
+		innerType
+	]);
+	const hasInnerAdornment = React.useMemo(() => clearable || isPasswordType || invalid, [
+		clearable,
+		isPasswordType,
+		invalid
+	]);
+	const hasAdornmentGroup = React.useMemo(() => clearable && invalid || clearable && isPasswordType || invalid && isPasswordType, [
+		clearable,
+		invalid,
+		isPasswordType
+	]);
+	const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);
+	const handleClear = React.useCallback(() => {
+		const { current } = inputRef;
+		if (current) current.clear();
+	}, [inputRef]);
+	const handleFocus = React.useCallback((e) => {
+		if (onFocus) onFocus(e);
+		setInputHasFocus(true);
+	}, [onFocus, setInputHasFocus]);
+	const handleBlur = React.useCallback((e) => {
+		if (onBlur) onBlur(e);
+		setInputHasFocus(false);
+	}, [onBlur, setInputHasFocus]);
+	const togglePasswordVisibility = React.useCallback(() => {
+		setInnerType((prevInnerType) => prevInnerType === "password" ? void 0 : "password");
+	}, [setInnerType]);
+	const EndAdornmentWrapper = React.useMemo(() => hasAdornmentGroup ? AdornmentGroup : React.Fragment, [hasAdornmentGroup]);
+	const PasswordVisibilityToggleIcon = React.useMemo(() => isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon, [isPasswordVisible]);
+	const passwordAction = React.useMemo(() => isPasswordVisible ? "Hide password" : "Show password", [isPasswordVisible]);
+	return /* @__PURE__ */ jsxs(Box, {
+		css,
+		children: [LabelNode, /* @__PURE__ */ jsx(Input, {
+			id,
+			ref: inputRef,
+			endAdornment: hasInnerAdornment && /* @__PURE__ */ jsxs(EndAdornmentWrapper, { children: [
+				invalid && /* @__PURE__ */ jsx(StyledExclamationTriangleIcon, {
+					role: "alert",
+					"aria-label": "Invalid"
+				}),
+				isPasswordType && /* @__PURE__ */ jsx(Tooltip, {
+					content: passwordAction,
+					children: /* @__PURE__ */ jsx(PasswordVisibilityToggleIcon, {
+						"aria-label": passwordAction,
+						onClick: togglePasswordVisibility
+					})
+				}),
+				clearable && !clearDisabled && /* @__PURE__ */ jsx(Tooltip, {
+					content: "Clear",
+					children: /* @__PURE__ */ jsx(StyledCrossCircledIcon, {
+						"aria-label": "Clear",
+						onClick: handleClear
+					})
+				})
+			] }),
+			state,
+			type: typeOrInnerType,
+			disabled,
+			readOnly,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			...props
+		})]
+	});
 });
-const TextField = React.forwardRef(
-  ({
-    state,
-    clearable,
-    label: LabelOrComponent,
-    id,
-    type,
-    disabled,
-    readOnly,
-    onBlur,
-    onFocus,
-    css,
-    ...props
-  }, forwardedRef) => {
-    const inputRef = React.useRef(null);
-    React.useImperativeHandle(forwardedRef, () => inputRef.current);
-    const [inputHasFocus, setInputHasFocus] = React.useState(false);
-    const [innerType, setInnerType] = React.useState(type);
-    const isPasswordVisible = React.useMemo(() => innerType !== "password", [innerType]);
-    const invalid = React.useMemo(() => state === "invalid", [state]);
-    const labelVariant = React.useMemo(() => {
-      if (disabled) {
-        return "subtle";
-      }
-      if (invalid) {
-        return "invalid";
-      }
-      if (inputHasFocus) {
-        return "contrast";
-      }
-      return "default";
-    }, [invalid, disabled, inputHasFocus]);
-    const LabelNode = React.useMemo(() => {
-      if (LabelOrComponent === void 0 || LabelOrComponent === null) {
-        return null;
-      }
-      if (typeof LabelOrComponent === "string") {
-        return /* @__PURE__ */ jsx(Label, { variant: labelVariant, htmlFor: id, children: LabelOrComponent });
-      }
-      return /* @__PURE__ */ jsx(LabelOrComponent, { variant: labelVariant, htmlFor: id });
-    }, [LabelOrComponent, labelVariant, id]);
-    const isPasswordType = React.useMemo(() => type === "password", [type]);
-    const typeOrInnerType = React.useMemo(
-      () => isPasswordType ? innerType : type,
-      [isPasswordType, type, innerType]
-    );
-    const hasInnerAdornment = React.useMemo(
-      () => clearable || isPasswordType || invalid,
-      [clearable, isPasswordType, invalid]
-    );
-    const hasAdornmentGroup = React.useMemo(
-      () => clearable && invalid || clearable && isPasswordType || invalid && isPasswordType,
-      [clearable, invalid, isPasswordType]
-    );
-    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);
-    const handleClear = React.useCallback(() => {
-      const { current } = inputRef;
-      if (current) {
-        current.clear();
-      }
-    }, [inputRef]);
-    const handleFocus = React.useCallback(
-      (e) => {
-        if (onFocus) {
-          onFocus(e);
-        }
-        setInputHasFocus(true);
-      },
-      [onFocus, setInputHasFocus]
-    );
-    const handleBlur = React.useCallback(
-      (e) => {
-        if (onBlur) {
-          onBlur(e);
-        }
-        setInputHasFocus(false);
-      },
-      [onBlur, setInputHasFocus]
-    );
-    const togglePasswordVisibility = React.useCallback(() => {
-      setInnerType((prevInnerType) => prevInnerType === "password" ? void 0 : "password");
-    }, [setInnerType]);
-    const EndAdornmentWrapper = React.useMemo(
-      () => hasAdornmentGroup ? AdornmentGroup : React.Fragment,
-      [hasAdornmentGroup]
-    );
-    const PasswordVisibilityToggleIcon = React.useMemo(
-      () => isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon,
-      [isPasswordVisible]
-    );
-    const passwordAction = React.useMemo(
-      () => isPasswordVisible ? "Hide password" : "Show password",
-      [isPasswordVisible]
-    );
-    return /* @__PURE__ */ jsxs(Box, { css, children: [
-      LabelNode,
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id,
-          ref: inputRef,
-          endAdornment: hasInnerAdornment && /* @__PURE__ */ jsxs(EndAdornmentWrapper, { children: [
-            invalid && /* @__PURE__ */ jsx(StyledExclamationTriangleIcon, { role: "alert", "aria-label": "Invalid" }),
-            isPasswordType && /* @__PURE__ */ jsx(Tooltip, { content: passwordAction, children: /* @__PURE__ */ jsx(
-              PasswordVisibilityToggleIcon,
-              {
-                "aria-label": passwordAction,
-                onClick: togglePasswordVisibility
-              }
-            ) }),
-            clearable && !clearDisabled && /* @__PURE__ */ jsx(Tooltip, { content: "Clear", children: /* @__PURE__ */ jsx(StyledCrossCircledIcon, { "aria-label": "Clear", onClick: handleClear }) })
-          ] }),
-          state,
-          type: typeOrInnerType,
-          disabled,
-          readOnly,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          ...props
-        }
-      )
-    ] });
-  }
-);
-export {
-  TextField
-};
-//# sourceMappingURL=TextField.js.map
+//#endregion
+export { TextField };
+
+//# sourceMappingURL=TextField.js.map

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const inputRef = React.useRef<InputHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <Label variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </Label>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType]\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid]\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType]\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus]\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup]\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible]\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible]\n    );\n\n    return (\n      <Box css={css}>\n        {LabelNode}\n        <Input\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </Box>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../components/TextField/TextField.tsx"],"sourcesContent":["import {\n  CrossCircledIcon,\n  ExclamationTriangleIcon,\n  EyeClosedIcon,\n  EyeOpenIcon,\n} from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { styled } from '../../stitches.config';\nimport { Box } from '../Box';\nimport { Input, InputHandle, InputProps, InputVariants } from '../Input';\nimport { Label } from '../Label';\nimport { Tooltip } from '../Tooltip';\n\n// TYPES\nexport interface TextFieldLabelProps {\n  variant: 'invalid' | 'subtle' | 'contrast' | 'default';\n  htmlFor?: string;\n}\nexport type TextFieldProps = InputProps & {\n  type?: string;\n  clearable?: boolean;\n  label?: string | ((props: TextFieldLabelProps) => JSX.Element);\n};\n\nexport type TextFieldVariants = InputVariants;\n\n// COMPONENTS\nconst AdornmentGroup = styled('div', {\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n});\n\nconst StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon, {\n  '& + *': {\n    marginLeft: '$1',\n  },\n});\n\nconst StyledEyeOpenIcon = styled(EyeOpenIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledEyeClosedIcon = styled(EyeClosedIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nconst StyledCrossCircledIcon = styled(CrossCircledIcon, {\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n});\n\nexport const TextField = React.forwardRef<React.ElementRef<typeof Input>, TextFieldProps>(\n  (\n    {\n      state,\n      clearable,\n      label: LabelOrComponent,\n      id,\n      type,\n      disabled,\n      readOnly,\n      onBlur,\n      onFocus,\n      css,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const inputRef = React.useRef<InputHandle | null>(null);\n    React.useImperativeHandle(forwardedRef, () => inputRef.current as InputHandle);\n\n    const [inputHasFocus, setInputHasFocus] = React.useState(false);\n    const [innerType, setInnerType] = React.useState(type);\n    const isPasswordVisible = React.useMemo(() => innerType !== 'password', [innerType]);\n\n    const invalid = React.useMemo(() => state === 'invalid', [state]);\n\n    const labelVariant = React.useMemo(() => {\n      if (disabled) {\n        return 'subtle';\n      }\n      if (invalid) {\n        return 'invalid';\n      }\n      if (inputHasFocus) {\n        return 'contrast';\n      }\n      return 'default';\n    }, [invalid, disabled, inputHasFocus]);\n\n    const LabelNode = React.useMemo(() => {\n      if (LabelOrComponent === undefined || LabelOrComponent === null) {\n        return null;\n      }\n      if (typeof LabelOrComponent === 'string') {\n        return (\n          <Label variant={labelVariant} htmlFor={id}>\n            {LabelOrComponent}\n          </Label>\n        );\n      }\n      return <LabelOrComponent variant={labelVariant} htmlFor={id} />;\n    }, [LabelOrComponent, labelVariant, id]);\n\n    const isPasswordType = React.useMemo(() => type === 'password', [type]);\n\n    const typeOrInnerType = React.useMemo(\n      () => (isPasswordType ? innerType : type),\n      [isPasswordType, type, innerType]\n    );\n\n    const hasInnerAdornment = React.useMemo(\n      () => clearable || isPasswordType || invalid,\n      [clearable, isPasswordType, invalid]\n    );\n\n    const hasAdornmentGroup = React.useMemo(\n      () => (clearable && invalid) || (clearable && isPasswordType) || (invalid && isPasswordType),\n      [clearable, invalid, isPasswordType]\n    );\n\n    const clearDisabled = React.useMemo(() => readOnly || disabled, [readOnly, disabled]);\n\n    const handleClear = React.useCallback(() => {\n      const { current } = inputRef;\n      if (current) {\n        current.clear();\n      }\n    }, [inputRef]);\n\n    const handleFocus = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onFocus) {\n          onFocus(e);\n        }\n        setInputHasFocus(true);\n      },\n      [onFocus, setInputHasFocus]\n    );\n\n    const handleBlur = React.useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (onBlur) {\n          onBlur(e);\n        }\n        setInputHasFocus(false);\n      },\n      [onBlur, setInputHasFocus]\n    );\n\n    const togglePasswordVisibility = React.useCallback(() => {\n      setInnerType((prevInnerType) => (prevInnerType === 'password' ? undefined : 'password'));\n    }, [setInnerType]);\n\n    const EndAdornmentWrapper = React.useMemo(\n      () => (hasAdornmentGroup ? AdornmentGroup : React.Fragment),\n      [hasAdornmentGroup]\n    );\n\n    const PasswordVisibilityToggleIcon = React.useMemo(\n      () => (isPasswordVisible ? StyledEyeClosedIcon : StyledEyeOpenIcon),\n      [isPasswordVisible]\n    );\n\n    const passwordAction = React.useMemo(\n      () => (isPasswordVisible ? 'Hide password' : 'Show password'),\n      [isPasswordVisible]\n    );\n\n    return (\n      <Box css={css}>\n        {LabelNode}\n        <Input\n          id={id}\n          ref={inputRef}\n          endAdornment={\n            hasInnerAdornment && (\n              <EndAdornmentWrapper>\n                {invalid && <StyledExclamationTriangleIcon role=\"alert\" aria-label=\"Invalid\" />}\n                {isPasswordType && (\n                  <Tooltip content={passwordAction}>\n                    <PasswordVisibilityToggleIcon\n                      aria-label={passwordAction}\n                      onClick={togglePasswordVisibility}\n                    />\n                  </Tooltip>\n                )}\n                {clearable && !clearDisabled && (\n                  <Tooltip content=\"Clear\">\n                    <StyledCrossCircledIcon aria-label=\"Clear\" onClick={handleClear} />\n                  </Tooltip>\n                )}\n              </EndAdornmentWrapper>\n            )\n          }\n          state={state}\n          type={typeOrInnerType}\n          disabled={disabled}\n          readOnly={readOnly}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...props}\n        />\n      </Box>\n    );\n  }\n);\n"],"mappings":"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"}