Merge pull request #145 from unix/password

feat(input): add password

components/input/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,14 +6,15 @@ exports[`Input should be work with icon 1`] = `
           box-sizing: content-box;
           display: flex;
           width: calc(1.687 * 16pt * .42);
-          height: calc(1.687 * 16pt * .42);
+          height: 100%;
           align-items: center;
           vertical-align: center;
-          pointer-events: none;
           margin: 0;
           padding: 0 calc(1.687 * 16pt * .3);
           line-height: 1;
           position: relative;
+          cursor: default;
+          pointer-events: none;
         }
       </style></span><input type=\\"text\\" class=\\" left-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
@@ -103,14 +104,15 @@ exports[`Input should be work with icon 1`] = `
           box-sizing: content-box;
           display: flex;
           width: calc(1.687 * 16pt * .42);
-          height: calc(1.687 * 16pt * .42);
+          height: 100%;
           align-items: center;
           vertical-align: center;
-          pointer-events: none;
           margin: 0;
           padding: 0 calc(1.687 * 16pt * .3);
           line-height: 1;
           position: relative;
+          cursor: default;
+          pointer-events: none;
         }
       </style></span></div></div><style>
         .with-label {

components/input/__tests__/__snapshots__/password.test.tsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputPassword should render correctly 1`] = `
+"<div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"password\\" class=\\" right-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"><span class=\\"input-icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"16\\" height=\\"16\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg><style>
+        .input-icon {
+          box-sizing: content-box;
+          display: flex;
+          width: calc(1.687 * 16pt * .42);
+          height: 100%;
+          align-items: center;
+          vertical-align: center;
+          margin: 0;
+          padding: 0 calc(1.687 * 16pt * .3);
+          line-height: 1;
+          position: relative;
+          cursor: pointer;
+          pointer-events: auto;
+        }
+      </style></span></div></div><style>
+        .with-label {
+          display: inline-block;
+          width: initial;
+          box-sizing: border-box;
+          -webkit-box-align: center;
+        }
+        
+        .input-container {
+          display: inline-flex;
+          align-items: center;
+          width: initial;
+          height: calc(1.687 * 16pt);
+        }
+
+        .input-wrapper {
+          display: inline-flex;
+          vertical-align: middle;
+          align-items: center;
+          height: 100%;
+          flex: 1;
+          user-select: none;
+          border-radius: 5px;
+          border: 1px solid #eaeaea;
+          transition: border 0.2s ease 0s, color 0.2s ease 0s;
+        }
+        
+        .input-wrapper.left-label {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        
+        .input-wrapper.right-label {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        
+        .input-wrapper.disabled {
+          background-color: #fafafa;
+          border-color: #eaeaea;
+          cursor: not-allowed;
+        }
+        
+        input.disabled {
+          cursor: not-allowed;
+        }
+        
+        .input-wrapper.hover {
+          border-color: #666;
+        }
+
+        input {
+          margin: 4px 10px;
+          padding: 0;
+          box-shadow: none;
+          font-size: .875rem;
+          background-color: transparent;
+          border: none;
+          color: #000;
+          outline: none;
+          border-radius: 0;
+          width: 100%;
+          -webkit-appearance: none;
+        }
+        
+        input.left-icon {
+          margin-left: 0;
+        }
+        
+        input.right-icon {
+          margin-right: 0;
+        }
+        
+        ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
+          color: #999;
+        }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
+      </style></div>"
+`;

components/input/__tests__/index.test.tsx

@@ -122,4 +122,22 @@ describe('Input', () => {
     input.simulate('blur')
     expect(blur).toHaveBeenCalled()
   })
+  
+  it('should trigger icon event', () => {
+    const click = jest.fn()
+    const wrapper = mount(
+      <Input icon={<span id="test-icon">icon</span>} onIconClick={click} iconClickable />
+    )
+    wrapper.find('#test-icon').simulate('click', nativeEvent)
+    expect(click).toHaveBeenCalled()
+  })
+  
+  it('should ignore icon event when input disabled', () => {
+    const click = jest.fn()
+    const wrapper = mount(
+      <Input icon={<span id="test-icon">icon</span>} onIconClick={click} iconClickable disabled />
+    )
+    wrapper.find('#test-icon').simulate('click', nativeEvent)
+    expect(click).not.toHaveBeenCalled()
+  })
 })

components/input/__tests__/password.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Input } from 'components'
+import { nativeEvent } from 'tests/utils'
+
+describe('InputPassword', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(<Input.Password />)
+    const el = wrapper.find('input').getDOMNode() as HTMLInputElement
+    expect(el.type).toEqual('password')
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should toggle input type', () => {
+    const wrapper = mount(<Input.Password />)
+    wrapper.find('.input-icon').simulate('click', nativeEvent)
+    const el = wrapper.find('input').getDOMNode() as HTMLInputElement
+    expect(el.type).toEqual('text')
+  })
+  
+  it('should hide toggle icon', () => {
+    const wrapper = mount(<Input.Password hideToggle />)
+    expect(wrapper.find('.input-icon').length).toBe(0)
+  })
+})

components/input/index.ts

@@ -1,6 +1,8 @@
 import Input from './input'
 import Textarea from '../textarea'
+import InputPassword from './password'
 
 Input.Textarea = Textarea
+Input.Password = InputPassword
 
 export default Input

components/input/input-icon.tsx

@@ -4,10 +4,12 @@ import useTheme from '../styles/use-theme'
 export interface InputIconProps {
   icon: React.ReactNode
   ratio: string
+  clickable: boolean
+  onClick: (e: React.MouseEvent<HTMLDivElement>) => void
 }
 
 const InputIcon: React.FC<InputIconProps> = React.memo(({
-  icon, ratio,
+  icon, ratio, clickable, onClick,
 }) => {
   const theme = useTheme()
   const width = useMemo(() => {
@@ -18,21 +20,22 @@ const InputIcon: React.FC<InputIconProps> = React.memo(({
   }, [theme.layout.gap, ratio])
 
   return (
-    <span className="input-icon">
+    <span className="input-icon" onClick={onClick}>
       {icon}
       <style jsx>{`
         .input-icon {
           box-sizing: content-box;
           display: flex;
           width: ${width};
-          height: ${width};
+          height: 100%;
           align-items: center;
           vertical-align: center;
-          pointer-events: none;
           margin: 0;
           padding: 0 ${padding};
           line-height: 1;
           position: relative;
+          cursor: ${clickable ? 'pointer' : 'default'};
+          pointer-events: ${clickable ? 'auto' : 'none'};
         }
       `}</style>
     </span>

components/input/input-props.ts

@@ -0,0 +1,40 @@
+import React from 'react'
+import { NormalSizes, NormalTypes } from 'components/utils/prop-types'
+
+export interface Props {
+  value?: string
+  initialValue?: string
+  placeholder?: string
+  size?: NormalSizes
+  status?: NormalTypes
+  readOnly?: boolean
+  disabled?: boolean
+  label?: string
+  labelRight?: string
+  icon?: React.ReactNode
+  iconRight?: React.ReactNode
+  iconClickable?: boolean
+  width?: string
+  className?: string
+  clearable?: boolean
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  autoComplete: string
+}
+
+export const defaultProps = {
+  disabled: false,
+  readOnly: false,
+  clearable: false,
+  iconClickable: false,
+  width: 'initial',
+  size: 'medium' as NormalSizes,
+  status: 'default' as NormalTypes,
+  autoComplete: 'off',
+  className: '',
+  placeholder: '',
+  initialValue: '',
+}

components/input/input.tsx

@@ -1,47 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import useTheme from '../styles/use-theme'
 import InputLabel from './input-label'
 import InputBlockLabel from './input-block-label'
 import InputIcon from './input-icon'
 import InputClearIcon from './input-icon-clear'
 import Textarea from '../textarea/textarea'
+import InputPassword from './password'
 import { getSizes, getColors } from './styles'
-import { NormalSizes, NormalTypes } from '../utils/prop-types'
+import { Props, defaultProps } from './input-props'
-
-interface Props {
-  value?: string
-  initialValue?: string
-  placeholder?: string
-  size?: NormalSizes
-  status?: NormalTypes
-  readOnly?: boolean
-  disabled?: boolean
-  label?: string
-  labelRight?: string
-  icon?: React.ReactNode
-  iconRight?: React.ReactNode
-  width?: string
-  className?: string
-  clearable?: boolean
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void
-  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
-  autoComplete: string
-}
-
-const defaultProps = {
-  disabled: false,
-  readOnly: false,
-  clearable: false,
-  width: 'initial',
-  size: 'medium' as NormalSizes,
-  status: 'default' as NormalTypes,
-  autoComplete: 'off',
-  className: '',
-  placeholder: '',
-  initialValue: '',
-}
 
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
 export type InputProps = Props & typeof defaultProps & NativeAttrs
@@ -57,14 +23,16 @@ const simulateChangeEvent = (
   }
 }
 
-const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
+const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputProps>>(({
-  placeholder, label, labelRight, size, status, disabled,
+  label, labelRight, size, status, icon, iconRight, iconClickable, onIconClick,
-  icon, iconRight, initialValue, onChange, readOnly, value,
+  initialValue, onChange, readOnly, value, onClearClick, clearable, width,
-  onClearClick, clearable, width, className, onBlur, onFocus,
+  className, onBlur, onFocus, autoComplete, placeholder, children, disabled,
-  autoComplete, children, ...props
+  ...props
-}) => {
+}, ref: React.Ref<HTMLInputElement | null>) => {
-  const ref = useRef<HTMLInputElement>(null)
   const theme = useTheme()
+  const inputRef = useRef<HTMLInputElement>(null)
+  useImperativeHandle(ref, () => inputRef.current)
+
   const [selfValue, setSelfValue] = useState<string>(initialValue)
   const [hover, setHover] = useState<boolean>(false)
   const { heightRatio, fontSize } = useMemo(() => getSizes(size),[size])
@@ -86,17 +54,19 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
     setSelfValue(event.target.value)
     onChange && onChange(event)
   }
-
+  
   const clearHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     setSelfValue('')
     onClearClick && onClearClick(event)
-    if (!ref.current) return
+    /* istanbul ignore next */
+    if (!inputRef.current) return
     
-    const changeEvent = simulateChangeEvent(ref.current, event)
+    const changeEvent = simulateChangeEvent(inputRef.current, event)
     changeEvent.target.value = ''
     onChange && onChange(changeEvent)
+    inputRef.current.focus()
   }
-  
+
   const focusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
     setHover(true)
     onFocus && onFocus(e)
@@ -105,20 +75,30 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
     setHover(false)
     onBlur && onBlur(e)
   }
-
+  
+  const iconClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (disabled) return
+    onIconClick && onIconClick(e)
+  }
+  const iconProps = useMemo(() => ({
+    ratio: heightRatio,
+    clickable: iconClickable,
+    onClick: iconClickHandler,
+  }), [heightRatio, iconClickable])
+  
   useEffect(() => {
     if (value === undefined) return
     setSelfValue(value)
   }, [value])
-
+  
   return (
     <div className="with-label">
       {children && <InputBlockLabel>{children}</InputBlockLabel>}
       <div className={`input-container ${className}`}>
         {label && <InputLabel fontSize={fontSize}>{label}</InputLabel>}
         <div className={`input-wrapper ${hover ? 'hover' : ''} ${disabled ? 'disabled' : ''} ${labelClasses}`}>
-          {icon && <InputIcon icon={icon} ratio={heightRatio} />}
+          {icon && <InputIcon icon={icon} {...iconProps} />}
-          <input type="text" ref={ref}
+          <input type="text" ref={inputRef}
             className={`${disabled ? 'disabled' : ''} ${iconClasses}`}
             value={selfValue}
             placeholder={placeholder}
@@ -135,7 +115,7 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
             heightRatio={heightRatio}
             disabled={disabled || readOnly}
             onClick={clearHandler} />}
-          {iconRight && <InputIcon icon={iconRight} ratio={heightRatio} />}
+          {iconRight && <InputIcon icon={iconRight} {...iconProps} />}
         </div>
         {labelRight && <InputLabel fontSize={fontSize} isRight={true}>{labelRight}</InputLabel>}
       </div>
@@ -225,10 +205,11 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
       `}</style>
     </div>
   )
