@startupjs-ui/input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/input
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Bug Fixes
+
+* **input:** return the default inputs the first time ([7151fce](https://github.com/startupjs/startupjs-ui/commit/7151fce8ff3d2714e672523d0a5f37e4af6eb719))
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **array-input:** refactor ArrayInput component. Fix circular dependency issue in Input/inputs (wrapInput). ([14e7204](https://github.com/startupjs/startupjs-ui/commit/14e720423874cbbae8220160e3f5f0713a44b67a))
+* **input:** refactor Input component. Temporary mock usage of ObjectInput and ArrayInput until they are refactored too ([47c4b46](https://github.com/startupjs/startupjs-ui/commit/47c4b467d2d279a474d46d898b417c7856716843))
+* **object-input:** refactor ObjectInput component ([f21693c](https://github.com/startupjs/startupjs-ui/commit/f21693c7f2a31198f445ec3656fb780feb2269bd))
+* **startupjs-ui:** move UiProvider and the main ui plugin into startupjs-ui package ([deeefaa](https://github.com/startupjs/startupjs-ui/commit/deeefaa8ca104efc835d1ff207d5450a83a5f484))

package/README.helpers.js

@@ -0,0 +1,70 @@
+import { $ } from 'startupjs'
+
+const DEFAULT_INPUT_TYPE = 'text'
+
+export function getPropsForType () {
+  const $input = $.session.Sandbox.Input
+  const type = $input.type.get() || DEFAULT_INPUT_TYPE
+
+  const onChangeValue = (value) => $input.value.set(value)
+  const commonProps = {
+    type,
+    value: $input.value.get(),
+    $value: $input.value
+  }
+
+  switch (type) {
+    case 'text':
+    case 'string':
+    case 'password':
+      return { ...commonProps, onChangeText: onChangeValue }
+
+    case 'checkbox':
+    case 'boolean':
+      return { ...commonProps, onChange: onChangeValue }
+
+    case 'select':
+    case 'radio':
+    case 'multiselect':
+      return { ...commonProps, options: ['New York', 'Los Angeles', 'Tokyo'] }
+
+    case 'date':
+    case 'time':
+    case 'datetime':
+      return { ...commonProps, onChangeDate: onChangeValue }
+
+    case 'number':
+    case 'integer':
+      return { ...commonProps, onChangeNumber: onChangeValue }
+
+    case 'array':
+      return { ...commonProps, items: { type: 'text' } }
+
+    case 'object':
+      return {
+        ...commonProps,
+        properties: {
+          email: { input: 'text', label: 'Email' },
+          password: {
+            input: 'text',
+            label: 'Password',
+            description: "Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+          }
+        }
+      }
+
+    case 'color':
+      return commonProps
+
+    case 'range':
+      return { ...commonProps, onChange: onChangeValue }
+  }
+}
+
+export function getDefaultValueForType () {
+  const $input = $.session.Sandbox.Input
+  const type = $input.type.get() || DEFAULT_INPUT_TYPE
+
+  if (type === 'array') return ['Green', 'Blue']
+  return undefined
+}

package/README.mdx

@@ -0,0 +1,94 @@
+import { useEffect } from 'react'
+import Input, { _PropsJsonSchema as InputPropsJsonSchema } from './index'
+import { $ } from 'startupjs'
+import { getPropsForType, getDefaultValueForType } from './README.helpers'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Input
+
+Input provides a wrapper api around input components by adding two-way data bindings, different customizable layouts that allow you to display inputs with label and description in different ways and provides the ability to display an error.
+
+```jsx
+import { Input } from 'startupjs-ui'
+```
+
+**Input components**
+
+Possible types are: [array](/docs/forms/Array), [checkbox](/docs/forms/Checkbox), [date](/docs/forms/DateTimePicker), [datetime](/docs/forms/DateTimePicker), [multiselect](/docs/forms/Multiselect), [number](/docs/forms/NumberInput), [object](/docs/forms/ObjectInput), [password](/docs/forms/PasswordInput), [radio](/docs/forms/Radio), [range](/docs/forms/RangeInput), [select](/docs/forms/Select), [time](/docs/forms/DateTimePicker), [text](/docs/forms/TextInput).
+
+You can use any of the above components by specifying the `type` property.
+
+**Layouts**
+
+Possible types are:
+- `pure` displays input without label and description
+- `rows` displays input in one row with provided label and description
+- `columns` displays input in two columns with provided label and description
+
+There are several rules that determine which layout to use:
+- for tablet screen resolutions and less the `rows` layout is always used
+- for screen resolutions larger than a tablet you can use any of the above layouts by specifying the `layout` property of the component, but if the layout is not passed to the component it is determined automatically by logic: `rows` if `label` or `description` property is specified, otherwise `pure`
+
+## Simple example
+
+```jsx example
+const $value = $()
+
+return (
+  <Input
+    type='text'
+    $value={$value}
+  />
+)
+```
+
+## Layout
+
+```jsx example
+const $value = $()
+
+return (
+  <Input
+    type='text'
+    label='Password'
+    description="Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter"
+    layout='columns'
+    $value={$value}
+  />
+)
+```
+
+## Displaying errors
+
+To display an error, pass the error text to the `error` property
+
+```jsx example
+const $value = $()
+
+return (
+  <Input
+    $value={$value}
+    error={$value.get() ? '' : 'Need to fill the field'}
+  />
+)
+```
+
+## Sandbox
+
+export function SandboxWrapper () {
+  const $input = $.session.Sandbox.Input
+  useEffect(() => {
+    $input.set(getPropsForType())
+    $input.value.set(getDefaultValueForType())
+  }, [$input.type.get()])
+  return (
+    <Sandbox
+      Component={Input}
+      propsJsonSchema={InputPropsJsonSchema}
+      $props={$input}
+      block
+    />
+  )
+}
+
+<SandboxWrapper />

package/globalCustomInputs.ts

@@ -0,0 +1,5 @@
+export const customInputs: Record<string, any> = {}
+
+export function setCustomInputs (newCustomInputs: Record<string, any> = {}): void {
+  Object.assign(customInputs, newCustomInputs)
+}

package/helpers/extraSchemaTypes.ts

@@ -0,0 +1,5 @@
+const EXTRA_SCHEMA_TYPES = ['string', 'boolean', 'integer'] as const
+
+export type ExtraSchemaType = typeof EXTRA_SCHEMA_TYPES[number]
+
+export default EXTRA_SCHEMA_TYPES

package/helpers/getInputTestId.ts

@@ -0,0 +1,26 @@
+export default function getInputTestId (props: {
+  testId?: string
+  label?: unknown
+  description?: unknown
+  placeholder?: unknown
+} & Record<string, any>): string | undefined {
+  if (props.testId) return props.testId
+
+  const inputName =
+    (typeof props.label === 'string' && props.label !== '' ? props.label : null) ??
+    (typeof props.description === 'string' && props.description !== '' ? props.description : null) ??
+    (typeof props.placeholder === 'string' && props.placeholder !== '' ? props.placeholder : null)
+
+  if (!inputName || typeof inputName !== 'string') return undefined
+
+  const nameHash = simpleNumericHash(inputName)
+  const allowedCharacters = inputName.match(/\w+/g)
+
+  return (allowedCharacters ?? []).join('_').slice(0, 20) + '-' + nameHash
+}
+
+function simpleNumericHash (s: string): number {
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
+  return h
+}

package/helpers/guessInput.ts

@@ -0,0 +1,23 @@
+// guess input type based on schema type and props
+export default function guessInput (
+  input?: string,
+  type?: string,
+  props: Record<string, any> = {}
+): string {
+  if (input) return input
+  if (type) {
+    if (props.enum) return 'select'
+    if (SCHEMA_TYPES_TO_INPUT[type]) return SCHEMA_TYPES_TO_INPUT[type]
+    return type
+  }
+  return 'text'
+}
+
+export const SCHEMA_TYPES_TO_INPUT: Record<string, string> = {
+  string: 'text',
+  boolean: 'checkbox',
+  integer: 'number',
+  number: 'number',
+  array: 'array',
+  object: 'object'
+}

package/index.d.ts

@@ -0,0 +1,69 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type RefObject } from 'react';
+import type { InputWrapperConfiguration } from './wrapInput';
+export declare const _PropsJsonSchema: {};
+export interface InputProps {
+    /** Explicit input type override (ignores schema guessing) */
+    input?: 'array' | 'checkbox' | 'color' | 'date' | 'datetime' | 'time' | 'multiselect' | 'number' | 'object' | 'password' | 'file' | 'rank' | 'radio' | 'range' | 'select' | 'text';
+    /** Schema or input type @default 'text' */
+    type?: 'array' | 'checkbox' | 'color' | 'date' | 'datetime' | 'time' | 'multiselect' | 'number' | 'object' | 'password' | 'file' | 'rank' | 'radio' | 'range' | 'select' | 'text' | 'string' | 'boolean' | 'integer';
+    /** Input value */
+    value?: any;
+    /** Two-way binding for value */
+    $value?: any;
+    /** Label text */
+    label?: string;
+    /** Description text */
+    description?: string;
+    /** Layout for label and description @default 'rows' when label/description is present */
+    layout?: 'pure' | 'rows' | 'columns';
+    /** Configuration overrides for the wrapper */
+    configuration?: InputWrapperConfiguration;
+    /** Error message or list of messages */
+    error?: string | string[];
+    /** Required flag or json-schema required object */
+    required?: boolean | object;
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Render as read-only */
+    readonly?: boolean;
+    /** Test id for generated testID */
+    testId?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Options for select-like inputs */
+    options?: any;
+    /** Schema enum for select-like inputs */
+    enum?: any[];
+    /** Schema items for array inputs */
+    items?: any;
+    /** Schema properties for object inputs */
+    properties?: Record<string, any>;
+    /** Value change handler (checkbox/select/range/etc.) */
+    onChange?: (...args: any[]) => void;
+    /** Text change handler */
+    onChangeText?: (...args: any[]) => void;
+    /** Number change handler */
+    onChangeNumber?: (...args: any[]) => void;
+    /** Date/time change handler */
+    onChangeDate?: (...args: any[]) => void;
+    /** Color change handler */
+    onChangeColor?: (...args: any[]) => void;
+    /** Focus handler */
+    onFocus?: (...args: any[]) => void;
+    /** Blur handler */
+    onBlur?: (...args: any[]) => void;
+    /** Imperative ref to the rendered input */
+    ref?: RefObject<any>;
+    /** Additional props passed to the underlying input */
+    [key: string]: any;
+}
+declare const _default: import("react").ComponentType<InputProps>;
+export default _default;
+export { default as wrapInput, isWrapped, IS_WRAPPED } from './wrapInput';
+export { default as guessInput } from './helpers/guessInput';
+export { setCustomInputs, customInputs } from './globalCustomInputs';
+export { useInputMeta } from './inputs';
+export { default as useCustomInputs, CustomInputsContext } from './useCustomInputs';

package/index.tsx

@@ -0,0 +1,108 @@
+import { useRef, useImperativeHandle, type ReactNode, type RefObject } from 'react'
+import { pug, observer } from 'startupjs'
+import guessInput from './helpers/guessInput'
+import getInputTestId from './helpers/getInputTestId'
+import { useInputMeta } from './inputs'
+import type { InputWrapperConfiguration } from './wrapInput'
+
+export const _PropsJsonSchema = {/* InputProps */}
+
+export interface InputProps {
+  /** Explicit input type override (ignores schema guessing) */
+  input?: 'array' | 'checkbox' | 'color' | 'date' | 'datetime' | 'time' | 'multiselect' | 'number' | 'object' | 'password' | 'file' | 'rank' | 'radio' | 'range' | 'select' | 'text'
+  /** Schema or input type @default 'text' */
+  type?: 'array' | 'checkbox' | 'color' | 'date' | 'datetime' | 'time' | 'multiselect' | 'number' | 'object' | 'password' | 'file' | 'rank' | 'radio' | 'range' | 'select' | 'text' | 'string' | 'boolean' | 'integer'
+  /** Input value */
+  value?: any
+  /** Two-way binding for value */
+  $value?: any
+  /** Label text */
+  label?: string
+  /** Description text */
+  description?: string
+  /** Layout for label and description @default 'rows' when label/description is present */
+  layout?: 'pure' | 'rows' | 'columns'
+  /** Configuration overrides for the wrapper */
+  configuration?: InputWrapperConfiguration
+  /** Error message or list of messages */
+  error?: string | string[]
+  /** Required flag or json-schema required object */
+  required?: boolean | object
+  /** Disable interactions */
+  disabled?: boolean
+  /** Render as read-only */
+  readonly?: boolean
+  /** Test id for generated testID */
+  testId?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Options for select-like inputs */
+  options?: any
+  /** Schema enum for select-like inputs */
+  enum?: any[]
+  /** Schema items for array inputs */
+  items?: any
+  /** Schema properties for object inputs */
+  properties?: Record<string, any>
+  /** Value change handler (checkbox/select/range/etc.) */
+  onChange?: (...args: any[]) => void
+  /** Text change handler */
+  onChangeText?: (...args: any[]) => void
+  /** Number change handler */
+  onChangeNumber?: (...args: any[]) => void
+  /** Date/time change handler */
+  onChangeDate?: (...args: any[]) => void
+  /** Color change handler */
+  onChangeColor?: (...args: any[]) => void
+  /** Focus handler */
+  onFocus?: (...args: any[]) => void
+  /** Blur handler */
+  onBlur?: (...args: any[]) => void
+  /** Imperative ref to the rendered input */
+  ref?: RefObject<any>
+  /** Additional props passed to the underlying input */
+  [key: string]: any
+}
+
+function Input ({
+  input,
+  type = 'text',
+  ref,
+  ...props
+}: InputProps): ReactNode {
+  const inputType = guessInput(input, type, props)
+
+  const testID = getInputTestId(props)
+  const { Component, useProps } = useInputMeta(inputType)
+
+  if (!Component) {
+    throw Error(`
+      Input component for '${inputType}' not found.
+      Make sure you have passed it to 'customInputs' in your Form
+      or connected it as a plugin in the 'customFormInputs' hook.
+    `)
+  }
+
+  // ref: https://stackoverflow.com/a/68163315 (why innerRef is needed here)
+  const innerRef = useRef<any>(null)
+
+  const componentProps = useProps({ ...props, testID }, innerRef)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(ref, () => innerRef.current, [Component])
+
+  return pug`
+    Component(
+      ref=innerRef
+      ...componentProps
+    )
+  `
+}
+
+export default observer(Input)
+
+export { default as wrapInput, isWrapped, IS_WRAPPED } from './wrapInput'
+export { default as guessInput } from './helpers/guessInput'
+export { setCustomInputs, customInputs } from './globalCustomInputs'
+export { useInputMeta } from './inputs'
+export { default as useCustomInputs, CustomInputsContext } from './useCustomInputs'

package/inputs.ts

@@ -0,0 +1,442 @@
+import { type ReactNode, type RefObject } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, useBind } from 'startupjs'
+import ArrayInput from '@startupjs-ui/array-input'
+import Card from '@startupjs-ui/card'
+import Checkbox from '@startupjs-ui/checkbox'
+import ColorPicker from '@startupjs-ui/color-picker'
+import FileInput from '@startupjs-ui/file-input'
+import DateTimePicker from '@startupjs-ui/date-time-picker'
+import Multiselect from '@startupjs-ui/multi-select'
+import NumberInput from '@startupjs-ui/number-input'
+import ObjectInput from '@startupjs-ui/object-input'
+import PasswordInput from '@startupjs-ui/password-input'
+import Rank from '@startupjs-ui/rank'
+import Radio from '@startupjs-ui/radio'
+import RangeInput from '@startupjs-ui/range-input'
+import Select from '@startupjs-ui/select'
+import TextInput from '@startupjs-ui/text-input'
+import wrapInput, { isWrapped } from './wrapInput'
+import useCustomInputs from './useCustomInputs'
+import { customInputs } from './globalCustomInputs'
+
+export type InputUseProps = (
+  props: Record<string, any>,
+  ref?: RefObject<any>
+) => Record<string, any>
+
+export interface InputComponentMeta {
+  Component: any
+  useProps?: InputUseProps
+}
+
+function useBoundProps<T extends Record<string, any>> (props: T): T {
+  return useBind(props) as T
+}
+
+const useArrayProps = (props: Record<string, any>): Record<string, any> => {
+  return props
+}
+
+const useCheckboxProps = ({ value, $value, onChange, ...props }: Record<string, any>): Record<string, any> => {
+  ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
+
+  return {
+    value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChange,
+    _onLabelPress: () => { onChange(!value) },
+    ...props
+  }
+}
+
+const useColorProps = ({
+  value,
+  $value,
+  onChangeColor,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChangeColor } = useBoundProps({ value, $value, onChangeColor }))
+
+  return {
+    value,
+    configuration: { isLabelClickable: !props.disabled },
+    onChangeColor,
+    _onLabelPress: () => { ref?.current?.show() },
+    ...props
+  }
+}
+
+const useDateProps = ({
+  value,
+  $value,
+  onChangeDate,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChangeDate } = useBoundProps({ value, $value, onChangeDate }))
+
+  return {
+    mode: 'date',
+    date: value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChangeDate,
+    _onLabelPress: () => ref?.current?.focus(),
+    ...props
+  }
+}
+
+const useDateTimeProps = ({
+  value,
+  $value,
+  onChangeDate,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChangeDate } = useBoundProps({ value, $value, onChangeDate }))
+
+  return {
+    mode: 'datetime',
+    date: value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChangeDate,
+    _onLabelPress: () => ref?.current?.focus(),
+    ...props
+  }
+}
+
+const useTimeProps = ({
+  value,
+  $value,
+  onChangeDate,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChangeDate } = useBoundProps({ value, $value, onChangeDate }))
+
+  return {
+    mode: 'time',
+    date: value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChangeDate,
+    _onLabelPress: () => ref?.current?.focus(),
+    ...props
+  }
+}
+
+const useMultiselectProps = ({
+  value,
+  $value,
+  onChange,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
+
+  return {
+    value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChange,
+    _onLabelPress: () => ref?.current?.focus(),
+    ...props
+  }
+}
+
+const useNumberProps = ({
+  value,
+  $value,
+  onChangeNumber,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChangeNumber } = useBoundProps({ value, $value, onChangeNumber }))
+
+  return {
+    value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChangeNumber,
+    _onLabelPress: () => ref?.current?.focus(),
+    ...props
+  }
+}
+
+const useObjectProps = (props: Record<string, any>): Record<string, any> => {
+  return props
+}
+
+const usePasswordProps = ({
+  value,
+  $value,
+  onChangeText,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChangeText } = useBoundProps({ value, $value, onChangeText }))
+
+  return {
+    value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChangeText,
+    _onLabelPress: () => ref?.current?.focus(),
+    ...props
+  }
+}
+
+const useFileProps = ({ value, $value, onChange, ...props }: Record<string, any>): Record<string, any> => {
+  ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
+  return {
+    value,
+    onChange,
+    ...props
+  }
+}
+
+const useRankProps = ({ value, $value, onChange, ...props }: Record<string, any>): Record<string, any> => {
+  ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
+
+  return {
+    value,
+    onChange,
+    ...props
+  }
+}
+
+const useRadioProps = ({ value, $value, onChange, ...props }: Record<string, any>): Record<string, any> => {
+  ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
+
+  return {
+    value,
+    onChange,
+    ...props
+  }
+}
+
+const useRangeProps = ({ value, $value, onChange, ...props }: Record<string, any>): Record<string, any> => {
+  ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
+
+  return {
+    value,
+    onChange,
+    ...props
+  }
+}
+
+const useSelectProps = ({ value, $value, enum: _enum, options, onChange, ...props }: Record<string, any>): Record<string, any> => {
+  ;({ value, onChange } = useBoundProps({ value, $value, onChange }))
+  // if json-schema `enum` is passed, use it as options
+  if (!options && _enum) options = _enum
+  return {
+    value,
+    onChange,
+    options,
+    ...props
+  }
+}
+
+const useTextProps = ({
+  value,
+  $value,
+  onChangeText,
+  ...props
+}: Record<string, any>, ref?: RefObject<any>): Record<string, any> => {
+  ;({ value, onChangeText } = useBoundProps({ value, $value, onChangeText }))
+  return {
+    value,
+    configuration: { isLabelClickable: !props.disabled && !props.readonly },
+    onChangeText,
+    _onLabelPress: () => ref?.current?.focus(),
+    ...props
+  }
+}
+
+function cardWrapper (style: StyleProp<ViewStyle> | undefined, children: ReactNode): ReactNode {
+  return pug`
+    Card(
+      style=style
+      variant='outlined'
+    )
+      = children
+  `
+}
+
+// NOTE: lazy initialization is needed to prevent circular dependencies
+//       with 'wrapInput': ArrayInput and ObjectInput depend on Input (this file)
+let _defaultInputs: Record<string, InputComponentMeta>
+function getDefaultInputs () {
+  if (_defaultInputs) return _defaultInputs
+  const WrappedArrayInput = wrapInput(
+    ArrayInput,
+    {
+      rows: { _renderWrapper: cardWrapper },
+      columns: { _renderWrapper: cardWrapper }
+    }
+  )
+  const WrappedCheckbox = wrapInput(
+    Checkbox,
+    {
+      rows: {
+        labelPosition: 'right',
+        descriptionPosition: 'bottom'
+      }
+    }
+  )
+  const WrappedColorPicker = wrapInput(
+    ColorPicker,
+    { rows: { descriptionPosition: 'bottom' } }
+  )
+  const WrappedDateTimePicker = wrapInput(
+    DateTimePicker,
+    {
+      rows: { descriptionPosition: 'bottom' },
+      isLabelColoredWhenFocusing: true
+    }
+  )
+  const WrappedMultiselect = wrapInput(
+    Multiselect,
+    {
+      isLabelColoredWhenFocusing: true
+    }
+  )
+  const WrappedNumberInput = wrapInput(
+    NumberInput,
+    {
+      rows: {
+        descriptionPosition: 'bottom'
+      },
+      isLabelColoredWhenFocusing: true
+    }
+  )
+  const WrappedObjectInput = wrapInput(
+    ObjectInput,
+    {
+      rows: { _renderWrapper: cardWrapper },
+      columns: { _renderWrapper: cardWrapper }
+    }
+  )
+
+  const WrappedPasswordInput = wrapInput(
+    PasswordInput,
+    {
+      rows: {
+        descriptionPosition: 'bottom'
+      },
+      isLabelColoredWhenFocusing: true
+    }
+  )
+  const WrappedFileInput = wrapInput(FileInput)
+  const WrappedRank = wrapInput(Rank)
+  const WrappedRadio = wrapInput(Radio)
+  const WrappedSelect = wrapInput(
+    Select,
+    {
+      rows: {
+        descriptionPosition: 'bottom'
+      },
+      isLabelColoredWhenFocusing: true
+    }
+  )
+  const WrappedTextInput = wrapInput(
+    TextInput,
+    {
+      rows: {
+        descriptionPosition: 'bottom'
+      },
+      isLabelColoredWhenFocusing: true
+    }
+  )
+  const WrappedRange = wrapInput(RangeInput)
+
+  _defaultInputs = {
+    array: {
+      Component: WrappedArrayInput,
+      useProps: useArrayProps
+    },
+    checkbox: {
+      Component: WrappedCheckbox,
+      useProps: useCheckboxProps
+    },
+    color: {
+      Component: WrappedColorPicker,
+      useProps: useColorProps
+    },
+    date: {
+      Component: WrappedDateTimePicker,
+      useProps: useDateProps
+    },
+    datetime: {
+      Component: WrappedDateTimePicker,
+      useProps: useDateTimeProps
+    },
+    time: {
+      Component: WrappedDateTimePicker,
+      useProps: useTimeProps
+    },
+    multiselect: {
+      Component: WrappedMultiselect,
+      useProps: useMultiselectProps
+    },
+    number: {
+      Component: WrappedNumberInput,
+      useProps: useNumberProps
+    },
+    object: {
+      Component: WrappedObjectInput,
+      useProps: useObjectProps
+    },
+    password: {
+      Component: WrappedPasswordInput,
+      useProps: usePasswordProps
+    },
+    file: {
+      Component: WrappedFileInput,
+      useProps: useFileProps
+    },
+    rank: {
+      Component: WrappedRank,
+      useProps: useRankProps
+    },
+    radio: {
+      Component: WrappedRadio,
+      useProps: useRadioProps
+    },
+    range: {
+      Component: WrappedRange,
+      useProps: useRangeProps
+    },
+    select: {
+      Component: WrappedSelect,
+      useProps: useSelectProps
+    },
+    text: {
+      Component: WrappedTextInput,
+      useProps: useTextProps
+    }
+  }
+  return _defaultInputs
+}
+
+export function useInputMeta (input: string): { Component: any, useProps: InputUseProps } {
+  const customInputsFromContext = useCustomInputs()
+  const componentMeta = customInputsFromContext[input] || customInputs[input] || getDefaultInputs()?.[input]
+  if (!componentMeta) throw Error(ERRORS.inputNotFound(input))
+  let Component
+  let useProps: InputUseProps | undefined
+  if (componentMeta.Component) {
+    ;({ Component, useProps } = componentMeta)
+  } else {
+    Component = componentMeta
+  }
+  if (!isWrapped(Component)) {
+    if (!autoWrappedInputs.has(Component)) {
+      autoWrappedInputs.set(Component, wrapInput(Component))
+    }
+    Component = autoWrappedInputs.get(Component)
+  }
+  useProps ??= (props: Record<string, any>) => props
+  return { Component, useProps }
+}
+
+const autoWrappedInputs = new WeakMap<any, any>()
+
+const ERRORS = {
+  inputAlreadyDefined: (input: string) => `
+    Custom input type "${input}" is already defined by another plugin. It will be overridden!
+  `,
+  inputNotFound: (input: string) => `
+    Implementation for a custom input type "${input}" was not found!
+  `
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@startupjs-ui/input",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": "./index.tsx",
+    "./globalCustomInputs": "./globalCustomInputs.ts"
+  },
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@startupjs-ui/array-input": "^0.1.3",
+    "@startupjs-ui/card": "^0.1.3",
+    "@startupjs-ui/checkbox": "^0.1.3",
+    "@startupjs-ui/color-picker": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/date-time-picker": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/file-input": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/multi-select": "^0.1.3",
+    "@startupjs-ui/number-input": "^0.1.3",
+    "@startupjs-ui/object-input": "^0.1.3",
+    "@startupjs-ui/password-input": "^0.1.3",
+    "@startupjs-ui/radio": "^0.1.3",
+    "@startupjs-ui/range-input": "^0.1.3",
+    "@startupjs-ui/rank": "^0.1.3",
+    "@startupjs-ui/select": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3",
+    "@startupjs-ui/text-input": "^0.1.3",
+    "lodash": "^4.17.20"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/useCustomInputs.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext, useState } from 'react'
+
+export const CustomInputsContext = createContext<Record<string, any> | undefined>(undefined)
+
+export default function useCustomInputs (): Record<string, any> {
+  // useState is used to avoid re-creating the object on every render
+  const [empty] = useState<Record<string, any>>({})
+  return useContext(CustomInputsContext) ?? empty
+}

package/useLayout.ts

@@ -0,0 +1,19 @@
+import { useMedia } from '@startupjs-ui/core'
+
+export default function useLayout ({
+  layout,
+  label,
+  description
+}: {
+  layout?: 'pure' | 'rows' | 'columns'
+  label?: string
+  description?: string
+} = {}): 'pure' | 'rows' | 'columns' {
+  const { tablet } = useMedia()
+
+  const hasLabel = Boolean(label)
+  const hasDescription = Boolean(description)
+  layout = layout ?? (hasLabel || hasDescription ? 'rows' : 'pure')
+  if (layout !== 'pure' && !tablet) layout = 'rows'
+  return layout
+}

package/wrapInput.tsx

@@ -0,0 +1,297 @@
+import { useEffect, useState, type ReactNode, type RefObject } from 'react'
+import { Text } from 'react-native'
+import { pug, styl, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Span from '@startupjs-ui/span'
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
+import merge from 'lodash/merge'
+import useLayout from './useLayout'
+
+export const IS_WRAPPED = Symbol('wrapped into wrapInput()')
+
+export type InputLayout = 'pure' | 'rows' | 'columns'
+
+export interface InputWrapperLayoutConfiguration {
+  labelPosition?: 'top' | 'right'
+  descriptionPosition?: 'top' | 'bottom'
+  _renderWrapper?: any
+  [key: string]: any
+}
+
+export interface InputWrapperConfiguration extends InputWrapperLayoutConfiguration {
+  rows?: InputWrapperLayoutConfiguration
+  columns?: InputWrapperLayoutConfiguration
+  isLabelColoredWhenFocusing?: boolean
+  isLabelClickable?: boolean
+}
+
+export interface InputWrapperProps {
+  label?: string
+  description?: string
+  layout?: InputLayout
+  configuration?: InputWrapperConfiguration
+  error?: string | string[]
+  required?: boolean | object
+  disabled?: boolean
+  readonly?: boolean
+  onFocus?: (...args: any[]) => void
+  onBlur?: (...args: any[]) => void
+  _onLabelPress?: () => void
+  ref?: RefObject<any>
+  style?: any
+  [key: string]: any
+}
+
+export function isWrapped (Component: any): boolean {
+  return Component[IS_WRAPPED]
+}
+
+export default function wrapInput (Component: any, configuration: InputWrapperConfiguration = {}): any {
+  configuration = merge(
+    {
+      rows: {
+        labelPosition: 'top',
+        descriptionPosition: 'top'
+      },
+      isLabelColoredWhenFocusing: false,
+      isLabelClickable: false
+    },
+    configuration
+  )
+
+  function InputWrapper ({
+    label,
+    description,
+    layout,
+    configuration: componentConfiguration,
+    error,
+    onFocus,
+    required,
+    onBlur,
+    _onLabelPress,
+    ref,
+    ...props
+  }: InputWrapperProps): ReactNode {
+    const currentLayout = useLayout({
+      layout,
+      label,
+      description
+    })
+
+    configuration = merge(configuration, componentConfiguration)
+    configuration = merge(configuration, configuration[currentLayout])
+
+    const {
+      labelPosition,
+      descriptionPosition,
+      isLabelColoredWhenFocusing,
+      isLabelClickable
+    } = configuration
+
+    const [focused, setFocused] = useState(false)
+    const isReadOnlyOrDisabled = [props.readonly, props.disabled].some(Boolean)
+
+    function handleFocus (...args: any[]) {
+      setFocused(true)
+      onFocus && onFocus(...args)
+    }
+
+    function handleBlur (...args: any[]) {
+      setFocused(false)
+      onBlur && onBlur(...args)
+    }
+
+    // NOTE
+    useEffect(() => {
+      if (!isLabelColoredWhenFocusing) return
+      if (focused && isReadOnlyOrDisabled) setFocused(false)
+    }, [focused, isLabelColoredWhenFocusing, isReadOnlyOrDisabled])
+
+    const hasError = Array.isArray(error) ? error.length > 0 : !!error
+
+    const _label = pug`
+      if label
+        Span.label(
+          key='label'
+          part='label'
+          styleName=[
+            currentLayout,
+            currentLayout + '-' + labelPosition,
+            {
+              focused: isLabelColoredWhenFocusing ? focused : false,
+              error: hasError
+            }
+          ]
+          onPress=isLabelClickable
+            ? _onLabelPress
+            : undefined
+        )
+          = label
+          if required === true
+            Text.required= ' *'
+    `
+    const _description = pug`
+      if description
+        Span.description(
+          key='description'
+          part='description'
+          styleName=[
+            currentLayout,
+            descriptionPosition,
+            currentLayout + '-' + descriptionPosition
+          ]
+          description
+        )= description
+    `
+
+    const passRef = ref ? { ref } : {}
+
+    const input = pug`
+      Component(
+        key='input'
+        part='wrapper'
+        layout=currentLayout
+        _hasError=hasError
+        onFocus=handleFocus
+        onBlur=handleBlur
+        ...passRef
+        ...props
+      )
+    `
+    const err = pug`
+      if hasError
+        each _error, index in (Array.isArray(error) ? error : [error])
+          Div.errorContainer(
+            key='error-' + index
+            styleName=[
+              currentLayout,
+              currentLayout + '-' + descriptionPosition,
+            ]
+            vAlign='center'
+            row
+          )
+            Icon.errorContainer-icon(icon=faExclamationCircle)
+            Span.errorContainer-text= _error
+    `
+
+    return pug`
+      Div.root(
+        part='root'
+        styleName=[currentLayout]
+      )
+        if currentLayout === 'rows'
+          if labelPosition === 'top'
+            = _label
+          if descriptionPosition === 'top'
+            = _description
+            = err
+          if labelPosition === 'right'
+            Div(vAlign='center' row)
+              = input
+              = _label
+          else
+            = input
+          if descriptionPosition === 'bottom'
+            = err
+            = _description
+        else if currentLayout === 'columns'
+          Div.leftBlock
+            = _label
+            = _description
+          Div.rightBlock
+            = input
+            = err
+        else if currentLayout === 'pure'
+          = input
+          = err
+    `
+  }
+
+  const componentDisplayName = Component.displayName ?? Component.name
+
+  InputWrapper.displayName = componentDisplayName + 'InputWrapper'
+
+  const ObservedInputWrapper = observer(
+    themed('InputWrapper', InputWrapper)
+  ) as any
+
+  ObservedInputWrapper[IS_WRAPPED] = true
+
+  return ObservedInputWrapper
+}
+
+styl`
+  $errorColor = var(--color-text-error)
+  $focusedColor = var(--color-text-primary)
+
+  // common
+  .label
+    color var(--InputWrapper-label-color)
+    align-self flex-start
+    font(body2)
+
+    &.focused
+      color $focusedColor
+
+    &.error
+      color $errorColor
+
+  .description
+    font(caption)
+
+  .required
+    color $errorColor
+    font-weight bold
+
+  .errorContainer
+    margin-top 1u
+    margin-bottom 0.5u
+
+    &-icon
+      color $errorColor
+
+    &-text
+      font(caption)
+      margin-left 0.5u
+      color $errorColor
+
+  // rows
+  .rows
+    &-top
+      .label&
+        margin-bottom 0.5u
+
+      .description&
+        margin-bottom 1u
+
+      .errorContainer&
+        margin-top 0
+        margin-bottom 1u
+
+    &-right
+      .label&
+        margin-left 1u
+
+    &-bottom
+      .description&
+        margin-top 0.5u
+
+  // columns
+  .leftBlock
+  .rightBlock
+    flex 1
+
+  .leftBlock
+    margin-right 1.5u
+
+  .rightBlock
+    margin-left 1.5u
+
+  .columns
+    .root&
+      flex-direction row
+      align-items center
+
+`