@traefik-labs/faency 12.0.7

package/dist/components/Text/Text.js

@@ -0,0 +1,129 @@
+import { styled } from "../../stitches.config.js";
+const Text = styled("span", {
+  // Reset
+  lineHeight: "1",
+  margin: "0",
+  fontFamily: "$rubik",
+  fontVariantNumeric: "tabular-nums",
+  display: "inline-block",
+  variants: {
+    size: {
+      "0": {
+        fontSize: "$0"
+      },
+      "1": {
+        fontSize: "$1"
+      },
+      "2": {
+        fontSize: "$2"
+      },
+      "3": {
+        fontSize: "$3"
+      },
+      "4": {
+        fontSize: "$4"
+      },
+      "5": {
+        fontSize: "$5"
+      },
+      "6": {
+        fontSize: "$6"
+      },
+      "7": {
+        fontSize: "$7"
+      },
+      "8": {
+        fontSize: "$8"
+      },
+      "9": {
+        fontSize: "$9"
+      },
+      "10": {
+        fontSize: "$10"
+      },
+      "11": {
+        fontSize: "$11"
+      },
+      "12": {
+        fontSize: "$12"
+      },
+      inherit: {
+        fontSize: "inherit"
+      }
+    },
+    weight: {
+      light: {
+        fontWeight: "$light"
+      },
+      regular: {
+        fontWeight: "$regular"
+      },
+      medium: {
+        fontWeight: "$medium"
+      },
+      semiBold: {
+        fontWeight: "$semiBold"
+      },
+      bold: {
+        fontWeight: "$bold"
+      }
+    },
+    variant: {
+      red: {
+        color: "$textRed"
+      },
+      subtle: {
+        color: "$textSubtle"
+      },
+      default: {
+        color: "$textDefault"
+      },
+      contrast: {
+        color: "$textContrast"
+      },
+      inherit: {
+        color: "inherit"
+      },
+      invalid: {
+        color: "$textInvalid"
+      }
+    },
+    gradient: {
+      true: {
+        WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent"
+      }
+    },
+    transform: {
+      uppercase: {
+        textTransform: "uppercase"
+      },
+      capitalize: {
+        // WARNING: this will only work with block elements (display block/inline-block)
+        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
+        display: "inline-block",
+        "&::first-letter": {
+          textTransform: "uppercase"
+        }
+      },
+      capitalizeWords: {
+        textTransform: "capitalize"
+      }
+    },
+    noWrap: {
+      true: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "3",
+    variant: "default"
+  }
+});
+export {
+  Text
+};
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../components/Text/Text.tsx"],"sourcesContent":["import { CSS, styled, VariantProps } from '../../stitches.config';\n\nexport const Text = styled('span', {\n  // Reset\n  lineHeight: '1',\n  margin: '0',\n  fontFamily: '$rubik',\n  fontVariantNumeric: 'tabular-nums',\n  display: 'inline-block',\n\n  variants: {\n    size: {\n      '0': {\n        fontSize: '$0',\n      },\n      '1': {\n        fontSize: '$1',\n      },\n      '2': {\n        fontSize: '$2',\n      },\n      '3': {\n        fontSize: '$3',\n      },\n      '4': {\n        fontSize: '$4',\n      },\n      '5': {\n        fontSize: '$5',\n      },\n      '6': {\n        fontSize: '$6',\n      },\n      '7': {\n        fontSize: '$7',\n      },\n      '8': {\n        fontSize: '$8',\n      },\n      '9': {\n        fontSize: '$9',\n      },\n      '10': {\n        fontSize: '$10',\n      },\n      '11': {\n        fontSize: '$11',\n      },\n      '12': {\n        fontSize: '$12',\n      },\n      inherit: {\n        fontSize: 'inherit',\n      },\n    },\n    weight: {\n      light: {\n        fontWeight: '$light',\n      },\n      regular: {\n        fontWeight: '$regular',\n      },\n      medium: {\n        fontWeight: '$medium',\n      },\n      semiBold: {\n        fontWeight: '$semiBold',\n      },\n      bold: {\n        fontWeight: '$bold',\n      },\n    },\n    variant: {\n      red: {\n        color: '$textRed',\n      },\n      subtle: {\n        color: '$textSubtle',\n      },\n      default: {\n        color: '$textDefault',\n      },\n      contrast: {\n        color: '$textContrast',\n      },\n      inherit: {\n        color: 'inherit',\n      },\n      invalid: {\n        color: '$textInvalid',\n      },\n    },\n    gradient: {\n      true: {\n        WebkitBackgroundClip: 'text',\n        WebkitTextFillColor: 'transparent',\n      },\n    },\n    transform: {\n      uppercase: {\n        textTransform: 'uppercase',\n      },\n      capitalize: {\n        // WARNING: this will only work with block elements (display block/inline-block)\n        // @see https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter\n        display: 'inline-block',\n        '&::first-letter': {\n          textTransform: 'uppercase',\n        },\n      },\n      capitalizeWords: {\n        textTransform: 'capitalize',\n      },\n    },\n    noWrap: {\n      true: {\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '3',\n    variant: 'default',\n  },\n});\n\nexport type TextVariants = VariantProps<typeof Text>;\nexport type TextProps = TextVariants & { css?: CSS };\n"],"names":[],"mappings":";AAEO,MAAM,OAAO,OAAO,QAAQ;AAAA;AAAA,EAEjC,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,SAAS;AAAA,EAET,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK;AAAA,QACH,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,YAAY;AAAA,MAAA;AAAA,MAEd,SAAS;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,MAEd,QAAQ;AAAA,QACN,YAAY;AAAA,MAAA;AAAA,MAEd,UAAU;AAAA,QACR,YAAY;AAAA,MAAA;AAAA,MAEd,MAAM;AAAA,QACJ,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,SAAS;AAAA,MACP,KAAK;AAAA,QACH,OAAO;AAAA,MAAA;AAAA,MAET,QAAQ;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,sBAAsB;AAAA,QACtB,qBAAqB;AAAA,MAAA;AAAA,IACvB;AAAA,IAEF,WAAW;AAAA,MACT,WAAW;AAAA,QACT,eAAe;AAAA,MAAA;AAAA,MAEjB,YAAY;AAAA;AAAA;AAAA,QAGV,SAAS;AAAA,QACT,mBAAmB;AAAA,UACjB,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MAEF,iBAAiB;AAAA,QACf,eAAe;AAAA,MAAA;AAAA,IACjB;AAAA,IAEF,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,UAAU;AAAA,QACV,cAAc;AAAA,QACd,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;"}

package/dist/components/Text/Text.themes.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("tinycolor2");
+exports.Theme = void 0;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    textSubtle: tinycolor("black").setAlpha(0.51).toHslString(),
+    textDefault: tinycolor("black").setAlpha(0.74).toHslString(),
+    textContrast: "black",
+    textInvalid: "$red9",
+    textRed: "$red10"
+  });
+  Theme2.getDark = () => ({
+    textSubtle: tinycolor("white").setAlpha(0.51).toHslString(),
+    textDefault: tinycolor("white").setAlpha(0.74).toHslString(),
+    textContrast: "white",
+    textInvalid: "$red9",
+    textRed: "$red10"
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Text.themes.cjs.map

package/dist/components/Text/Text.themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.themes.cjs","sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    textSubtle: Property.Color;\n    textDefault: Property.Color;\n    textContrast: Property.Color;\n    textInvalid: Property.Color;\n    textRed: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n    textContrast: 'black',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n\n  export const getDark: Factory = () => ({\n    textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n    textContrast: 'white',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n}\n"],"names":["Theme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAWQA,SAAA,WAAoB,OAAO;AAAA,IACtC,YAAY,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC9C,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC/C,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,EAAA;AAGEA,SAAA,UAAmB,OAAO;AAAA,IACrC,YAAY,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC9C,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC/C,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,EAAA;AACX,GAzBeA,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/Text/Text.themes.js

@@ -0,0 +1,22 @@
+import tinycolor from "tinycolor2";
+var Theme;
+((Theme2) => {
+  Theme2.getLight = () => ({
+    textSubtle: tinycolor("black").setAlpha(0.51).toHslString(),
+    textDefault: tinycolor("black").setAlpha(0.74).toHslString(),
+    textContrast: "black",
+    textInvalid: "$red9",
+    textRed: "$red10"
+  });
+  Theme2.getDark = () => ({
+    textSubtle: tinycolor("white").setAlpha(0.51).toHslString(),
+    textDefault: tinycolor("white").setAlpha(0.74).toHslString(),
+    textContrast: "white",
+    textInvalid: "$red9",
+    textRed: "$red10"
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Text.themes.js.map

package/dist/components/Text/Text.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.themes.js","sources":["../../../components/Text/Text.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n  type Colors = {\n    textSubtle: Property.Color;\n    textDefault: Property.Color;\n    textContrast: Property.Color;\n    textInvalid: Property.Color;\n    textRed: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n\n  export const getLight: Factory = () => ({\n    textSubtle: tinycolor('black').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('black').setAlpha(0.74).toHslString(),\n    textContrast: 'black',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n\n  export const getDark: Factory = () => ({\n    textSubtle: tinycolor('white').setAlpha(0.51).toHslString(),\n    textDefault: tinycolor('white').setAlpha(0.74).toHslString(),\n    textContrast: 'white',\n    textInvalid: '$red9',\n    textRed: '$red10',\n  });\n}\n"],"names":["Theme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAWQA,SAAA,WAAoB,OAAO;AAAA,IACtC,YAAY,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC9C,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC/C,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,EAAA;AAGEA,SAAA,UAAmB,OAAO;AAAA,IACrC,YAAY,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC9C,aAAa,UAAU,OAAO,EAAE,SAAS,IAAI,EAAE,YAAA;AAAA,IAC/C,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,EAAA;AACX,GAzBe,UAAA,QAAA,CAAA,EAAA;"}

package/dist/components/TextField/TextField.cjs

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Box = require("../Box/Box.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const Label = require("../Label/Label.cjs");
+const Input = require("../Input/Input.cjs");
+const AdornmentGroup = stitches_config.styled("div", {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center"
+});
+const StyledExclamationTriangleIcon = stitches_config.styled(reactIcons.ExclamationTriangleIcon, {
+  "& + *": {
+    marginLeft: "$1"
+  }
+});
+const StyledEyeOpenIcon = stitches_config.styled(reactIcons.EyeOpenIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const StyledEyeClosedIcon = stitches_config.styled(reactIcons.EyeClosedIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+const StyledCrossCircledIcon = stitches_config.styled(reactIcons.CrossCircledIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+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__ */ jsxRuntime.jsx(Label.Label, { variant: labelVariant, htmlFor: id, children: LabelOrComponent });
+      }
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box.Box, { css, children: [
+      LabelNode,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input.Input,
+        {
+          id,
+          ref: inputRef,
+          endAdornment: hasInnerAdornment && /* @__PURE__ */ jsxRuntime.jsxs(EndAdornmentWrapper, { children: [
+            invalid && /* @__PURE__ */ jsxRuntime.jsx(StyledExclamationTriangleIcon, { role: "alert", "aria-label": "Invalid" }),
+            isPasswordType && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: passwordAction, children: /* @__PURE__ */ jsxRuntime.jsx(
+              PasswordVisibilityToggleIcon,
+              {
+                "aria-label": passwordAction,
+                onClick: togglePasswordVisibility
+              }
+            ) }),
+            clearable && !clearDisabled && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: "Clear", children: /* @__PURE__ */ jsxRuntime.jsx(StyledCrossCircledIcon, { "aria-label": "Clear", onClick: handleClear }) })
+          ] }),
+          state,
+          type: typeOrInnerType,
+          disabled,
+          readOnly,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          ...props
+        }
+      )
+    ] });
+  }
+);
+exports.TextField = TextField;
+//# sourceMappingURL=TextField.cjs.map

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

@@ -0,0 +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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"}

package/dist/components/TextField/TextField.js

@@ -0,0 +1,167 @@
+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"
+    }
+  }
+});
+const StyledCrossCircledIcon = styled(CrossCircledIcon, {
+  "@hover": {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+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

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

@@ -0,0 +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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"}