-}
+})
 
-type InputComponent<P = {}> = React.FC<P> & {
+type InputComponent<P = {}> = React.ForwardRefExoticComponent<P> & {
   Textarea: typeof Textarea
+  Password: typeof InputPassword
 }
 
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs

components/input/password-icon.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+interface Props {
+  visible: boolean
+}
+
+const PasswordIcon: React.FC<Props> = ({ visible }) => {
+  return (
+    <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+      strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" style={{ color: 'currentColor' }}>
+      {!visible ? (
+        <>
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+          <circle cx="12" cy="12" r="3"/>
+        </>
+      ) : (
+        <>
+          <path
+            d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/>
+          <path d="M1 1l22 22"/>
+        </>
+      )}
+    </svg>
+  )
+}
+
+export default PasswordIcon

components/input/password.tsx

@@ -0,0 +1,51 @@
+import React, { useImperativeHandle, useMemo, useRef, useState } from 'react'
+import withDefaults from '../utils/with-defaults'
+import { Props, defaultProps } from './input-props'
+import PasswordIcon from './password-icon'
+import Input from './input'
+
+interface PasswordProps extends Props {
+  hideToggle?: boolean
+}
+
+const passwordDefaultProps = {
+  ...defaultProps,
+  hideToggle: false,
+}
+
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>
+export type InputPasswordProps = PasswordProps & typeof passwordDefaultProps & NativeAttrs
+
+const InputPassword = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPasswordProps>>(({
+  hideToggle, children, ...props
+}, ref: React.Ref<HTMLInputElement | null>) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [visible, setVisible] = useState<boolean>(false)
+  useImperativeHandle(ref, () => inputRef.current)
+  
+  const iconClickHandler = () => {
+    setVisible(v => !v)
+    /* istanbul ignore next */
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }
+  
+  const inputProps = useMemo(() => ({
+    ...props,
+    ref: inputRef,
+    iconClickable: true,
+    onIconClick: iconClickHandler,
+    type: visible ? 'text' : 'password',
+  }), [props, iconClickHandler, visible, inputRef])
+  const icon = useMemo(() => {
+    if (hideToggle) return null
+    return <PasswordIcon visible={visible} />
+  }, [hideToggle, visible])
+  
+  return (
+    <Input iconRight={icon} {...inputProps}>{children}</Input>
+  )
+})
+
+export default withDefaults(InputPassword, passwordDefaultProps)

