jattac.libs.web.zest-textbox 0.1.4 → 0.1.5
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.
- package/README.md +11 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,6 +24,7 @@ A delightful, feature-rich, and highly customizable React textbox component. Bui
|
|
|
24
24
|
- **Light & Dark Mode:** Automatically adapts to the user's system theme, or can be forced into a specific mode.
|
|
25
25
|
- **Password Visibility Toggle:** A common-sense feature for all password inputs.
|
|
26
26
|
- **Character Counter:** Provides clear feedback on input length.
|
|
27
|
+
- **Enhanced Numeric Input:** Smart handling for numeric inputs, allowing decimals and negatives while preventing non-numeric characters.
|
|
27
28
|
- **Engaging Animations:** Subtle, delightful animations on focus and interaction.
|
|
28
29
|
- **Progress Bar:** A visual indicator of the user's progress towards the `maxLength`.
|
|
29
30
|
- **Accessible:** Uses `rem` units for scalability and follows accessibility best practices.
|
|
@@ -93,6 +94,16 @@ Enable the character counter by setting the `maxLength` prop. You can also enabl
|
|
|
93
94
|
/>
|
|
94
95
|
```
|
|
95
96
|
|
|
97
|
+
### Numeric Input
|
|
98
|
+
|
|
99
|
+
For numeric inputs, set the `type` prop to `"number"`. The component will automatically handle filtering to allow only digits, a single decimal point, and a single leading negative sign.
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
<ZestTextbox type="number" placeholder="Enter a number" />
|
|
103
|
+
<ZestTextbox type="number" placeholder="Enter a decimal number" defaultValue="3.14" />
|
|
104
|
+
<ZestTextbox type="number" placeholder="Enter a negative number" defaultValue="-100" />
|
|
105
|
+
```
|
|
106
|
+
|
|
96
107
|
### Sizing
|
|
97
108
|
|
|
98
109
|
The `zSize` prop allows you to control the size of the textbox.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jattac.libs.web.zest-textbox",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "A delightful, feature-rich, and highly customizable React textbox component. Packed with features like automatic theme detection, password visibility toggle, character counters, and engaging animations.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|