@startupjs-ui/input 0.1.13 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.mdx +19 -12
  3. package/package.json +20 -20
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.1.17](https://github.com/startupjs/startupjs-ui/compare/v0.1.16...v0.1.17) (2026-02-12)
7
+
8
+ **Note:** Version bump only for package @startupjs-ui/input
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
15
+
16
+ **Note:** Version bump only for package @startupjs-ui/input
17
+
18
+
19
+
20
+
21
+
6
22
  ## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
7
23
 
8
24
  **Note:** Version bump only for package @startupjs-ui/input
package/README.mdx CHANGED
@@ -6,28 +6,35 @@ import { Sandbox } from '@startupjs-ui/docs'
6
6
 
7
7
  # Input
8
8
 
9
- 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.
9
+ Input is a universal wrapper around various input components. It provides two-way data bindings via the `$value` prop (or controlled mode via `value`), customizable layouts for displaying inputs with a label and description, and built-in error display.
10
10
 
11
11
  ```jsx
12
12
  import { Input } from 'startupjs-ui'
13
13
  ```
14
14
 
15
- **Input components**
15
+ **Input types**
16
16
 
17
- 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).
17
+ You can render any of the supported input components by setting the `type` prop (defaults to `'text'`). Alternatively, use the `input` prop to explicitly override the input type, bypassing schema-based guessing.
18
18
 
19
- You can use any of the above components by specifying the `type` property.
19
+ Available types: [array](/docs/forms/Array), [checkbox](/docs/forms/Checkbox), [color](/docs/forms/ColorPicker), [date](/docs/forms/DateTimePicker), [datetime](/docs/forms/DateTimePicker), [file](/docs/forms/FileInput), [multiselect](/docs/forms/Multiselect), [number](/docs/forms/NumberInput), [object](/docs/forms/ObjectInput), [password](/docs/forms/PasswordInput), [radio](/docs/forms/Radio), [range](/docs/forms/RangeInput), [rank](/docs/forms/RankInput), [select](/docs/forms/Select), [time](/docs/forms/DateTimePicker), [text](/docs/forms/TextInput).
20
20
 
21
21
  **Layouts**
22
22
 
23
- Possible types are:
24
- - `pure` displays input without label and description
25
- - `rows` displays input in one row with provided label and description
26
- - `columns` displays input in two columns with provided label and description
23
+ The `layout` prop controls how the label and description are displayed relative to the input:
27
24
 
28
- There are several rules that determine which layout to use:
29
- - for tablet screen resolutions and less the `rows` layout is always used
30
- - 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`
25
+ - `'pure'` -- renders the input without a label or description
26
+ - `'rows'` -- displays the label and description above the input in a single column
27
+ - `'columns'` -- displays the label and description in a separate column beside the input
28
+
29
+ Layout behavior follows these rules:
30
+ - On tablet-sized screens and smaller, the `'rows'` layout is always used regardless of the `layout` prop.
31
+ - On larger screens, you can specify any layout. If no `layout` is provided, it defaults to `'rows'` when a `label` or `description` is set, and `'pure'` otherwise.
32
+
33
+ **Additional props**
34
+
35
+ The component supports `disabled` to prevent interaction, `readonly` for a non-editable display, `required` to mark the field as required, and `placeholder` for placeholder text. For select-like inputs, use `options` or `enum`; for array inputs, use `items`; and for object inputs, use `properties`. The `configuration` prop allows overriding the wrapper configuration. Use `testId` for testing and `ref` for imperative access to the underlying input.
36
+
37
+ Change handlers vary by input type: `onChange` (checkbox, select, range, etc.), `onChangeText` (text), `onChangeNumber` (number), `onChangeDate` (date/time), and `onChangeColor` (color). Focus and blur events are available via `onFocus` and `onBlur`.
31
38
 
32
39
  ## Simple example
33
40
 
@@ -60,7 +67,7 @@ return (
60
67
 
61
68
  ## Displaying errors
62
69
 
63
- To display an error, pass the error text to the `error` property
70
+ To display an error, pass the error text to the `error` prop.
64
71
 
65
72
  ```jsx example
66
73
  const $value = $()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@startupjs-ui/input",
3
- "version": "0.1.13",
3
+ "version": "0.1.17",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -13,25 +13,25 @@
13
13
  },
14
14
  "dependencies": {
15
15
  "@fortawesome/free-solid-svg-icons": "^7.1.0",
16
- "@startupjs-ui/array-input": "^0.1.13",
17
- "@startupjs-ui/card": "^0.1.13",
18
- "@startupjs-ui/checkbox": "^0.1.13",
19
- "@startupjs-ui/color-picker": "^0.1.13",
16
+ "@startupjs-ui/array-input": "^0.1.17",
17
+ "@startupjs-ui/card": "^0.1.16",
18
+ "@startupjs-ui/checkbox": "^0.1.16",
19
+ "@startupjs-ui/color-picker": "^0.1.17",
20
20
  "@startupjs-ui/core": "^0.1.11",
21
- "@startupjs-ui/date-time-picker": "^0.1.13",
22
- "@startupjs-ui/div": "^0.1.13",
23
- "@startupjs-ui/file-input": "^0.1.13",
24
- "@startupjs-ui/icon": "^0.1.13",
25
- "@startupjs-ui/multi-select": "^0.1.13",
26
- "@startupjs-ui/number-input": "^0.1.13",
27
- "@startupjs-ui/object-input": "^0.1.13",
28
- "@startupjs-ui/password-input": "^0.1.13",
29
- "@startupjs-ui/radio": "^0.1.13",
30
- "@startupjs-ui/range-input": "^0.1.13",
31
- "@startupjs-ui/rank": "^0.1.13",
32
- "@startupjs-ui/select": "^0.1.13",
33
- "@startupjs-ui/span": "^0.1.13",
34
- "@startupjs-ui/text-input": "^0.1.13",
21
+ "@startupjs-ui/date-time-picker": "^0.1.16",
22
+ "@startupjs-ui/div": "^0.1.16",
23
+ "@startupjs-ui/file-input": "^0.1.17",
24
+ "@startupjs-ui/icon": "^0.1.16",
25
+ "@startupjs-ui/multi-select": "^0.1.16",
26
+ "@startupjs-ui/number-input": "^0.1.16",
27
+ "@startupjs-ui/object-input": "^0.1.17",
28
+ "@startupjs-ui/password-input": "^0.1.16",
29
+ "@startupjs-ui/radio": "^0.1.17",
30
+ "@startupjs-ui/range-input": "^0.1.17",
31
+ "@startupjs-ui/rank": "^0.1.16",
32
+ "@startupjs-ui/select": "^0.1.16",
33
+ "@startupjs-ui/span": "^0.1.16",
34
+ "@startupjs-ui/text-input": "^0.1.16",
35
35
  "lodash": "^4.17.20"
36
36
  },
37
37
  "peerDependencies": {
@@ -39,5 +39,5 @@
39
39
  "react-native": "*",
40
40
  "startupjs": "*"
41
41
  },
42
- "gitHead": "5cfdccf2bdae3873e968289a3e6b938fad02101a"
42
+ "gitHead": "902cb7536d017b53dc268cc54e8e54818279744c"
43
43
  }