pages/en-us/components/input.mdx

@@ -118,10 +118,17 @@ Retrieve text input from a user.
   scope={{ Input }}
   code={`
 <>
-  <Input clearable initialValue="The Evil Rabbit" />
+  <Input clearable initialValue="The Evil Rabbit" placeholder="The Evil Rabbit" />
 </>
 `} />
 
+<Playground
+  title="Password"
+  scope={{ Input }}
+  code={`
+<Input.Password initialValue="123456abc" />
+`} />
+
 <Playground
   title="Get Change"
   desc="Capture changes in input."
@@ -169,19 +176,47 @@ Retrieve text input from a user.
 | **value** | input value | `string` | - | - |
 | **initialValue** | initial value | `string` | - | - |
 | **placeholder** | placeholder | `string` | - | - |
-| **size** | input size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
+| **size** | input size | `NormalSizes` | [InputSizes](#inputsizes) | `medium` |
-| **status** | current status | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
+| **status** | current status | `NormalTypes` | [InputStatus](#inputstatus) | `default` |
 | **readOnly** | native attr | `boolean` | - | `false` |
 | **disabled** | disable input | `boolean` | - | `false` |
 | **clearable** | show clear icon | `boolean` | - | `false` |
 | **label** | text label for input | `string` | - | - |
-| **icon** | icon for input | `React.ReactNode` | - | - |
 | **labelRight** | text label at right for input | `string` | - | - |
+| **icon** | icon for input | `React.ReactNode` | - | - |
 | **iconRight** | icon at right for input | `React.ReactNode` | - | - |
+| **iconClickable** | icons are clickable | `boolean` | - | `false` |
+| **onIconClick** | click icon event | `(e: React.ChangeEvent) => void` | - | - |
 | **onChange** | change event | `(e: React.ChangeEvent) => void` | - | - |
 | **onClearClick** | clear icon event | `(e: React.MouseEvent) => void` | - | - |
 | ... | native props | `InputHTMLAttributes` | `'alt', 'type', 'className', ...` | - |
 
+<Attributes.Title>Input.Password.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **hideToggle** | hide toggle icon | `boolean` | - | `false` |
+| ... | input props | `Input.Props` | [Input.Props](#input.props) | - |
+
+<Attributes.Title>InputSizes</Attributes.Title>
+
+```ts
+type InputSizes = 'mini'
+  | 'small'
+  | 'medium'
+  | 'large'
+```
+
+<Attributes.Title>InputStatus</Attributes.Title>
+
+```ts
+type InputStatus = 'default'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+```
+
 <Attributes.Title>useInput</Attributes.Title>
 
 ```ts

pages/zh-cn/components/input.mdx

@@ -112,13 +112,21 @@ export const meta = {
 </>
 `} />
 
+<Playground
+  title="密码"
+  desc="显示或隐藏密码文本。"
+  scope={{ Input }}
+  code={`
+<Input.Password initialValue="123456abc" />
+`} />
+
 <Playground
   title="清除按钮"
   desc="在输入框内增加一个用于清除文本的按钮。"
   scope={{ Input }}
   code={`
 <>
-  <Input clearable initialValue="示例文字" />
+  <Input clearable initialValue="示例文字" placeholder="输入文本" />
 </>
 `} />
 
@@ -169,8 +177,8 @@ export const meta = {
 | **value** | 命令式设定输入框的值 | `string` | - | - |
 | **initialValue** | 初始值 | `string` | - | - |
 | **placeholder** | 占位文本 | `string` | - | - |
-| **size** | 输入框大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
+| **size** | 输入框大小 | `NormalSizes` | [InputSizes](#inputsizes) | `medium` |
-| **status** | 输入框状态 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
+| **status** | 输入框状态 | `NormalTypes` | [InputStatus](#inputstatus) | `default` |
 | **readOnly** | 是否设置输入框为只读 | `boolean` | - | `false` |
 | **disabled** | 是否禁用输入框 | `boolean` | - | `false` |
 | **clearable** | 是否展示清除按钮 | `boolean` | - | `false` |
@@ -178,10 +186,38 @@ export const meta = {
 | **icon** | 输入框图标 | `React.ReactNode` | - | - |
 | **labelRight** | 居于右侧的文本标签 | `string` | - | - |
 | **iconRight** | 居于右侧的图标 | `React.ReactNode` | - | - |
+| **iconClickable** | 图标是否可点击 | `boolean` | - | `false` |
+| **onIconClick** | 图标点击事件 | `(e: React.ChangeEvent) => void` | - | - |
 | **onChange** | 输入框变化事件 | `(e: React.ChangeEvent) => void` | - | - |
 | **onClearClick** | 清除按钮的点击事件 | `(e: React.MouseEvent) => void` | - | - |
 | ... | 原生属性 | `InputHTMLAttributes` | `'alt', 'type', 'className', ...` | - |
 
+<Attributes.Title>Input.Password.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **hideToggle** | 隐藏切换密码的按钮 | `boolean` | - | `false` |
+| ... | 输入框组件属性 | `Input.Props` | [Input.Props](#input.props) | - |
+
+<Attributes.Title>InputSizes</Attributes.Title>
+
+```ts
+type InputSizes = 'mini'
+  | 'small'
+  | 'medium'
+  | 'large'
+```
+
+<Attributes.Title>InputStatus</Attributes.Title>
+
+```ts
+type InputStatus = 'default'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+```
+
 <Attributes.Title>useInput</Attributes.Title>
 
 ```ts