@uxf/ui 1.0.0-beta.10 → 1.0.0-beta.13

package/input/input-left-addon.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { forwardRef } from "../utils/forwardRef";
+
+interface InputLeftAddonProps {
+  children: ReactNode;
+}
+
+function InputLeftAddon(props: InputLeftAddonProps) {
+  return <div className="uxf-input__left-addon">{props.children}</div>;
+}
+
+export default InputLeftAddon;

package/input/input-left-element.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface InputLeftElementProps {
+    children?: ReactNode;
+}
+declare function InputLeftElement(props: InputLeftElementProps): JSX.Element;
+export default InputLeftElement;

package/input/input-left-element.jsx

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function InputLeftElement(props) {
+    return <div className="uxf-input__left-element">{props.children}</div>;
+}
+exports.default = InputLeftElement;

package/input/input-left-element.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+interface InputLeftElementProps {
+  children?: ReactNode;
+}
+
+function InputLeftElement(props: InputLeftElementProps) {
+  return <div className="uxf-input__left-element">{props.children}</div>;
+}
+
+export default InputLeftElement;

package/input/input-right-addon.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface InputRightAddonProps {
+    children: ReactNode;
+}
+declare function InputRightAddon(props: InputRightAddonProps): JSX.Element;
+export default InputRightAddon;

package/input/input-right-addon.jsx

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function InputRightAddon(props) {
+    return <div className="uxf-input__right-addon">{props.children}</div>;
+}
+exports.default = InputRightAddon;

package/input/input-right-addon.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+interface InputRightAddonProps {
+  children: ReactNode;
+}
+
+function InputRightAddon(props: InputRightAddonProps) {
+  return <div className="uxf-input__right-addon">{props.children}</div>;
+}
+
+export default InputRightAddon;

package/input/input-right-element.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface InputRightElementProps {
+    children?: ReactNode;
+}
+declare function InputRightElement(props: InputRightElementProps): JSX.Element;
+export default InputRightElement;

package/input/input-right-element.jsx

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function InputRightElement(props) {
+    return <div className="uxf-input__right-element">{props.children}</div>;
+}
+exports.default = InputRightElement;

package/input/input-right-element.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+interface InputRightElementProps {
+  children?: ReactNode;
+}
+
+function InputRightElement(props: InputRightElementProps) {
+  return <div className="uxf-input__right-element">{props.children}</div>;
+}
+
+export default InputRightElement;

package/input/input.css

@@ -0,0 +1,75 @@
+.uxf-input {
+  @apply rounded-md text-sm shadow-sm;
+
+  &__left-element,
+  &__right-element {
+    @apply text-gray-400;
+  }
+
+  &__left-element {
+    @apply pl-2;
+  }
+  &__right-element {
+    @apply pr-2;
+  }
+
+  &__left-addon,
+  &__right-addon {
+    @apply border border-gray-300 bg-gray-50 px-2 text-gray-500;
+  }
+
+  &__left-addon {
+    @apply rounded-l-md border-r-0;
+  }
+
+  &__right-addon {
+    @apply rounded-r-md border-l-0;
+  }
+
+  &__wrapper {
+    @apply h-10 rounded-md border border-gray-300;
+  }
+
+  &__element {
+    @apply bg-transparent outline-none;
+  }
+
+  &--has-right-addon {
+    .uxf-input__wrapper {
+      @apply rounded-r-none;
+    }
+  }
+
+  &--has-left-addon {
+    .uxf-input__wrapper {
+      @apply rounded-l-none;
+    }
+  }
+
+  &--focused {
+    .uxf-input__wrapper {
+      @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
+    }
+  }
+
+  &--invalid {
+    &.uxf-input--focused {
+      .uxf-input__wrapper {
+        @apply ring-1 ring-inset ring-error-500 ring-offset-0;
+      }
+    }
+
+    .uxf-input__wrapper {
+      @apply border-error-500 placeholder-error-300;
+
+      .uxf-input__left-element,
+      .uxf-input__right-element {
+        @apply text-error-500;
+      }
+
+      .uxf-input__element {
+        @apply text-error-900 placeholder-error-300;
+      }
+    }
+  }
+}

