@trsys-tech/matrix-library 0.5.1-beta.2 → 0.5.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/dist/duration.es.js +24 -24
- package/dist/duration.es.js.map +1 -1
- package/dist/textarea.es.js +4 -4
- package/dist/textarea.es.js.map +1 -1
- package/dist/textfield.es.js +4 -4
- package/dist/textfield.es.js.map +1 -1
- package/package.json +1 -1
package/dist/duration.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs as $, jsx as E } from "react/jsx-runtime";
|
|
2
2
|
import * as p from "react";
|
|
3
3
|
import { tv as F } from "tailwind-variants";
|
|
4
|
-
import { cn as
|
|
4
|
+
import { cn as h } from "./utils.es.js";
|
|
5
5
|
const H = F({
|
|
6
6
|
base: [
|
|
7
|
-
"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium
|
|
7
|
+
"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
|
|
8
8
|
"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100",
|
|
9
9
|
"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100"
|
|
10
10
|
],
|
|
@@ -23,26 +23,26 @@ const H = F({
|
|
|
23
23
|
const f = p.useCallback(
|
|
24
24
|
(e) => {
|
|
25
25
|
const r = e.replace(/\D/g, ""), n = u ? 6 : 4, a = r.substring(0, n).padEnd(n, "0");
|
|
26
|
-
let t = a.substring(0, 2), o = a.substring(2, 4),
|
|
27
|
-
parseInt(t, 10) > 23 && (t = "23"), parseInt(o, 10) > 59 && (o = "59"), u && parseInt(
|
|
28
|
-
let
|
|
29
|
-
return n >= 4 && (
|
|
26
|
+
let t = a.substring(0, 2), o = a.substring(2, 4), i = u ? a.substring(4, 6) : "";
|
|
27
|
+
parseInt(t, 10) > 23 && (t = "23"), parseInt(o, 10) > 59 && (o = "59"), u && parseInt(i, 10) > 59 && (i = "59");
|
|
28
|
+
let s = t;
|
|
29
|
+
return n >= 4 && (s += `:${o}`), u && (s += `:${i}`), s;
|
|
30
30
|
},
|
|
31
31
|
[u]
|
|
32
|
-
), [l, m] = p.useState(() => f(A || "")),
|
|
33
|
-
p.useImperativeHandle(V, () =>
|
|
32
|
+
), [l, m] = p.useState(() => f(A || "")), y = p.useRef(null);
|
|
33
|
+
p.useImperativeHandle(V, () => y.current), p.useEffect(() => {
|
|
34
34
|
d !== void 0 && m(f(d));
|
|
35
35
|
}, [d, f]);
|
|
36
36
|
const M = (e) => {
|
|
37
37
|
e.preventDefault();
|
|
38
38
|
const r = e.currentTarget, { key: n } = e, a = r.selectionStart ?? 0, t = l.substring(0, a) + n + l.substring(a + 1), o = f(t);
|
|
39
39
|
if (m(o), c) {
|
|
40
|
-
const
|
|
41
|
-
c(
|
|
40
|
+
const i = { ...e, target: { ...e.target, value: o } };
|
|
41
|
+
c(i);
|
|
42
42
|
}
|
|
43
43
|
requestAnimationFrame(() => {
|
|
44
|
-
let
|
|
45
|
-
o[
|
|
44
|
+
let i = a + 1;
|
|
45
|
+
o[i] === ":" && i++, r.setSelectionRange(i, i);
|
|
46
46
|
});
|
|
47
47
|
}, S = (e) => {
|
|
48
48
|
e.preventDefault();
|
|
@@ -52,13 +52,13 @@ const H = F({
|
|
|
52
52
|
if (l[n - 1] === ":")
|
|
53
53
|
a = `${l.substring(0, n - 2)}0${l.substring(n - 1)}`, t = n - 2;
|
|
54
54
|
else {
|
|
55
|
-
const
|
|
55
|
+
const i = l.replace(/\D/g, ""), s = n - Math.floor((n - 1) / 3), N = `${i.substring(0, s - 1)}0${i.substring(s)}`;
|
|
56
56
|
a = f(N);
|
|
57
57
|
}
|
|
58
58
|
const o = f(a);
|
|
59
59
|
if (m(o), c) {
|
|
60
|
-
const
|
|
61
|
-
c(
|
|
60
|
+
const i = { ...e, target: { ...e.target, value: o } };
|
|
61
|
+
c(i);
|
|
62
62
|
}
|
|
63
63
|
requestAnimationFrame(() => {
|
|
64
64
|
r.setSelectionRange(t, t);
|
|
@@ -69,28 +69,28 @@ const H = F({
|
|
|
69
69
|
if (o <= 2)
|
|
70
70
|
t[0] = (t[0] + a + 24) % 24;
|
|
71
71
|
else if (o >= 3 && o <= 5) {
|
|
72
|
-
const
|
|
73
|
-
|
|
72
|
+
const s = t[1] + a;
|
|
73
|
+
s >= 60 ? (t[0] = (t[0] + 1) % 24, t[1] = s % 60) : s < 0 ? (t[0] = (t[0] - 1 + 24) % 24, t[1] = 59) : t[1] = s;
|
|
74
74
|
} else if (u && o >= 6) {
|
|
75
|
-
const
|
|
76
|
-
|
|
75
|
+
const s = t[2] + a;
|
|
76
|
+
s >= 60 ? (t[1] += 1, t[2] = s % 60) : s < 0 ? (t[1] -= 1, t[2] = 59) : t[2] = s, t[1] >= 60 ? (t[0] = (t[0] + 1) % 24, t[1] %= 60) : t[1] < 0 && (t[0] = (t[0] - 1 + 24) % 24, t[1] = 59);
|
|
77
77
|
}
|
|
78
|
-
const
|
|
79
|
-
m(
|
|
78
|
+
const i = t.map((s) => String(s).padStart(2, "0")).join(":");
|
|
79
|
+
m(i), c && c({ target: { value: i } }), requestAnimationFrame(() => {
|
|
80
80
|
r.setSelectionRange(o, o);
|
|
81
81
|
});
|
|
82
82
|
}, I = (e) => {
|
|
83
83
|
const { key: r, currentTarget: n } = e, { selectionStart: a, selectionEnd: t } = n;
|
|
84
84
|
r.length === 1 && /\d/.test(r) ? M(e) : r === "Backspace" ? S(e) : r === "ArrowUp" || r === "ArrowDown" ? k(e) : r === "ArrowRight" || r === "ArrowLeft" || r.length > 1 || a !== t || e.preventDefault();
|
|
85
85
|
};
|
|
86
|
-
return /* @__PURE__ */ $("div", { ...R, className:
|
|
86
|
+
return /* @__PURE__ */ $("div", { ...R, className: h(H({ size: D, className: v })), "aria-disabled": b, children: [
|
|
87
87
|
x,
|
|
88
88
|
/* @__PURE__ */ E(
|
|
89
89
|
"input",
|
|
90
90
|
{
|
|
91
91
|
type: "text",
|
|
92
92
|
inputMode: "numeric",
|
|
93
|
-
ref:
|
|
93
|
+
ref: y,
|
|
94
94
|
onKeyDown: I,
|
|
95
95
|
onChange: () => {
|
|
96
96
|
},
|
|
@@ -98,7 +98,7 @@ const H = F({
|
|
|
98
98
|
placeholder: u ? "HH:MM:SS" : "HH:MM",
|
|
99
99
|
disabled: b,
|
|
100
100
|
...g?.inputProps ?? {},
|
|
101
|
-
className:
|
|
101
|
+
className: h(
|
|
102
102
|
"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300",
|
|
103
103
|
x ? "ps-1 pe-3" : "px-3",
|
|
104
104
|
g?.inputProps?.className
|
package/dist/duration.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duration.es.js","sources":["../src/components/duration/Duration.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n base: [\r\n \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-7\",\r\n md: \"h-8\",\r\n lg: \"h-11\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n});\r\n\r\ninterface DurationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n disabled?: boolean;\r\n endAdornment?: React.ReactNode;\r\n startAdornment?: React.ReactNode;\r\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n value?: string;\r\n defaultValue?: string;\r\n showSeconds?: boolean;\r\n slotProps?: {\r\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n };\r\n}\r\n\r\nconst Duration = React.forwardRef<HTMLInputElement, DurationProps>(\r\n (\r\n { className, slotProps, endAdornment, startAdornment, size, value: _value, onChange, defaultValue, disabled, showSeconds = false, ...props },\r\n ref,\r\n ) => {\r\n const getFormattedValue = React.useCallback(\r\n (val: string) => {\r\n const digits = val.replace(/\\D/g, \"\");\r\n const maxLength = showSeconds ? 6 : 4;\r\n const limitedDigits = digits.substring(0, maxLength).padEnd(maxLength, \"0\");\r\n\r\n let hours = limitedDigits.substring(0, 2);\r\n let minutes = limitedDigits.substring(2, 4);\r\n let seconds = showSeconds ? limitedDigits.substring(4, 6) : \"\";\r\n\r\n if (parseInt(hours, 10) > 23) hours = \"23\";\r\n if (parseInt(minutes, 10) > 59) minutes = \"59\";\r\n if (showSeconds && parseInt(seconds, 10) > 59) seconds = \"59\";\r\n\r\n let formatted = hours;\r\n if (maxLength >= 4) formatted += `:${minutes}`;\r\n if (showSeconds) formatted += `:${seconds}`;\r\n\r\n return formatted;\r\n },\r\n [showSeconds],\r\n );\r\n\r\n const [value, setValue] = React.useState(() => getFormattedValue(defaultValue || \"\"));\r\n const inputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n React.useEffect(() => {\r\n if (_value !== undefined) {\r\n setValue(getFormattedValue(_value));\r\n }\r\n }, [_value, getFormattedValue]);\r\n\r\n const handleNumericInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const selection = input.selectionStart ?? 0;\r\n const nextValue = value.substring(0, selection) + key + value.substring(selection + 1);\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n let nextCursor = selection + 1;\r\n if (formatted[nextCursor] === \":\") {\r\n nextCursor++;\r\n }\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const selection = input.selectionStart ?? 0;\r\n if (selection === 0) return;\r\n\r\n let nextValue = \"\";\r\n let nextCursor = selection - 1;\r\n\r\n if (value[selection - 1] === \":\") {\r\n nextValue = `${value.substring(0, selection - 2)}0${value.substring(selection - 1)}`;\r\n nextCursor = selection - 2;\r\n } else {\r\n const currentValue = value.replace(/\\D/g, \"\");\r\n const cursorIndex = selection - Math.floor((selection - 1) / 3);\r\n const nextDigits = `${currentValue.substring(0, cursorIndex - 1)}0${currentValue.substring(cursorIndex)}`;\r\n nextValue = getFormattedValue(nextDigits);\r\n }\r\n\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleArrowKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const increment = key === \"ArrowUp\" ? 1 : -1;\r\n const parts = value.split(\":\").map(Number);\r\n const selection = input.selectionStart ?? 0;\r\n\r\n if (selection <= 2) {\r\n // Hours\r\n parts[0] = (parts[0] + increment + 24) % 24;\r\n } else if (selection >= 3 && selection <= 5) {\r\n // Minutes\r\n const newMinutes = parts[1] + increment;\r\n if (newMinutes >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] = newMinutes % 60;\r\n } else if (newMinutes < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n } else {\r\n parts[1] = newMinutes;\r\n }\r\n } else if (showSeconds && selection >= 6) {\r\n // Seconds\r\n const newSeconds = parts[2] + increment;\r\n if (newSeconds >= 60) {\r\n parts[1] += 1;\r\n parts[2] = newSeconds % 60;\r\n } else if (newSeconds < 0) {\r\n parts[1] -= 1;\r\n parts[2] = 59;\r\n } else {\r\n parts[2] = newSeconds;\r\n }\r\n\r\n if (parts[1] >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] %= 60;\r\n } else if (parts[1] < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n }\r\n }\r\n\r\n const newValue = parts.map(part => String(part).padStart(2, \"0\")).join(\":\");\r\n setValue(newValue);\r\n if (onChange) {\r\n onChange({ target: { value: newValue } } as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(selection, selection);\r\n });\r\n };\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n const { key, currentTarget } = e;\r\n const { selectionStart, selectionEnd } = currentTarget;\r\n\r\n if (key.length === 1 && /\\d/.test(key)) {\r\n handleNumericInput(e);\r\n } else if (key === \"Backspace\") {\r\n handleBackspace(e);\r\n } else if (key === \"ArrowUp\" || key === \"ArrowDown\") {\r\n handleArrowKey(e);\r\n } else if (key === \"ArrowRight\" || key === \"ArrowLeft\" || key.length > 1 || selectionStart !== selectionEnd) {\r\n // Allow navigation, control keys, and replacing a selection\r\n } else {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n return (\r\n <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n {startAdornment}\r\n <input\r\n type=\"text\"\r\n inputMode=\"numeric\"\r\n ref={inputRef}\r\n onKeyDown={handleKeyDown}\r\n onChange={() => {}}\r\n value={value}\r\n placeholder={showSeconds ? \"HH:MM:SS\" : \"HH:MM\"}\r\n disabled={disabled}\r\n {...(slotProps?.inputProps ?? {})}\r\n className={cn(\r\n \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n slotProps?.inputProps?.className,\r\n )}\r\n />\r\n\r\n {endAdornment}\r\n </div>\r\n );\r\n },\r\n);\r\nDuration.displayName = \"Duration\";\r\n\r\nexport { Duration, type DurationProps };\r\n"],"names":["textFieldVariants","tv","Duration","React","className","slotProps","endAdornment","startAdornment","size","_value","onChange","defaultValue","disabled","showSeconds","props","ref","getFormattedValue","val","digits","maxLength","limitedDigits","hours","minutes","seconds","formatted","value","setValue","inputRef","handleNumericInput","input","key","selection","nextValue","syntheticEvent","nextCursor","handleBackspace","currentValue","cursorIndex","nextDigits","handleArrowKey","increment","parts","newMinutes","newSeconds","newValue","part","handleKeyDown","currentTarget","selectionStart","selectionEnd","jsxs","cn","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"duration.es.js","sources":["../src/components/duration/Duration.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n base: [\r\n \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-7\",\r\n md: \"h-8\",\r\n lg: \"h-11\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n});\r\n\r\ninterface DurationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n disabled?: boolean;\r\n endAdornment?: React.ReactNode;\r\n startAdornment?: React.ReactNode;\r\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n value?: string;\r\n defaultValue?: string;\r\n showSeconds?: boolean;\r\n slotProps?: {\r\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n };\r\n}\r\n\r\nconst Duration = React.forwardRef<HTMLInputElement, DurationProps>(\r\n (\r\n { className, slotProps, endAdornment, startAdornment, size, value: _value, onChange, defaultValue, disabled, showSeconds = false, ...props },\r\n ref,\r\n ) => {\r\n const getFormattedValue = React.useCallback(\r\n (val: string) => {\r\n const digits = val.replace(/\\D/g, \"\");\r\n const maxLength = showSeconds ? 6 : 4;\r\n const limitedDigits = digits.substring(0, maxLength).padEnd(maxLength, \"0\");\r\n\r\n let hours = limitedDigits.substring(0, 2);\r\n let minutes = limitedDigits.substring(2, 4);\r\n let seconds = showSeconds ? limitedDigits.substring(4, 6) : \"\";\r\n\r\n if (parseInt(hours, 10) > 23) hours = \"23\";\r\n if (parseInt(minutes, 10) > 59) minutes = \"59\";\r\n if (showSeconds && parseInt(seconds, 10) > 59) seconds = \"59\";\r\n\r\n let formatted = hours;\r\n if (maxLength >= 4) formatted += `:${minutes}`;\r\n if (showSeconds) formatted += `:${seconds}`;\r\n\r\n return formatted;\r\n },\r\n [showSeconds],\r\n );\r\n\r\n const [value, setValue] = React.useState(() => getFormattedValue(defaultValue || \"\"));\r\n const inputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\r\n\r\n React.useEffect(() => {\r\n if (_value !== undefined) {\r\n setValue(getFormattedValue(_value));\r\n }\r\n }, [_value, getFormattedValue]);\r\n\r\n const handleNumericInput = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const selection = input.selectionStart ?? 0;\r\n const nextValue = value.substring(0, selection) + key + value.substring(selection + 1);\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n let nextCursor = selection + 1;\r\n if (formatted[nextCursor] === \":\") {\r\n nextCursor++;\r\n }\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const selection = input.selectionStart ?? 0;\r\n if (selection === 0) return;\r\n\r\n let nextValue = \"\";\r\n let nextCursor = selection - 1;\r\n\r\n if (value[selection - 1] === \":\") {\r\n nextValue = `${value.substring(0, selection - 2)}0${value.substring(selection - 1)}`;\r\n nextCursor = selection - 2;\r\n } else {\r\n const currentValue = value.replace(/\\D/g, \"\");\r\n const cursorIndex = selection - Math.floor((selection - 1) / 3);\r\n const nextDigits = `${currentValue.substring(0, cursorIndex - 1)}0${currentValue.substring(cursorIndex)}`;\r\n nextValue = getFormattedValue(nextDigits);\r\n }\r\n\r\n const formatted = getFormattedValue(nextValue);\r\n setValue(formatted);\r\n\r\n if (onChange) {\r\n const syntheticEvent = { ...e, target: { ...e.target, value: formatted } };\r\n onChange(syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(nextCursor, nextCursor);\r\n });\r\n };\r\n\r\n const handleArrowKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const input = e.currentTarget;\r\n const { key } = e;\r\n const increment = key === \"ArrowUp\" ? 1 : -1;\r\n const parts = value.split(\":\").map(Number);\r\n const selection = input.selectionStart ?? 0;\r\n\r\n if (selection <= 2) {\r\n // Hours\r\n parts[0] = (parts[0] + increment + 24) % 24;\r\n } else if (selection >= 3 && selection <= 5) {\r\n // Minutes\r\n const newMinutes = parts[1] + increment;\r\n if (newMinutes >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] = newMinutes % 60;\r\n } else if (newMinutes < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n } else {\r\n parts[1] = newMinutes;\r\n }\r\n } else if (showSeconds && selection >= 6) {\r\n // Seconds\r\n const newSeconds = parts[2] + increment;\r\n if (newSeconds >= 60) {\r\n parts[1] += 1;\r\n parts[2] = newSeconds % 60;\r\n } else if (newSeconds < 0) {\r\n parts[1] -= 1;\r\n parts[2] = 59;\r\n } else {\r\n parts[2] = newSeconds;\r\n }\r\n\r\n if (parts[1] >= 60) {\r\n parts[0] = (parts[0] + 1) % 24;\r\n parts[1] %= 60;\r\n } else if (parts[1] < 0) {\r\n parts[0] = (parts[0] - 1 + 24) % 24;\r\n parts[1] = 59;\r\n }\r\n }\r\n\r\n const newValue = parts.map(part => String(part).padStart(2, \"0\")).join(\":\");\r\n setValue(newValue);\r\n if (onChange) {\r\n onChange({ target: { value: newValue } } as React.ChangeEvent<HTMLInputElement>);\r\n }\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(selection, selection);\r\n });\r\n };\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n const { key, currentTarget } = e;\r\n const { selectionStart, selectionEnd } = currentTarget;\r\n\r\n if (key.length === 1 && /\\d/.test(key)) {\r\n handleNumericInput(e);\r\n } else if (key === \"Backspace\") {\r\n handleBackspace(e);\r\n } else if (key === \"ArrowUp\" || key === \"ArrowDown\") {\r\n handleArrowKey(e);\r\n } else if (key === \"ArrowRight\" || key === \"ArrowLeft\" || key.length > 1 || selectionStart !== selectionEnd) {\r\n // Allow navigation, control keys, and replacing a selection\r\n } else {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n return (\r\n <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n {startAdornment}\r\n <input\r\n type=\"text\"\r\n inputMode=\"numeric\"\r\n ref={inputRef}\r\n onKeyDown={handleKeyDown}\r\n onChange={() => {}}\r\n value={value}\r\n placeholder={showSeconds ? \"HH:MM:SS\" : \"HH:MM\"}\r\n disabled={disabled}\r\n {...(slotProps?.inputProps ?? {})}\r\n className={cn(\r\n \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n slotProps?.inputProps?.className,\r\n )}\r\n />\r\n\r\n {endAdornment}\r\n </div>\r\n );\r\n },\r\n);\r\nDuration.displayName = \"Duration\";\r\n\r\nexport { Duration, type DurationProps };\r\n"],"names":["textFieldVariants","tv","Duration","React","className","slotProps","endAdornment","startAdornment","size","_value","onChange","defaultValue","disabled","showSeconds","props","ref","getFormattedValue","val","digits","maxLength","limitedDigits","hours","minutes","seconds","formatted","value","setValue","inputRef","handleNumericInput","input","key","selection","nextValue","syntheticEvent","nextCursor","handleBackspace","currentValue","cursorIndex","nextDigits","handleArrowKey","increment","parts","newMinutes","newSeconds","newValue","part","handleKeyDown","currentTarget","selectionStart","selectionEnd","jsxs","cn","jsx"],"mappings":"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"}
|
package/dist/textarea.es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import * as o from "react";
|
|
3
3
|
import { cn as d } from "./utils.es.js";
|
|
4
|
-
const
|
|
4
|
+
const i = o.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ a(
|
|
5
5
|
"textarea",
|
|
6
6
|
{
|
|
7
7
|
className: d(
|
|
8
|
-
"flex min-h-[60px] w-full rounded-sm border border-input bg-transparent px-3 py-2 text-xs font-medium
|
|
8
|
+
"flex min-h-[60px] w-full rounded-sm border border-input bg-transparent px-3 py-2 text-xs font-medium text-text",
|
|
9
9
|
"placeholder:text-text-300 focus-visible:outline-none focus-visible:border-primary disabled:opacity-50 disabled:text-text-300 disabled:bg-gray-100 disabled:border-gray-100",
|
|
10
10
|
e
|
|
11
11
|
),
|
|
@@ -13,8 +13,8 @@ const s = o.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ a(
|
|
|
13
13
|
...t
|
|
14
14
|
}
|
|
15
15
|
));
|
|
16
|
-
|
|
16
|
+
i.displayName = "Textarea";
|
|
17
17
|
export {
|
|
18
|
-
|
|
18
|
+
i as Textarea
|
|
19
19
|
};
|
|
20
20
|
//# sourceMappingURL=textarea.es.js.map
|
package/dist/textarea.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.es.js","sources":["../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {\n return (\n <textarea\n className={cn(\n \"flex min-h-[60px] w-full rounded-sm border border-input bg-transparent px-3 py-2 text-xs font-medium
|
|
1
|
+
{"version":3,"file":"textarea.es.js","sources":["../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {\n return (\n <textarea\n className={cn(\n \"flex min-h-[60px] w-full rounded-sm border border-input bg-transparent px-3 py-2 text-xs font-medium text-text\",\n \"placeholder:text-text-300 focus-visible:outline-none focus-visible:border-primary disabled:opacity-50 disabled:text-text-300 disabled:bg-gray-100 disabled:border-gray-100\",\n className,\n )}\n ref={ref}\n {...props}\n />\n );\n});\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n"],"names":["Textarea","React","className","props","ref","jsx","cn"],"mappings":";;;AAMA,MAAMA,IAAWC,EAAM,WAA+C,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAE5F,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAEF,KAAAE;AAAA,IACC,GAAGD;AAAA,EAAA;AAAA,CAGT;AACDH,EAAS,cAAc;"}
|
package/dist/textfield.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs as c, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import * as b from "react";
|
|
3
|
-
import { tv as
|
|
3
|
+
import { tv as g } from "tailwind-variants";
|
|
4
4
|
import { cn as n } from "./utils.es.js";
|
|
5
|
-
const
|
|
5
|
+
const h = g({
|
|
6
6
|
base: [
|
|
7
|
-
"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium
|
|
7
|
+
"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
|
|
8
8
|
"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100",
|
|
9
9
|
"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100"
|
|
10
10
|
],
|
|
@@ -19,7 +19,7 @@ const g = h({
|
|
|
19
19
|
size: "md"
|
|
20
20
|
}
|
|
21
21
|
}), y = b.forwardRef(
|
|
22
|
-
({ className: o, slotProps: t, suffix: e, endAdornment: s, startAdornment: r, size: l, value: d, onChange: m, defaultValue: p, type: f, disabled: i, ...x }, u) => /* @__PURE__ */ c("div", { ...x, className: n(
|
|
22
|
+
({ className: o, slotProps: t, suffix: e, endAdornment: s, startAdornment: r, size: l, value: d, onChange: m, defaultValue: p, type: f, disabled: i, ...x }, u) => /* @__PURE__ */ c("div", { ...x, className: n(h({ size: l, className: o })), "aria-disabled": i, children: [
|
|
23
23
|
r,
|
|
24
24
|
/* @__PURE__ */ a(
|
|
25
25
|
"input",
|
package/dist/textfield.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textfield.es.js","sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n base: [\r\n \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium
|
|
1
|
+
{"version":3,"file":"textfield.es.js","sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n base: [\r\n \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n ],\r\n variants: {\r\n size: {\r\n sm: \"h-7\",\r\n md: \"h-8\",\r\n lg: \"h-11\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n});\r\n\r\ninterface TextFieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n type?: React.HTMLInputTypeAttribute;\r\n disabled?: boolean;\r\n suffix?: React.ReactNode;\r\n endAdornment?: React.ReactNode;\r\n startAdornment?: React.ReactNode;\r\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n value?: string | number;\r\n defaultValue?: string | number;\r\n slotProps?: {\r\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n };\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n ({ className, slotProps, suffix, endAdornment, startAdornment, size, value, onChange, defaultValue, type, disabled, ...props }, ref) => {\r\n return (\r\n <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n {startAdornment}\r\n <input\r\n type={type}\r\n ref={ref}\r\n onChange={onChange}\r\n value={value}\r\n defaultValue={defaultValue}\r\n disabled={disabled}\r\n {...(slotProps?.inputProps ?? {})}\r\n className={cn(\r\n \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n slotProps?.inputProps?.className,\r\n )}\r\n />\r\n {typeof suffix === \"string\" || typeof suffix === \"number\" ? (\r\n <span className=\"inline-flex items-center px-2 text-xs font-medium text-primary bg-primary-50 m-0.5 rounded-sm\">{suffix}</span>\r\n ) : (\r\n suffix\r\n )}\r\n {endAdornment}\r\n </div>\r\n );\r\n },\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField, type TextFieldProps };\r\n"],"names":["textFieldVariants","tv","TextField","React","className","slotProps","suffix","endAdornment","startAdornment","size","value","onChange","defaultValue","type","disabled","props","ref","jsxs","cn","jsx"],"mappings":";;;;AAOA,MAAMA,IAAoBC,EAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBKC,IAAYC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,WAAAC,GAAW,QAAAC,GAAQ,cAAAC,GAAc,gBAAAC,GAAgB,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAE5H,gBAAAC,EAAC,OAAA,EAAK,GAAGF,GAAO,WAAWG,EAAGlB,EAAkB,EAAE,MAAAS,GAAM,WAAAL,EAAA,CAAW,CAAC,GAAG,iBAAeU,GACnF,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,KAAAG;AAAA,QACA,UAAAL;AAAA,QACA,OAAAD;AAAA,QACA,cAAAE;AAAA,QACA,UAAAE;AAAA,QACC,GAAIT,GAAW,cAAc,CAAA;AAAA,QAC9B,WAAWa;AAAA,UACT;AAAA,UACCV,IAA0B,cAAT;AAAA,UAClBH,GAAW,YAAY;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA;AAAA,IAED,OAAOC,KAAW,YAAY,OAAOA,KAAW,WAC/C,gBAAAa,EAAC,QAAA,EAAK,WAAU,iGAAiG,UAAAb,EAAA,CAAO,IAExHA;AAAA,IAEDC;AAAA,EAAA,GACH;AAGN;AACAL,EAAU,cAAc;"}
|