@startupjs-ui/number-input 0.1.13 → 0.1.16

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 +8 -0
  2. package/README.mdx +15 -11
  3. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
7
+
8
+ **Note:** Version bump only for package @startupjs-ui/number-input
9
+
10
+
11
+
12
+
13
+
6
14
  ## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
7
15
 
8
16
  **Note:** Version bump only for package @startupjs-ui/number-input
package/README.mdx CHANGED
@@ -6,7 +6,7 @@ import { Sandbox } from '@startupjs-ui/docs'
6
6
 
7
7
  # NumberInput
8
8
 
9
- NumberInput allows user to enter or edit number.
9
+ A numeric input field that lets users enter or edit a number. It supports increment/decrement buttons, min/max constraints, decimal precision via `step`, and unit labels. The `value` prop holds the current number, and `onChangeNumber` is called whenever it changes. You can also pass a `ref` to access the underlying TextInput, use `placeholder` for hint text, and set `returnKeyType` (defaults to `'done'`) for the keyboard return key.
10
10
 
11
11
  ```jsx
12
12
  import { NumberInput } from 'startupjs-ui'
@@ -26,6 +26,8 @@ return (
26
26
 
27
27
  ## Disabled
28
28
 
29
+ Set `disabled` to `true` to prevent all interactions with the input.
30
+
29
31
  ```jsx example
30
32
  return (
31
33
  <NumberInput
@@ -37,6 +39,8 @@ return (
37
39
 
38
40
  ## Readonly
39
41
 
42
+ Set `readonly` to `true` to display the value as non-editable text.
43
+
40
44
  ```jsx example
41
45
  return (
42
46
  <NumberInput
@@ -48,7 +52,7 @@ return (
48
52
 
49
53
  ## Step
50
54
 
51
- The step specifies how many decimal places can be entered, set by the numbers 1, 0.1, 0.01, etc. in the `step` property (1 by default).
55
+ The `step` prop controls the increment/decrement amount and the number of allowed decimal places. For example, `step={0.001}` allows up to three decimal places. Defaults to `1`.
52
56
 
53
57
  ```jsx example
54
58
  const [value, setValue] = useState()
@@ -65,7 +69,7 @@ return (
65
69
 
66
70
  ## Minimum and maximum value
67
71
 
68
- The minimum and maximum values are set by the `min` and `max` properties
72
+ Use the `min` and `max` props to constrain the allowed range.
69
73
 
70
74
  ```jsx example
71
75
  const [value, setValue] = useState()
@@ -83,7 +87,7 @@ return (
83
87
 
84
88
  ## Buttons mode
85
89
 
86
- Buttons allow user to change the number at the specified step. The position of the buttons can be changed by passing the `buttonsMode` property with the value `vertical` or `horizontal` (`vertical` by default) to the component or hidden by passing the `buttonsMode` property with the value `none` to the component.
90
+ The `buttonsMode` prop controls the layout of the increment/decrement buttons. Available values are `'vertical'` (default), `'horizontal'`, and `'none'` (hides the buttons entirely).
87
91
 
88
92
  ```jsx example
89
93
  const [valueVertical, setValueVertical] = useState()
@@ -114,7 +118,7 @@ return (
114
118
 
115
119
  ## Sizes
116
120
 
117
- Size can be modified using the `size` prop. Default size is `'m'`.
121
+ The `size` prop controls the input dimensions. Available values are `'s'`, `'m'` (default), and `'l'`.
118
122
 
119
123
  ```jsx example
120
124
  const [valueL, setValueL] = useState()
@@ -145,7 +149,7 @@ return (
145
149
 
146
150
  ## Units
147
151
 
148
- The `units` property displays the units of the input. By default, units are displayed to the left of the input. Use `unitsPosition='right'` to display the units on the right side of the input.
152
+ The `units` prop displays a label next to the input (such as a currency symbol). By default, units appear on the left. Use `unitsPosition='right'` to place them on the right side.
149
153
 
150
154
  ```jsx example
151
155
  const [value, setValue] = useState()
@@ -158,13 +162,13 @@ return (
158
162
  )
159
163
  ```
160
164
 
161
- ## Stylization
165
+ ## Styling
162
166
 
163
- For stylization can apply the properties:
167
+ Use the following props to customize the appearance:
164
168
 
165
- - `style` - to style the root component
166
- - `inputStyle` - to style the input
167
- - `buttonStyle` - for styling buttons
169
+ - `style` -- styles for the root wrapper
170
+ - `inputStyle` -- styles for the text input element
171
+ - `buttonStyle` -- styles for the increment/decrement buttons
168
172
 
169
173
  ```jsx example
170
174
  const [value, setValue] = useState()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@startupjs-ui/number-input",
3
- "version": "0.1.13",
3
+ "version": "0.1.16",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -8,16 +8,16 @@
8
8
  "types": "index.d.ts",
9
9
  "type": "module",
10
10
  "dependencies": {
11
- "@startupjs-ui/button": "^0.1.13",
11
+ "@startupjs-ui/button": "^0.1.16",
12
12
  "@startupjs-ui/core": "^0.1.11",
13
- "@startupjs-ui/div": "^0.1.13",
14
- "@startupjs-ui/span": "^0.1.13",
15
- "@startupjs-ui/text-input": "^0.1.13"
13
+ "@startupjs-ui/div": "^0.1.16",
14
+ "@startupjs-ui/span": "^0.1.16",
15
+ "@startupjs-ui/text-input": "^0.1.16"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": "*",
19
19
  "react-native": "*",
20
20
  "startupjs": "*"
21
21
  },
22
- "gitHead": "5cfdccf2bdae3873e968289a3e6b938fad02101a"
22
+ "gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
23
23
  }