package/input/input.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
+export interface InputProps {
+    children: ReactNode;
+    variant?: keyof InputGroupVariants;
+    size?: keyof InputGroupSizes;
+}
+declare function Input(props: InputProps): JSX.Element;
+export default Input;

package/input/input.jsx

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const cx_1 = require("@uxf/ui/utils/cx");
+function getChildrenById(children, componentName) {
+    return react_1.default.Children.toArray(children)
+        .filter(react_1.default.isValidElement)
+        .find((ch) => ch.type.displayName === componentName);
+}
+function Input(props) {
+    const inputWrapperRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const mainInput = getChildrenById(props.children, "InputElement");
+    const leftAddon = getChildrenById(props.children, "InputLeftAddon");
+    const rightAddon = getChildrenById(props.children, "InputRightAddon");
+    const leftElement = getChildrenById(props.children, "InputLeftElement");
+    const rightElement = getChildrenById(props.children, "InputRightElement");
+    const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", focused && "uxf-input--focused", (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && "uxf-input--invalid");
+    const onFocus = (e) => {
+        var _a, _b;
+        setFocused(true);
+        (_b = mainInput === null || mainInput === void 0 ? void 0 : (_a = mainInput.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    };
+    const onBlur = (e) => {
+        var _a, _b;
+        setFocused(false);
+        (_b = mainInput === null || mainInput === void 0 ? void 0 : (_a = mainInput.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+    };
+    return (<div className={inputGroupClasses}>
+      {leftAddon}
+      <div className="uxf-input__wrapper" ref={inputWrapperRef} onClick={() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }}>
+        {leftElement}
+        {mainInput
+            ? react_1.default.cloneElement(mainInput, { ref: inputRef, onFocus, onBlur })
+            : null}
+        {rightElement}
+      </div>
+      {rightAddon}
+    </div>);
+}
+exports.default = Input;

package/input/input.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: typeof import("./input").default & {
+        Element: React.ForwardRefExoticComponent<import("./input-element").InputElementProps & React.RefAttributes<HTMLInputElement>>;
+        LeftElement: typeof import("./input-left-element").default;
+        RightElement: typeof import("./input-right-element").default;
+        LeftAddon: typeof import("./input-left-addon").default;
+        RightAddon: typeof import("./input-right-addon").default;
+    };
+};
+export default _default;
+export declare function Default(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;

package/input/input.stories.jsx

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStructure = exports.Default = void 0;
+const react_1 = __importStar(require("react"));
+const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
+const action_1 = require("@uxf/ui/utils/action");
+const input_1 = require("@uxf/ui/input");
+exports.default = {
+    title: "UI/Input",
+    component: input_1.Input,
+};
+function Default() {
+    const [value, onChange] = (0, react_1.useState)("");
+    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
+    return (<div className="space-y-2">
+      <input type="checkbox" checked={isInvalid} onChange={(e) => setInvalid(e.target.checked)}/>
+      <input_1.Input>
+        <input_1.Input.LeftAddon>InputLeftAddon</input_1.Input.LeftAddon>
+        <input_1.Input.LeftElement>InputLeftElement</input_1.Input.LeftElement>
+        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
+        <input_1.Input.RightElement>InputRightElement</input_1.Input.RightElement>
+        <input_1.Input.RightAddon>InputRightAddon</input_1.Input.RightAddon>
+      </input_1.Input>
+      <input_1.Input>
+        <input_1.Input.LeftAddon>https://</input_1.Input.LeftAddon>
+        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
+        <input_1.Input.RightAddon>.uxf.cz</input_1.Input.RightAddon>
+      </input_1.Input>
+      <input_1.Input>
+        <input_1.Input.LeftElement>🌷</input_1.Input.LeftElement>
+        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
+        <input_1.Input.RightElement>🔔</input_1.Input.RightElement>
+      </input_1.Input>
+      <input_1.Input>
+        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
+      </input_1.Input>
+    </div>);
+}
+exports.Default = Default;
+function ComponentStructure() {
+    const [value, onChange] = (0, react_1.useState)("");
+    return (<component_structure_analyzer_1.default>
+      <input_1.Input>
+        <input_1.Input.LeftAddon>Left addon</input_1.Input.LeftAddon>
+        <input_1.Input.LeftElement>Left element</input_1.Input.LeftElement>
+        <input_1.Input.Element value={value} onChange={onChange}/>
+        <input_1.Input.RightElement>Right element</input_1.Input.RightElement>
+        <input_1.Input.RightAddon>Right addon</input_1.Input.RightAddon>
+      </input_1.Input>
+    </component_structure_analyzer_1.default>);
+}
+exports.ComponentStructure = ComponentStructure;

package/input/input.stories.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import ComponentStructureAnalyzer from "@uxf/ui/utils/component-structure-analyzer";
+import { action } from "@uxf/ui/utils/action";
+import { Input } from "@uxf/ui/input";
+
+export default {
+  title: "UI/Input",
+  component: Input,
+};
+
+export function Default() {
+  const [value, onChange] = useState("");
+  const [isInvalid, setInvalid] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <input
+        type="checkbox"
+        checked={isInvalid}
+        onChange={(e) => setInvalid(e.target.checked)}
+      />
+      <Input>
+        <Input.LeftAddon>InputLeftAddon</Input.LeftAddon>
+        <Input.LeftElement>InputLeftElement</Input.LeftElement>
+        <Input.Element
+          value={value}
+          onChange={action("onChange", onChange)}
+          placeholder="Placeholder"
+          isInvalid={isInvalid}
+        />
+        <Input.RightElement>InputRightElement</Input.RightElement>
+        <Input.RightAddon>InputRightAddon</Input.RightAddon>
+      </Input>
+      <Input>
+        <Input.LeftAddon>https://</Input.LeftAddon>
+        <Input.Element
+          value={value}
+          onChange={action("onChange", onChange)}
+          placeholder="Placeholder"
+          isInvalid={isInvalid}
+        />
+        <Input.RightAddon>.uxf.cz</Input.RightAddon>
+      </Input>
+      <Input>
+        <Input.LeftElement>🌷</Input.LeftElement>
+        <Input.Element
+          value={value}
+          onChange={action("onChange", onChange)}
+          placeholder="Placeholder"
+          isInvalid={isInvalid}
+        />
+        <Input.RightElement>🔔</Input.RightElement>
+      </Input>
+      <Input>
+        <Input.Element
+          value={value}
+          onChange={action("onChange", onChange)}
+          placeholder="Placeholder"
+          isInvalid={isInvalid}
+        />
+      </Input>
+    </div>
+  );
+}
+
+export function ComponentStructure() {
+  const [value, onChange] = useState("");
+  return (
+    <ComponentStructureAnalyzer>
+      <Input>
+        <Input.LeftAddon>Left addon</Input.LeftAddon>
+        <Input.LeftElement>Left element</Input.LeftElement>
+        <Input.Element value={value} onChange={onChange} />
+        <Input.RightElement>Right element</Input.RightElement>
+        <Input.RightAddon>Right addon</Input.RightAddon>
+      </Input>
+    </ComponentStructureAnalyzer>
+  );
+}

package/input/input.tsx

@@ -0,0 +1,70 @@
+import React, { ReactElement, ReactNode, useRef, useState } from "react";
+import { cx } from "@uxf/ui/utils/cx";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
+
+export interface InputProps {
+  children: ReactNode;
+  variant?: keyof InputGroupVariants;
+  size?: keyof InputGroupSizes;
+}
+
+function getChildrenById(
+  children: ReactNode,
+  componentName: string
+): ReactElement | undefined {
+  return React.Children.toArray(children)
+    .filter(React.isValidElement)
+    .find((ch) => (ch.type as any).displayName === componentName);
+}
+
+function Input(props: InputProps) {
+  const inputWrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [focused, setFocused] = useState(false);
+
+  const mainInput = getChildrenById(props.children, "InputElement");
+  const leftAddon = getChildrenById(props.children, "InputLeftAddon");
+  const rightAddon = getChildrenById(props.children, "InputRightAddon");
+  const leftElement = getChildrenById(props.children, "InputLeftElement");
+  const rightElement = getChildrenById(props.children, "InputRightElement");
+
+  const inputGroupClasses = cx(
+    "uxf-input",
+    leftAddon && "uxf-input--has-left-addon",
+    leftElement && "uxf-input--has-left-element",
+    rightElement && "uxf-input--has-right-element",
+    rightAddon && "uxf-input--has-right-addon",
+    focused && "uxf-input--focused",
+    mainInput?.props.isInvalid && "uxf-input--invalid"
+  );
+
+  const onFocus = (e: any) => {
+    setFocused(true);
+    mainInput?.props.onFocus?.(e);
+  };
+
+  const onBlur = (e: any) => {
+    setFocused(false);
+    mainInput?.props.onBlur?.(e);
+  };
+
+  return (
+    <div className={inputGroupClasses}>
+      {leftAddon}
+      <div
+        className="uxf-input__wrapper"
+        ref={inputWrapperRef}
+        onClick={() => inputRef.current?.focus()}
+      >
+        {leftElement}
+        {mainInput
+          ? React.cloneElement(mainInput, { ref: inputRef, onFocus, onBlur })
+          : null}
+        {rightElement}
+      </div>
+      {rightAddon}
+    </div>
+  );
+}
+
+export default Input;

package/input/theme.d.ts

@@ -0,0 +1,6 @@
+export interface InputGroupVariants {
+    default: true;
+}
+export interface InputGroupSizes {
+    default: true;
+}

package/input/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/input/theme.ts

@@ -0,0 +1,7 @@
+export interface InputGroupVariants {
+  default: true;
+}
+
+export interface InputGroupSizes {
+  default: true;
+}

package/package.json

@@ -1,46 +1,20 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.10",
-  "description": "UXF UI components",
-  "main": "index.js",
+  "version": "1.0.0-beta.13",
+  "description": "",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "concurrently \"tailwindcss -i ./global.css -o ./.storybook/generated.css --watch\" \"start-storybook -p 6006\"",
     "build": "npm run-script clean && npm run-script compile",
     "clean": "rm -rf ./dist",
-    "compile": "tsc -P tsconfig.build.json",
-    "typecheck": "tsc --noEmit --skipLibCheck"
+    "compile": "tsc -P tsconfig.json",
+    "typecheck": "tsc --noEmit --skipLibCheck",
+    "prepublish": "yarn run build"
   },
   "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/react": "^18.0.15",
-    "autoprefixer": "^10.4.8",
-    "babel-loader": "^8.2.5",
-    "concurrently": "^7.3.0",
-    "postcss": "^8.4.14",
-    "postcss-import": "^14.1.0",
-    "postcss-nesting": "^10.1.10",
-    "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "tailwindcss": "^3.1.6",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.7.4"
-  },
+  "license": "MIT",
   "dependencies": {
-    "@uxf/core": "^2.2.4"
+    "@uxf/core": "latest"
   }
