duration-input-react 0.1.0 → 0.1.1
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 +22 -0
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,6 +19,7 @@ https://github.com/rcotta/duration-input
|
|
|
19
19
|
- Single `<input />` with dynamic `:` mask
|
|
20
20
|
- Modes: `ss`, `mm`, `hh`, `mm:ss`, `hh:mm`, `hh:mm:ss`
|
|
21
21
|
- Controlled value as total seconds (`number`)
|
|
22
|
+
- Accepts standard input props like `className`, `id`, `name`, `aria-*`
|
|
22
23
|
- Numeric, segment-aware editing
|
|
23
24
|
- Dynamic leading-segment width from configured max (`max*`)
|
|
24
25
|
- Better mobile behavior via `beforeinput` + `onChange` fallback
|
|
@@ -54,6 +55,27 @@ type DurationInputProps = Omit<
|
|
|
54
55
|
};
|
|
55
56
|
```
|
|
56
57
|
|
|
58
|
+
## Styling
|
|
59
|
+
|
|
60
|
+
Use `className` or inline styles like any standard input:
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
<DurationInput
|
|
64
|
+
value={seconds}
|
|
65
|
+
onChange={setSeconds}
|
|
66
|
+
mode="hh:mm:ss"
|
|
67
|
+
className="duration-field"
|
|
68
|
+
/>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
```css
|
|
72
|
+
.duration-field {
|
|
73
|
+
width: 220px;
|
|
74
|
+
max-width: 100%;
|
|
75
|
+
padding: 10px 12px;
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
57
79
|
## Validation rules
|
|
58
80
|
|
|
59
81
|
- `hh`: clamps with `maxHours` when provided; otherwise unbounded
|
package/dist/index.cjs
CHANGED
|
@@ -214,6 +214,7 @@ function DurationInput({
|
|
|
214
214
|
maxSeconds,
|
|
215
215
|
disabled = false,
|
|
216
216
|
inputMode = "numeric",
|
|
217
|
+
className,
|
|
217
218
|
...inputProps
|
|
218
219
|
}) {
|
|
219
220
|
const inputRef = (0, import_react.useRef)(null);
|
|
@@ -387,6 +388,7 @@ function DurationInput({
|
|
|
387
388
|
ref: inputRef,
|
|
388
389
|
type: "text",
|
|
389
390
|
inputMode,
|
|
391
|
+
className,
|
|
390
392
|
value: activeDisplay,
|
|
391
393
|
disabled,
|
|
392
394
|
onFocus: () => {
|
package/dist/index.d.cts
CHANGED
|
@@ -10,7 +10,8 @@ type DurationInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' |
|
|
|
10
10
|
maxHours?: number;
|
|
11
11
|
maxMinutes?: number;
|
|
12
12
|
maxSeconds?: number;
|
|
13
|
+
className?: string;
|
|
13
14
|
};
|
|
14
|
-
declare function DurationInput({ value, onChange, mode, maxHours, maxMinutes, maxSeconds, disabled, inputMode, ...inputProps }: DurationInputProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function DurationInput({ value, onChange, mode, maxHours, maxMinutes, maxSeconds, disabled, inputMode, className, ...inputProps }: DurationInputProps): react_jsx_runtime.JSX.Element;
|
|
15
16
|
|
|
16
17
|
export { DurationInput, type DurationInputProps, type DurationMode };
|
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,8 @@ type DurationInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' |
|
|
|
10
10
|
maxHours?: number;
|
|
11
11
|
maxMinutes?: number;
|
|
12
12
|
maxSeconds?: number;
|
|
13
|
+
className?: string;
|
|
13
14
|
};
|
|
14
|
-
declare function DurationInput({ value, onChange, mode, maxHours, maxMinutes, maxSeconds, disabled, inputMode, ...inputProps }: DurationInputProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function DurationInput({ value, onChange, mode, maxHours, maxMinutes, maxSeconds, disabled, inputMode, className, ...inputProps }: DurationInputProps): react_jsx_runtime.JSX.Element;
|
|
15
16
|
|
|
16
17
|
export { DurationInput, type DurationInputProps, type DurationMode };
|
package/dist/index.js
CHANGED
|
@@ -188,6 +188,7 @@ function DurationInput({
|
|
|
188
188
|
maxSeconds,
|
|
189
189
|
disabled = false,
|
|
190
190
|
inputMode = "numeric",
|
|
191
|
+
className,
|
|
191
192
|
...inputProps
|
|
192
193
|
}) {
|
|
193
194
|
const inputRef = useRef(null);
|
|
@@ -361,6 +362,7 @@ function DurationInput({
|
|
|
361
362
|
ref: inputRef,
|
|
362
363
|
type: "text",
|
|
363
364
|
inputMode,
|
|
365
|
+
className,
|
|
364
366
|
value: activeDisplay,
|
|
365
367
|
disabled,
|
|
366
368
|
onFocus: () => {
|