@oneplatformdev/ui 0.1.99-beta.262 → 0.1.99-beta.263
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/CHANGELOG.md +8 -0
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +95 -58
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +112 -41
- package/Input/Input.stories.js.map +1 -1
- package/Input/Input.types.d.ts +4 -0
- package/Input/Input.types.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## 0.1.99-beta.263 (2026-04-28)
|
|
2
|
+
|
|
3
|
+
### 🧱 Updated Dependencies
|
|
4
|
+
|
|
5
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.263
|
|
6
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.263
|
|
7
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.263
|
|
8
|
+
|
|
1
9
|
## 0.1.99-beta.262 (2026-04-28)
|
|
2
10
|
|
|
3
11
|
### 🧱 Updated Dependencies
|
package/Input/Input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAa3C,eAAO,MAAM,SAAS,qFA+GrB,CAAC;AAGF,eAAO,MAAM,aAAa,qFAiBzB,CAAC;AAkBF,eAAO,MAAM,KAAK,qFAKjB,CAAC"}
|
package/Input/Input.js
CHANGED
|
@@ -1,100 +1,137 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { Eye as
|
|
4
|
-
import { inputVariants as
|
|
5
|
-
import { cn as
|
|
6
|
-
const
|
|
7
|
-
(
|
|
1
|
+
import { jsxs as b, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import g, { useRef as H, useImperativeHandle as L, useState as E } from "react";
|
|
3
|
+
import { X as M, Eye as _, EyeOff as A } from "lucide-react";
|
|
4
|
+
import { inputVariants as U } from "./inputVariants.js";
|
|
5
|
+
import { cn as s } from "@oneplatformdev/utils";
|
|
6
|
+
const X = (e) => {
|
|
7
|
+
if (!e) return;
|
|
8
|
+
Object.getOwnPropertyDescriptor(
|
|
9
|
+
HTMLInputElement.prototype,
|
|
10
|
+
"value"
|
|
11
|
+
)?.set?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
12
|
+
}, v = g.forwardRef(
|
|
13
|
+
(e, r) => {
|
|
8
14
|
const {
|
|
9
15
|
className: a,
|
|
10
16
|
variant: o,
|
|
11
|
-
type:
|
|
12
|
-
slotProps: { input:
|
|
13
|
-
onChange:
|
|
14
|
-
onTransform:
|
|
15
|
-
counter:
|
|
16
|
-
maxLength:
|
|
17
|
+
type: i,
|
|
18
|
+
slotProps: { input: u, wrapper: y } = {},
|
|
19
|
+
onChange: h,
|
|
20
|
+
onTransform: w,
|
|
21
|
+
counter: S = !1,
|
|
22
|
+
maxLength: c,
|
|
17
23
|
fullSize: N = !1,
|
|
18
|
-
value:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
value: p,
|
|
25
|
+
defaultValue: d,
|
|
26
|
+
disabled: x,
|
|
27
|
+
readOnly: I,
|
|
28
|
+
clearable: C = !1,
|
|
29
|
+
onClear: j,
|
|
30
|
+
...z
|
|
31
|
+
} = e, {
|
|
32
|
+
startAdornment: f,
|
|
33
|
+
className: B,
|
|
34
|
+
...O
|
|
35
|
+
} = u || {}, l = H(null);
|
|
36
|
+
L(r, () => l.current);
|
|
37
|
+
const m = p !== void 0, [D, V] = E(
|
|
38
|
+
d !== void 0 ? String(d) : ""
|
|
39
|
+
), P = m ? String(p ?? "") : D, T = C && !x && !I && P.length > 0, k = () => {
|
|
40
|
+
X(l.current), m || V(""), l.current?.focus(), j?.();
|
|
41
|
+
};
|
|
42
|
+
return /* @__PURE__ */ b(
|
|
26
43
|
"div",
|
|
27
44
|
{
|
|
28
|
-
...
|
|
29
|
-
className:
|
|
45
|
+
...y || {},
|
|
46
|
+
className: s(
|
|
30
47
|
"relative",
|
|
31
48
|
N && "w-full",
|
|
32
|
-
|
|
49
|
+
y?.className
|
|
33
50
|
),
|
|
34
51
|
children: [
|
|
35
|
-
!!
|
|
36
|
-
/* @__PURE__ */
|
|
52
|
+
!!f && /* @__PURE__ */ t("span", { className: "absolute left-[10px] top-1/2 -translate-y-1/2", children: f }),
|
|
53
|
+
/* @__PURE__ */ t(
|
|
37
54
|
"input",
|
|
38
55
|
{
|
|
39
|
-
type:
|
|
40
|
-
className:
|
|
41
|
-
|
|
42
|
-
!!
|
|
43
|
-
|
|
56
|
+
type: i,
|
|
57
|
+
className: s(
|
|
58
|
+
U({ variant: o, className: a }),
|
|
59
|
+
!!f && "pl-10",
|
|
60
|
+
C && "pr-8",
|
|
61
|
+
B,
|
|
44
62
|
N && "min-w-auto"
|
|
45
63
|
),
|
|
46
|
-
ref:
|
|
47
|
-
maxLength:
|
|
48
|
-
value:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
64
|
+
ref: l,
|
|
65
|
+
maxLength: c,
|
|
66
|
+
value: p,
|
|
67
|
+
defaultValue: d,
|
|
68
|
+
disabled: x,
|
|
69
|
+
readOnly: I,
|
|
70
|
+
...O,
|
|
71
|
+
...z,
|
|
72
|
+
onChange: (n) => {
|
|
73
|
+
typeof w?.(n.target.value, n) == "string" && (n.target.value = w(n.target.value, n)), m || V(n.target.value), h && h(n);
|
|
53
74
|
}
|
|
54
75
|
}
|
|
55
76
|
),
|
|
56
|
-
|
|
77
|
+
T && /* @__PURE__ */ t(
|
|
78
|
+
"button",
|
|
79
|
+
{
|
|
80
|
+
type: "button",
|
|
81
|
+
tabIndex: -1,
|
|
82
|
+
"aria-label": "Clear input",
|
|
83
|
+
onMouseDown: (n) => n.preventDefault(),
|
|
84
|
+
onClick: k,
|
|
85
|
+
className: s(
|
|
86
|
+
"absolute top-1/2 right-3 -translate-y-1/2",
|
|
87
|
+
"text-muted-foreground hover:text-foreground",
|
|
88
|
+
"inline-flex items-center justify-center"
|
|
89
|
+
),
|
|
90
|
+
children: /* @__PURE__ */ t(M, { size: 16 })
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
S && typeof c == "number" && /* @__PURE__ */ b("div", { className: s(
|
|
57
94
|
"w-full text-right inline-flex items-center justify-end",
|
|
58
95
|
"text-xs font-medium leading-[1.2] text-muted-foreground",
|
|
59
96
|
"peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
60
97
|
), children: [
|
|
61
|
-
|
|
98
|
+
P.length,
|
|
62
99
|
"/",
|
|
63
|
-
|
|
100
|
+
c
|
|
64
101
|
] })
|
|
65
102
|
]
|
|
66
103
|
}
|
|
67
104
|
);
|
|
68
105
|
}
|
|
69
106
|
);
|
|
70
|
-
|
|
71
|
-
const
|
|
72
|
-
(
|
|
73
|
-
const [a, o] =
|
|
107
|
+
v.displayName = "Input";
|
|
108
|
+
const R = g.forwardRef(
|
|
109
|
+
(e, r) => {
|
|
110
|
+
const [a, o] = E(!1), i = a ? "text" : "password", u = () => {
|
|
74
111
|
o(!a);
|
|
75
112
|
};
|
|
76
|
-
return /* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
/* @__PURE__ */
|
|
113
|
+
return /* @__PURE__ */ b("div", { ...e?.slotProps?.wrapper || {}, className: s("relative", e?.slotProps?.wrapper?.className), children: [
|
|
114
|
+
/* @__PURE__ */ t(v, { ...e, type: i, className: "pr-8", ref: r }),
|
|
115
|
+
/* @__PURE__ */ t(q, { isVisible: a, onClick: u })
|
|
79
116
|
] });
|
|
80
117
|
}
|
|
81
118
|
);
|
|
82
|
-
|
|
83
|
-
const
|
|
119
|
+
R.displayName = "PasswordInput";
|
|
120
|
+
const q = ({ isVisible: e, onClick: r }) => /* @__PURE__ */ t(
|
|
84
121
|
"button",
|
|
85
122
|
{
|
|
86
123
|
type: "button",
|
|
87
|
-
onClick:
|
|
124
|
+
onClick: r,
|
|
88
125
|
className: "absolute top-1/2 right-3 transform -translate-y-1/2",
|
|
89
|
-
children:
|
|
126
|
+
children: e ? /* @__PURE__ */ t(_, { size: 16 }) : /* @__PURE__ */ t(A, { size: 16 })
|
|
90
127
|
}
|
|
91
|
-
),
|
|
92
|
-
({ type:
|
|
128
|
+
), F = g.forwardRef(
|
|
129
|
+
({ type: e, ...r }, a) => e === "password" ? /* @__PURE__ */ t(R, { type: e, ...r, ref: a }) : /* @__PURE__ */ t(v, { type: e, ...r, ref: a })
|
|
93
130
|
);
|
|
94
|
-
|
|
131
|
+
F.displayName = "Input";
|
|
95
132
|
export {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
133
|
+
v as BaseInput,
|
|
134
|
+
F as Input,
|
|
135
|
+
R as PasswordInput
|
|
99
136
|
};
|
|
100
137
|
//# sourceMappingURL=Input.js.map
|
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { inputVariants } from './inputVariants';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { InputProps } from './Input.types';\n\nexport const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const {\n className,\n variant,\n type,\n slotProps: { input, wrapper } = {},\n onChange,\n onTransform,\n counter = false,\n maxLength,\n fullSize = false,\n value,\n ...rest\n } = props;\n const {\n startAdornment,\n className: classNameInputSlotProps,\n ...restInputSlotProps\n } = input || {};\n return (\n <div\n {...(wrapper || {})}\n className={cn(\n 'relative',\n fullSize && 'w-full',\n wrapper?.className\n )}>\n {Boolean(startAdornment) && (\n <span className=\"absolute left-[10px] top-1/2 -translate-y-1/2\">\n {startAdornment}\n </span>\n )}\n <input\n type={type}\n className={cn(\n inputVariants({ variant, className }),\n Boolean(startAdornment) && 'pl-10',\n classNameInputSlotProps,\n fullSize && 'min-w-auto',\n )}\n ref={
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState } from 'react';\nimport { Eye, EyeOff, X } from 'lucide-react';\nimport { inputVariants } from './inputVariants';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { InputProps } from './Input.types';\n\nconst clearInputNatively = (input: HTMLInputElement | null) => {\n if (!input) return;\n const setter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n setter?.call(input, '');\n input.dispatchEvent(new Event('input', { bubbles: true }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n};\n\nexport const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const {\n className,\n variant,\n type,\n slotProps: { input, wrapper } = {},\n onChange,\n onTransform,\n counter = false,\n maxLength,\n fullSize = false,\n value,\n defaultValue,\n disabled,\n readOnly,\n clearable = false,\n onClear,\n ...rest\n } = props;\n const {\n startAdornment,\n className: classNameInputSlotProps,\n ...restInputSlotProps\n } = input || {};\n\n const innerRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);\n\n const isControlled = value !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<string>(\n defaultValue !== undefined ? String(defaultValue) : '',\n );\n const currentValue = isControlled ? String(value ?? '') : uncontrolledValue;\n\n const showClear =\n clearable && !disabled && !readOnly && currentValue.length > 0;\n\n const handleClear = () => {\n clearInputNatively(innerRef.current);\n if (!isControlled) setUncontrolledValue('');\n innerRef.current?.focus();\n onClear?.();\n };\n\n return (\n <div\n {...(wrapper || {})}\n className={cn(\n 'relative',\n fullSize && 'w-full',\n wrapper?.className\n )}>\n {Boolean(startAdornment) && (\n <span className=\"absolute left-[10px] top-1/2 -translate-y-1/2\">\n {startAdornment}\n </span>\n )}\n <input\n type={type}\n className={cn(\n inputVariants({ variant, className }),\n Boolean(startAdornment) && 'pl-10',\n clearable && 'pr-8',\n classNameInputSlotProps,\n fullSize && 'min-w-auto',\n )}\n ref={innerRef}\n maxLength={maxLength}\n value={value}\n defaultValue={defaultValue}\n disabled={disabled}\n readOnly={readOnly}\n {...restInputSlotProps}\n {...rest}\n onChange={(e) => {\n if (typeof onTransform?.(e.target.value, e) === 'string') {\n e.target.value = onTransform(e.target.value, e);\n }\n if (!isControlled) setUncontrolledValue(e.target.value);\n if (onChange) onChange(e);\n }}\n />\n {showClear && (\n <button\n type=\"button\"\n tabIndex={-1}\n aria-label=\"Clear input\"\n onMouseDown={(e) => e.preventDefault()}\n onClick={handleClear}\n className={cn(\n 'absolute top-1/2 right-3 -translate-y-1/2',\n 'text-muted-foreground hover:text-foreground',\n 'inline-flex items-center justify-center',\n )}\n >\n <X size={16} />\n </button>\n )}\n {counter && typeof maxLength === 'number' && (\n <div className={cn(\n 'w-full text-right inline-flex items-center justify-end',\n 'text-xs font-medium leading-[1.2] text-muted-foreground',\n 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n )}>\n {currentValue.length}/{maxLength}\n </div>\n )}\n </div>\n );\n }\n);\nBaseInput.displayName = 'Input';\n\nexport const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n const inputType = isVisible ? 'text' : 'password';\n\n const toggleVisibility = () => {\n setIsVisible(!isVisible);\n };\n\n return (\n <div {...(props?.slotProps?.wrapper || {})} className={cn('relative', props?.slotProps?.wrapper?.className)}>\n <BaseInput {...props} type={inputType} className=\"pr-8\" ref={ref} />\n <VisibilityButton isVisible={isVisible} onClick={toggleVisibility} />\n </div>\n );\n }\n);\nPasswordInput.displayName = 'PasswordInput';\n\ntype VisibilityButtonProps = {\n isVisible: boolean\n onClick: () => void\n}\n\nconst VisibilityButton = ({ isVisible, onClick }:VisibilityButtonProps) => (\n <button\n type=\"button\"\n onClick={onClick}\n className=\"absolute top-1/2 right-3 transform -translate-y-1/2\"\n >\n {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}\n </button>\n);\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ type, ...props }, ref) => {\n if (type === 'password') return <PasswordInput type={type} {...props} ref={ref} />;\n return <BaseInput type={type} {...props} ref={ref} />;\n }\n);\nInput.displayName = 'Input';\n"],"names":["clearInputNatively","input","BaseInput","React","props","ref","className","variant","type","wrapper","onChange","onTransform","counter","maxLength","fullSize","value","defaultValue","disabled","readOnly","clearable","onClear","rest","startAdornment","classNameInputSlotProps","restInputSlotProps","innerRef","useRef","useImperativeHandle","isControlled","uncontrolledValue","setUncontrolledValue","useState","currentValue","showClear","handleClear","jsxs","cn","jsx","inputVariants","e","X","PasswordInput","isVisible","setIsVisible","inputType","toggleVisibility","VisibilityButton","onClick","Eye","EyeOff","Input"],"mappings":"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"}
|
package/Input/Input.stories.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Search as
|
|
4
|
-
import { Input as
|
|
2
|
+
import { useState as o } from "react";
|
|
3
|
+
import { Search as c, Mail as s } from "lucide-react";
|
|
4
|
+
import { Input as n } from "./Input.js";
|
|
5
5
|
const h = {
|
|
6
6
|
title: "Input/Input",
|
|
7
|
-
component:
|
|
7
|
+
component: n,
|
|
8
8
|
tags: ["autodocs"],
|
|
9
9
|
parameters: {
|
|
10
10
|
layout: "centered"
|
|
@@ -14,9 +14,13 @@ const h = {
|
|
|
14
14
|
variant: "default",
|
|
15
15
|
fullSize: !1,
|
|
16
16
|
counter: !1,
|
|
17
|
-
disabled: !1
|
|
17
|
+
disabled: !1,
|
|
18
|
+
clearable: !1
|
|
18
19
|
},
|
|
19
20
|
argTypes: {
|
|
21
|
+
clearable: {
|
|
22
|
+
control: "boolean"
|
|
23
|
+
},
|
|
20
24
|
variant: {
|
|
21
25
|
control: "select",
|
|
22
26
|
options: ["default", "grey"]
|
|
@@ -52,39 +56,39 @@ const h = {
|
|
|
52
56
|
type: "text",
|
|
53
57
|
placeholder: "Grey input"
|
|
54
58
|
}
|
|
55
|
-
},
|
|
59
|
+
}, v = {
|
|
56
60
|
args: {
|
|
57
61
|
placeholder: "Search...",
|
|
58
62
|
slotProps: {
|
|
59
63
|
input: {
|
|
60
|
-
startAdornment: /* @__PURE__ */ e(
|
|
64
|
+
startAdornment: /* @__PURE__ */ e(c, { size: 16 })
|
|
61
65
|
}
|
|
62
66
|
}
|
|
63
67
|
}
|
|
64
|
-
},
|
|
68
|
+
}, b = {
|
|
65
69
|
args: {
|
|
66
70
|
type: "email",
|
|
67
71
|
placeholder: "Email address",
|
|
68
72
|
slotProps: {
|
|
69
73
|
input: {
|
|
70
|
-
startAdornment: /* @__PURE__ */ e(
|
|
74
|
+
startAdornment: /* @__PURE__ */ e(s, { size: 16 })
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
}
|
|
74
|
-
},
|
|
78
|
+
}, f = {
|
|
75
79
|
args: {
|
|
76
80
|
type: "password",
|
|
77
81
|
placeholder: "Password"
|
|
78
82
|
}
|
|
79
|
-
},
|
|
80
|
-
render: (
|
|
81
|
-
const [
|
|
83
|
+
}, x = {
|
|
84
|
+
render: (a) => {
|
|
85
|
+
const [t, l] = o("");
|
|
82
86
|
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
83
|
-
|
|
87
|
+
n,
|
|
84
88
|
{
|
|
85
|
-
...
|
|
86
|
-
value:
|
|
87
|
-
onChange: (
|
|
89
|
+
...a,
|
|
90
|
+
value: t,
|
|
91
|
+
onChange: (r) => l(r.target.value)
|
|
88
92
|
}
|
|
89
93
|
) });
|
|
90
94
|
},
|
|
@@ -93,8 +97,8 @@ const h = {
|
|
|
93
97
|
counter: !0,
|
|
94
98
|
maxLength: 50
|
|
95
99
|
}
|
|
96
|
-
},
|
|
97
|
-
render: (
|
|
100
|
+
}, y = {
|
|
101
|
+
render: (a) => /* @__PURE__ */ e("div", { className: "w-[480px]", children: /* @__PURE__ */ e(n, { ...a }) }),
|
|
98
102
|
args: {
|
|
99
103
|
placeholder: "Full width input",
|
|
100
104
|
fullSize: !0
|
|
@@ -105,31 +109,94 @@ const h = {
|
|
|
105
109
|
disabled: !0,
|
|
106
110
|
value: "Disabled value"
|
|
107
111
|
}
|
|
108
|
-
},
|
|
109
|
-
render: (
|
|
110
|
-
const [
|
|
112
|
+
}, C = {
|
|
113
|
+
render: (a) => {
|
|
114
|
+
const [t, l] = o("");
|
|
111
115
|
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
112
|
-
|
|
116
|
+
n,
|
|
113
117
|
{
|
|
114
|
-
...
|
|
115
|
-
value:
|
|
116
|
-
onTransform: (
|
|
117
|
-
onChange: (
|
|
118
|
+
...a,
|
|
119
|
+
value: t,
|
|
120
|
+
onTransform: (r) => r.replace(/\D/g, ""),
|
|
121
|
+
onChange: (r) => l(r.target.value)
|
|
118
122
|
}
|
|
119
123
|
) });
|
|
120
124
|
},
|
|
121
125
|
args: {
|
|
122
126
|
placeholder: "Only numbers allowed"
|
|
123
127
|
}
|
|
124
|
-
},
|
|
125
|
-
render: (
|
|
126
|
-
const [
|
|
128
|
+
}, S = {
|
|
129
|
+
render: (a) => {
|
|
130
|
+
const [t, l] = o("Clear me");
|
|
131
|
+
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
132
|
+
n,
|
|
133
|
+
{
|
|
134
|
+
...a,
|
|
135
|
+
value: t,
|
|
136
|
+
onChange: (r) => l(r.target.value),
|
|
137
|
+
onClear: () => console.log("cleared")
|
|
138
|
+
}
|
|
139
|
+
) });
|
|
140
|
+
},
|
|
141
|
+
args: {
|
|
142
|
+
placeholder: "Type something...",
|
|
143
|
+
clearable: !0
|
|
144
|
+
}
|
|
145
|
+
}, N = {
|
|
146
|
+
render: (a) => /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(n, { ...a, defaultValue: "Uncontrolled value" }) }),
|
|
147
|
+
args: {
|
|
148
|
+
placeholder: "Type something...",
|
|
149
|
+
clearable: !0
|
|
150
|
+
}
|
|
151
|
+
}, V = {
|
|
152
|
+
render: (a) => {
|
|
153
|
+
const [t, l] = o("john@example.com");
|
|
154
|
+
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
155
|
+
n,
|
|
156
|
+
{
|
|
157
|
+
...a,
|
|
158
|
+
value: t,
|
|
159
|
+
onChange: (r) => l(r.target.value)
|
|
160
|
+
}
|
|
161
|
+
) });
|
|
162
|
+
},
|
|
163
|
+
args: {
|
|
164
|
+
type: "email",
|
|
165
|
+
placeholder: "Email address",
|
|
166
|
+
clearable: !0,
|
|
167
|
+
slotProps: {
|
|
168
|
+
input: {
|
|
169
|
+
startAdornment: /* @__PURE__ */ e(s, { size: 16 })
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}, P = {
|
|
174
|
+
render: (a) => {
|
|
175
|
+
const [t, l] = o("Some text");
|
|
176
|
+
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
177
|
+
n,
|
|
178
|
+
{
|
|
179
|
+
...a,
|
|
180
|
+
value: t,
|
|
181
|
+
onChange: (r) => l(r.target.value)
|
|
182
|
+
}
|
|
183
|
+
) });
|
|
184
|
+
},
|
|
185
|
+
args: {
|
|
186
|
+
placeholder: "Type something...",
|
|
187
|
+
clearable: !0,
|
|
188
|
+
counter: !0,
|
|
189
|
+
maxLength: 50
|
|
190
|
+
}
|
|
191
|
+
}, T = {
|
|
192
|
+
render: (a) => {
|
|
193
|
+
const [t, l] = o("");
|
|
127
194
|
return /* @__PURE__ */ e("div", { className: "w-[360px]", children: /* @__PURE__ */ e(
|
|
128
|
-
|
|
195
|
+
n,
|
|
129
196
|
{
|
|
130
|
-
...
|
|
131
|
-
value:
|
|
132
|
-
onChange: (
|
|
197
|
+
...a,
|
|
198
|
+
value: t,
|
|
199
|
+
onChange: (r) => l(r.target.value)
|
|
133
200
|
}
|
|
134
201
|
) });
|
|
135
202
|
},
|
|
@@ -139,16 +206,20 @@ const h = {
|
|
|
139
206
|
}
|
|
140
207
|
};
|
|
141
208
|
export {
|
|
209
|
+
S as Clearable,
|
|
210
|
+
N as ClearableUncontrolled,
|
|
211
|
+
P as ClearableWithCounter,
|
|
212
|
+
V as ClearableWithStartAdornment,
|
|
142
213
|
m as Default,
|
|
143
214
|
w as Disabled,
|
|
144
|
-
|
|
145
|
-
|
|
215
|
+
b as Email,
|
|
216
|
+
y as FullWidth,
|
|
146
217
|
g as GreyVariant,
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
218
|
+
f as Password,
|
|
219
|
+
T as Playground,
|
|
220
|
+
x as WithCounter,
|
|
221
|
+
v as WithStartAdornment,
|
|
222
|
+
C as WithTransform,
|
|
152
223
|
h as default
|
|
153
224
|
};
|
|
154
225
|
//# sourceMappingURL=Input.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport React, { useState } from 'react';\nimport { Mail, Search } from 'lucide-react';\n\nimport { Input } from './Input';\n\nconst meta = {\n title: 'Input/Input',\n component: Input,\n tags: ['autodocs'],\n parameters: {\n layout: 'centered',\n },\n args: {\n placeholder: 'Enter text...',\n variant: 'default',\n fullSize: false,\n counter: false,\n disabled: false,\n },\n argTypes: {\n variant: {\n control: 'select',\n options: ['default', 'grey'],\n },\n type: {\n control: 'select',\n options: ['text', 'password', 'email', 'search', 'number'],\n },\n fullSize: {\n control: 'boolean',\n },\n counter: {\n control: 'boolean',\n },\n disabled: {\n control: 'boolean',\n },\n maxLength: {\n control: 'number',\n },\n onChange: { action: 'changed' },\n onBlur: { action: 'blurred' },\n onFocus: { action: 'focused' },\n },\n} satisfies Meta<typeof Input>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {\n type: 'text',\n placeholder: 'Default input',\n },\n};\n\nexport const GreyVariant: Story = {\n args: {\n variant: 'grey',\n type: 'text',\n placeholder: 'Grey input',\n },\n};\n\nexport const WithStartAdornment: Story = {\n args: {\n placeholder: 'Search...',\n slotProps: {\n input: {\n startAdornment: <Search size={16} />,\n },\n },\n },\n};\n\nexport const Email: Story = {\n args: {\n type: 'email',\n placeholder: 'Email address',\n slotProps: {\n input: {\n startAdornment: <Mail size={16} />,\n },\n },\n },\n};\n\nexport const Password: Story = {\n args: {\n type: 'password',\n placeholder: 'Password',\n },\n};\n\nexport const WithCounter: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Type something...',\n counter: true,\n maxLength: 50,\n },\n};\n\nexport const FullWidth: Story = {\n render: (args) => (\n <div className=\"w-[480px]\">\n <Input {...args} />\n </div>\n ),\n args: {\n placeholder: 'Full width input',\n fullSize: true,\n },\n};\n\nexport const Disabled: Story = {\n args: {\n placeholder: 'Disabled input',\n disabled: true,\n value: 'Disabled value',\n },\n};\n\nexport const WithTransform: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onTransform={(next) => next.replace(/\\D/g, '')}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Only numbers allowed',\n },\n};\n\nexport const Playground: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[360px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Play with controls',\n maxLength: 100,\n },\n};\n"],"names":["meta","Input","Default","GreyVariant","WithStartAdornment","jsx","Search","Email","Mail","Password","WithCounter","args","value","setValue","useState","e","FullWidth","Disabled","WithTransform","next","Playground"],"mappings":";;;;AAMA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,MAAM,CAAC,UAAU;AAAA,EACjB,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport React, { useState } from 'react';\nimport { Mail, Search } from 'lucide-react';\n\nimport { Input } from './Input';\n\nconst meta = {\n title: 'Input/Input',\n component: Input,\n tags: ['autodocs'],\n parameters: {\n layout: 'centered',\n },\n args: {\n placeholder: 'Enter text...',\n variant: 'default',\n fullSize: false,\n counter: false,\n disabled: false,\n clearable: false,\n },\n argTypes: {\n clearable: {\n control: 'boolean',\n },\n variant: {\n control: 'select',\n options: ['default', 'grey'],\n },\n type: {\n control: 'select',\n options: ['text', 'password', 'email', 'search', 'number'],\n },\n fullSize: {\n control: 'boolean',\n },\n counter: {\n control: 'boolean',\n },\n disabled: {\n control: 'boolean',\n },\n maxLength: {\n control: 'number',\n },\n onChange: { action: 'changed' },\n onBlur: { action: 'blurred' },\n onFocus: { action: 'focused' },\n },\n} satisfies Meta<typeof Input>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {\n type: 'text',\n placeholder: 'Default input',\n },\n};\n\nexport const GreyVariant: Story = {\n args: {\n variant: 'grey',\n type: 'text',\n placeholder: 'Grey input',\n },\n};\n\nexport const WithStartAdornment: Story = {\n args: {\n placeholder: 'Search...',\n slotProps: {\n input: {\n startAdornment: <Search size={16} />,\n },\n },\n },\n};\n\nexport const Email: Story = {\n args: {\n type: 'email',\n placeholder: 'Email address',\n slotProps: {\n input: {\n startAdornment: <Mail size={16} />,\n },\n },\n },\n};\n\nexport const Password: Story = {\n args: {\n type: 'password',\n placeholder: 'Password',\n },\n};\n\nexport const WithCounter: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Type something...',\n counter: true,\n maxLength: 50,\n },\n};\n\nexport const FullWidth: Story = {\n render: (args) => (\n <div className=\"w-[480px]\">\n <Input {...args} />\n </div>\n ),\n args: {\n placeholder: 'Full width input',\n fullSize: true,\n },\n};\n\nexport const Disabled: Story = {\n args: {\n placeholder: 'Disabled input',\n disabled: true,\n value: 'Disabled value',\n },\n};\n\nexport const WithTransform: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onTransform={(next) => next.replace(/\\D/g, '')}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Only numbers allowed',\n },\n};\n\nexport const Clearable: Story = {\n render: (args) => {\n const [value, setValue] = useState('Clear me');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n onClear={() => console.log('cleared')}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Type something...',\n clearable: true,\n },\n};\n\nexport const ClearableUncontrolled: Story = {\n render: (args) => (\n <div className=\"w-[320px]\">\n <Input {...args} defaultValue=\"Uncontrolled value\" />\n </div>\n ),\n args: {\n placeholder: 'Type something...',\n clearable: true,\n },\n};\n\nexport const ClearableWithStartAdornment: Story = {\n render: (args) => {\n const [value, setValue] = useState('john@example.com');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n type: 'email',\n placeholder: 'Email address',\n clearable: true,\n slotProps: {\n input: {\n startAdornment: <Mail size={16} />,\n },\n },\n },\n};\n\nexport const ClearableWithCounter: Story = {\n render: (args) => {\n const [value, setValue] = useState('Some text');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Type something...',\n clearable: true,\n counter: true,\n maxLength: 50,\n },\n};\n\nexport const Playground: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[360px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Play with controls',\n maxLength: 100,\n },\n};\n"],"names":["meta","Input","Default","GreyVariant","WithStartAdornment","jsx","Search","Email","Mail","Password","WithCounter","args","value","setValue","useState","e","FullWidth","Disabled","WithTransform","next","Clearable","ClearableUncontrolled","ClearableWithStartAdornment","ClearableWithCounter","Playground"],"mappings":"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"}
|
package/Input/Input.types.d.ts
CHANGED
|
@@ -17,5 +17,9 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
17
17
|
onPastePrepare?: (value: string, event: React.ClipboardEvent<HTMLInputElement>) => string;
|
|
18
18
|
fullSize?: boolean;
|
|
19
19
|
counter?: boolean;
|
|
20
|
+
/** Show a clear (X) button inside the input that empties the value and emulates a native input/change event */
|
|
21
|
+
clearable?: boolean;
|
|
22
|
+
/** Optional callback fired after the input has been cleared */
|
|
23
|
+
onClear?: () => void;
|
|
20
24
|
}
|
|
21
25
|
//# sourceMappingURL=Input.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+GAA+G;IAC/G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneplatformdev/ui",
|
|
3
|
-
"version": "0.1.99-beta.
|
|
3
|
+
"version": "0.1.99-beta.263",
|
|
4
4
|
"description": "UI component library for OnePlatform",
|
|
5
5
|
"author": "One Platform Development Team",
|
|
6
6
|
"keywords": [
|
|
@@ -107,9 +107,9 @@
|
|
|
107
107
|
"recharts": "^3.2.0",
|
|
108
108
|
"sonner": "^2.0.7",
|
|
109
109
|
"vaul": "^1.1.2",
|
|
110
|
-
"@oneplatformdev/
|
|
111
|
-
"@oneplatformdev/hooks": "^0.1.99-beta.
|
|
112
|
-
"@oneplatformdev/
|
|
110
|
+
"@oneplatformdev/utils": "^0.1.99-beta.263",
|
|
111
|
+
"@oneplatformdev/hooks": "^0.1.99-beta.263",
|
|
112
|
+
"@oneplatformdev/tokens": "^0.1.99-beta.263"
|
|
113
113
|
},
|
|
114
114
|
"scripts": {
|
|
115
115
|
"chromatic": "chromatic"
|