-}
+}

package/text-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./text-input";

package/{storybook → text-input}/index.js

@@ -14,5 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./storybook-config"), exports);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvc3Rvcnlib29rL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxxREFBbUMifQ==
+__exportStar(require("./text-input"), exports);

package/text-input/index.ts

@@ -0,0 +1 @@
+export * from "./text-input";

package/text-input/text-input.css

@@ -0,0 +1,29 @@
+.uxf-text-input {
+  &__label {
+    @apply mb-1 block text-sm font-medium text-gray-700;
+  }
+
+  &__helper-text {
+    @apply mt-1 text-xs text-gray-500;
+  }
+
+  &--invalid {
+    .uxf-text-input__helper-text {
+      @apply text-error-600;
+    }
+  }
+
+  &--focused {
+  }
+
+  &--disabled {
+  }
+
+  &--required {
+    .uxf-text-input__label {
+      &::after {
+        content: " *";
+      }
+    }
+  }
+}

package/text-input/text-input.d.ts

@@ -0,0 +1,22 @@
+import { FormControlProps } from "@uxf/ui/types";
+import { ReactNode } from "react";
+import { InputProps } from "@uxf/ui/input/input";
+declare type EnterKeyHint = "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+declare type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+export interface TextInputProps extends FormControlProps<string>, Pick<InputProps, "size" | "variant"> {
+    autoComplete?: string;
+    className?: string;
+    enterKeyHint?: EnterKeyHint;
+    form?: string;
+    id?: string;
+    inputMode?: InputMode;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    placeholder?: string;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    leftAddon?: ReactNode;
+    rightAddon?: ReactNode;
+}
+export declare function TextInput(props: TextInputProps): JSX.Element;
+export {};