@devup-ui/components 0.1.2 → 0.1.3
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("@devup-ui/react"),C=require("react");function S({defaultValue:a,value:k,onChange:n,typography:F,error:o=!1,errorMessage:b,allowClear:l=!0,icon:d,colors:t,disabled:u,className:B,classNames:e,ref:y,onClear:p,...D}){const[x,g]=C.useState(a||""),E=h=>{g(h.target.value),n==null||n(h)},j=()=>{g(""),p==null||p()},f=x&&!u&&l;return r.jsxs(i.Box,{display:"inline-block",pos:"relative",selectors:{"&,&>*":{boxSizing:"border-box"}},children:[d&&r.jsx(i.Center,{"aria-label":"icon",boxSize:"24px",className:e==null?void 0:e.icon,color:u?"var(--inputDisabledText, light-dark(#D6D7DE, #373737))":"var(--iconBold, light-dark(#8D8C9A, #666577))",left:"12px",pos:"absolute",styleOrder:1,top:"50%",transform:"translateY(-50%)",children:d}),r.jsx(i.Input,{ref:y,_disabled:{_placeholder:{color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},bg:"var(--inputDisabledBg, light-dark(#F0F0F3, #414244))",border:"1px solid var(--border, light-dark(#E4E4E4, #434343))",color:"var(--inputDisabledText, light-dark(#D6D7DE, #373737))"},_focus:{bg:"var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))",border:"1px solid var(--primary, light-dark(#674DC7, #8163E1))",outline:"none"},_hover:{border:"1px solid var(--primary, light-dark(red, blue))"},_placeholder:{color:"var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-label":"input",bg:"var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",borderColor:o?"var(--error, light-dark(#D52B2E, #FF5B5E))":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${B||""} ${(e==null?void 0:e.input)||""}`.trim(),disabled:u,onChange:E,pl:d?"36px":"12px",pr:l?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:t==null?void 0:t.primary,error:t==null?void 0:t.error,text:t==null?void 0:t.text,base:t==null?void 0:t.base,iconBold:t==null?void 0:t.iconBold,border:t==null?void 0:t.border,inputBackground:t==null?void 0:t.inputBackground,primaryFocus:t==null?void 0:t.primaryFocus,negative20:t==null?void 0:t.negative20},transition:"all 0.1s ease-in-out",typography:F,value:k??x,...D}),f&&r.jsx(v,{onClick:j}),b&&r.jsx(i.Text,{"aria-label":"error-message",bottom:"-8px",className:e==null?void 0:e.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:b})]})}function v(a){return r.jsx(i.Button,{alignItems:"center","aria-label":"clear-button",bg:"var(--negative20, light-dark(#0003, #FFF6))",border:"none",borderRadius:"50%",boxSize:"20px",color:"var(--base, light-dark(#FFF, #000))",cursor:"pointer",display:"flex",justifyContent:"center",p:"2px",pos:"absolute",right:"12px",styleOrder:1,top:"50%",transform:"translateY(-50%)",...a,children:r.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),r.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=v;exports.Input=S;
|
|
@@ -11,6 +11,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
|
|
|
11
11
|
icon?: string;
|
|
12
12
|
errorMessage?: string;
|
|
13
13
|
};
|
|
14
|
+
onClear?: () => void;
|
|
14
15
|
colors?: {
|
|
15
16
|
primary?: string;
|
|
16
17
|
error?: string;
|
|
@@ -24,7 +25,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
|
|
|
24
25
|
};
|
|
25
26
|
icon?: React.ReactNode;
|
|
26
27
|
}
|
|
27
|
-
export declare function Input({ defaultValue, value: valueProp, onChange: onChangeProp, typography, error, errorMessage, allowClear, icon, colors, disabled, className, classNames, ref, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare function Input({ defaultValue, value: valueProp, onChange: onChangeProp, typography, error, errorMessage, allowClear, icon, colors, disabled, className, classNames, ref, onClear, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
28
29
|
export declare function ClearButton(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
29
30
|
export {};
|
|
30
31
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,UAAU,EACV,KAAa,EACb,YAAY,EACZ,UAAiB,EACjB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,oBAAoB,EAGrB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEhD,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,UAAU,EACV,KAAa,EACb,YAAY,EACZ,UAAiB,EACjB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,EACH,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,2CA6GZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA6C1D"}
|
|
@@ -1,30 +1,31 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Box as
|
|
4
|
-
import { useState as
|
|
5
|
-
function
|
|
2
|
+
import { jsxs as x, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { Box as m, Center as C, Input as A, Text as L, Button as j } from "@devup-ui/react";
|
|
4
|
+
import { useState as w } from "react";
|
|
5
|
+
function T({
|
|
6
6
|
defaultValue: i,
|
|
7
|
-
value:
|
|
7
|
+
value: k,
|
|
8
8
|
onChange: a,
|
|
9
|
-
typography:
|
|
10
|
-
error:
|
|
11
|
-
errorMessage:
|
|
12
|
-
allowClear:
|
|
9
|
+
typography: v,
|
|
10
|
+
error: F = !1,
|
|
11
|
+
errorMessage: u,
|
|
12
|
+
allowClear: b = !0,
|
|
13
13
|
icon: n,
|
|
14
14
|
colors: r,
|
|
15
15
|
disabled: d,
|
|
16
16
|
className: o,
|
|
17
17
|
classNames: t,
|
|
18
|
-
ref:
|
|
19
|
-
|
|
18
|
+
ref: B,
|
|
19
|
+
onClear: p,
|
|
20
|
+
...y
|
|
20
21
|
}) {
|
|
21
|
-
const [
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
return /* @__PURE__ */
|
|
27
|
-
|
|
22
|
+
const [h, l] = w(i || ""), D = (g) => {
|
|
23
|
+
l(g.target.value), a == null || a(g);
|
|
24
|
+
}, E = () => {
|
|
25
|
+
l(""), p == null || p();
|
|
26
|
+
}, f = h && !d && b;
|
|
27
|
+
return /* @__PURE__ */ x(
|
|
28
|
+
m,
|
|
28
29
|
{
|
|
29
30
|
display: "inline-block",
|
|
30
31
|
pos: "relative",
|
|
@@ -46,9 +47,9 @@ function O({
|
|
|
46
47
|
}
|
|
47
48
|
),
|
|
48
49
|
/* @__PURE__ */ e(
|
|
49
|
-
|
|
50
|
+
A,
|
|
50
51
|
{
|
|
51
|
-
ref:
|
|
52
|
+
ref: B,
|
|
52
53
|
_disabled: {
|
|
53
54
|
_placeholder: {
|
|
54
55
|
color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
|
|
@@ -70,15 +71,15 @@ function O({
|
|
|
70
71
|
},
|
|
71
72
|
"aria-label": "input",
|
|
72
73
|
bg: "var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",
|
|
73
|
-
borderColor:
|
|
74
|
+
borderColor: F ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
|
|
74
75
|
borderRadius: "8px",
|
|
75
76
|
borderStyle: "solid",
|
|
76
77
|
borderWidth: "1px",
|
|
77
78
|
className: `${o || ""} ${(t == null ? void 0 : t.input) || ""}`.trim(),
|
|
78
79
|
disabled: d,
|
|
79
|
-
onChange:
|
|
80
|
+
onChange: D,
|
|
80
81
|
pl: n ? "36px" : "12px",
|
|
81
|
-
pr:
|
|
82
|
+
pr: b ? "36px" : "12px",
|
|
82
83
|
py: "12px",
|
|
83
84
|
styleOrder: 1,
|
|
84
85
|
styleVars: {
|
|
@@ -93,14 +94,14 @@ function O({
|
|
|
93
94
|
negative20: r == null ? void 0 : r.negative20
|
|
94
95
|
},
|
|
95
96
|
transition: "all 0.1s ease-in-out",
|
|
96
|
-
typography:
|
|
97
|
-
value:
|
|
98
|
-
...
|
|
97
|
+
typography: v,
|
|
98
|
+
value: k ?? h,
|
|
99
|
+
...y
|
|
99
100
|
}
|
|
100
101
|
),
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
f && /* @__PURE__ */ e(S, { onClick: E }),
|
|
103
|
+
u && /* @__PURE__ */ e(
|
|
104
|
+
L,
|
|
104
105
|
{
|
|
105
106
|
"aria-label": "error-message",
|
|
106
107
|
bottom: "-8px",
|
|
@@ -111,16 +112,16 @@ function O({
|
|
|
111
112
|
styleOrder: 1,
|
|
112
113
|
transform: "translateY(100%)",
|
|
113
114
|
typography: "inputPlaceholder",
|
|
114
|
-
children:
|
|
115
|
+
children: u
|
|
115
116
|
}
|
|
116
117
|
)
|
|
117
118
|
]
|
|
118
119
|
}
|
|
119
120
|
);
|
|
120
121
|
}
|
|
121
|
-
function
|
|
122
|
+
function S(i) {
|
|
122
123
|
return /* @__PURE__ */ e(
|
|
123
|
-
|
|
124
|
+
j,
|
|
124
125
|
{
|
|
125
126
|
alignItems: "center",
|
|
126
127
|
"aria-label": "clear-button",
|
|
@@ -139,7 +140,7 @@ function w(i) {
|
|
|
139
140
|
top: "50%",
|
|
140
141
|
transform: "translateY(-50%)",
|
|
141
142
|
...i,
|
|
142
|
-
children: /* @__PURE__ */
|
|
143
|
+
children: /* @__PURE__ */ x(
|
|
143
144
|
"svg",
|
|
144
145
|
{
|
|
145
146
|
fill: "none",
|
|
@@ -175,6 +176,6 @@ function w(i) {
|
|
|
175
176
|
);
|
|
176
177
|
}
|
|
177
178
|
export {
|
|
178
|
-
|
|
179
|
-
|
|
179
|
+
S as ClearButton,
|
|
180
|
+
T as Input
|
|
180
181
|
};
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"css-in-js-framework",
|
|
17
17
|
"react"
|
|
18
18
|
],
|
|
19
|
-
"version": "0.1.
|
|
19
|
+
"version": "0.1.3",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
50
50
|
"storybook": "^9.1.1",
|
|
51
51
|
"typescript": "^5.9.2",
|
|
52
|
-
"vite": "^7.
|
|
52
|
+
"vite": "^7.1.1",
|
|
53
53
|
"vite-plugin-dts": "^4.5.4",
|
|
54
54
|
"vitest": "^3.2.4",
|
|
55
|
-
"@devup-ui/vite-plugin": "1.0.
|
|
55
|
+
"@devup-ui/vite-plugin": "1.0.27"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"csstype": "*",
|