@devup-ui/components 0.1.23 → 0.1.25
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 e=require("react/jsx-runtime"),t=require("@devup-ui/react"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@devup-ui/react"),C=require("react");function j({defaultValue:o="",value:h,onChange:l,typography:x,error:s=!1,errorMessage:d,allowClear:p=!0,icon:i,colors:r,disabled:n,className:v,classNames:a,readOnly:k,onClear:F,...y}){const[B,u]=C.useState(o),D=g=>{u(g.target.value),l?.(g)},m=()=>{u(""),l?.({target:{value:""}}),F?.()},c=h??B,E=!!c&&!n&&p&&!k;return e.jsxs(t.Box,{className:a?.container,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},children:[i&&e.jsx(t.Center,{"aria-label":"icon",boxSize:"24px",className:a?.icon,color:n?"var(--inputDisabledText, light-dark(#D6D7DE, #373737))":"var(--iconBold, light-dark(#8D8C9A, #666577))",left:"12px",pos:"absolute",styleOrder:1,top:"50%",transform:"translateY(-50%)",children:i}),e.jsx(t.Input,{_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(#674DC7, #8163E1))"},_placeholder:{color:"var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-label":"input",bg:"var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",borderColor:s?"var(--error, light-dark(#D52B2E, #FF5B5E))":"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${v||""} ${a?.input||""}`.trim(),disabled:n,onChange:D,pl:i?"36px":"12px",pr:p?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:r?.primary,error:r?.error,text:r?.text,base:r?.base,iconBold:r?.iconBold,border:r?.border,inputBackground:r?.inputBackground,primaryFocus:r?.primaryFocus,negative20:r?.negative20},transition:"all 0.1s ease-in-out",typography:x,value:c,...y}),E&&e.jsx(b,{onClick:m}),s&&d&&e.jsx(t.Text,{"aria-label":"error-message",bottom:"-8px",className:a?.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:d})]})}function b(o){return e.jsx(t.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%)",type:"button",...o,children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),e.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=b;exports.Input=j;
|
|
@@ -26,7 +26,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
|
|
|
26
26
|
};
|
|
27
27
|
icon?: React.ReactNode;
|
|
28
28
|
}
|
|
29
|
-
export declare function Input({ defaultValue, value: valueProp, onChange: onChangeProp, typography, error, errorMessage, allowClear, icon, colors, disabled, className, classNames,
|
|
29
|
+
export declare function Input({ defaultValue, value: valueProp, onChange: onChangeProp, typography, error, errorMessage, allowClear, icon, colors, disabled, className, classNames, readOnly, onClear, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
30
30
|
export declare function ClearButton(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
31
31
|
export {};
|
|
32
32
|
//# 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,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,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,
|
|
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,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,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,YAAiB,EACjB,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,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,2CAsHZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA8C1D"}
|
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
3
|
-
import { Box as
|
|
4
|
-
import { useState as
|
|
5
|
-
function
|
|
6
|
-
defaultValue: a,
|
|
7
|
-
value:
|
|
8
|
-
onChange:
|
|
3
|
+
import { Box as E, Center as f, Input as C, Text as A, Button as L } from "@devup-ui/react";
|
|
4
|
+
import { useState as j } from "react";
|
|
5
|
+
function O({
|
|
6
|
+
defaultValue: a = "",
|
|
7
|
+
value: b,
|
|
8
|
+
onChange: n,
|
|
9
9
|
typography: c,
|
|
10
|
-
error:
|
|
11
|
-
errorMessage:
|
|
12
|
-
allowClear:
|
|
10
|
+
error: l = !1,
|
|
11
|
+
errorMessage: d,
|
|
12
|
+
allowClear: p = !0,
|
|
13
13
|
icon: o,
|
|
14
14
|
colors: r,
|
|
15
15
|
disabled: i,
|
|
16
16
|
className: x,
|
|
17
17
|
classNames: t,
|
|
18
|
-
|
|
19
|
-
onClear:
|
|
18
|
+
readOnly: v,
|
|
19
|
+
onClear: k,
|
|
20
20
|
...F
|
|
21
21
|
}) {
|
|
22
|
-
const [
|
|
23
|
-
s(
|
|
24
|
-
},
|
|
25
|
-
s(""),
|
|
26
|
-
|
|
22
|
+
const [m, s] = j(a), B = (g) => {
|
|
23
|
+
s(g.target.value), n?.(g);
|
|
24
|
+
}, y = () => {
|
|
25
|
+
s(""), n?.({
|
|
26
|
+
target: { value: "" }
|
|
27
|
+
}), k?.();
|
|
28
|
+
}, u = b ?? m, D = !!u && !i && p && !v;
|
|
27
29
|
return /* @__PURE__ */ h(
|
|
28
|
-
|
|
30
|
+
E,
|
|
29
31
|
{
|
|
30
32
|
className: t?.container,
|
|
31
33
|
display: "inline-block",
|
|
@@ -33,7 +35,7 @@ function I({
|
|
|
33
35
|
selectors: { "&, & *": { boxSizing: "border-box" } },
|
|
34
36
|
children: [
|
|
35
37
|
o && /* @__PURE__ */ e(
|
|
36
|
-
|
|
38
|
+
f,
|
|
37
39
|
{
|
|
38
40
|
"aria-label": "icon",
|
|
39
41
|
boxSize: "24px",
|
|
@@ -50,7 +52,6 @@ function I({
|
|
|
50
52
|
/* @__PURE__ */ e(
|
|
51
53
|
C,
|
|
52
54
|
{
|
|
53
|
-
ref: k,
|
|
54
55
|
_disabled: {
|
|
55
56
|
_placeholder: {
|
|
56
57
|
color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
|
|
@@ -72,15 +73,15 @@ function I({
|
|
|
72
73
|
},
|
|
73
74
|
"aria-label": "input",
|
|
74
75
|
bg: "var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",
|
|
75
|
-
borderColor:
|
|
76
|
+
borderColor: l ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
|
|
76
77
|
borderRadius: "8px",
|
|
77
78
|
borderStyle: "solid",
|
|
78
79
|
borderWidth: "1px",
|
|
79
80
|
className: `${x || ""} ${t?.input || ""}`.trim(),
|
|
80
81
|
disabled: i,
|
|
81
|
-
onChange:
|
|
82
|
+
onChange: B,
|
|
82
83
|
pl: o ? "36px" : "12px",
|
|
83
|
-
pr:
|
|
84
|
+
pr: p ? "36px" : "12px",
|
|
84
85
|
py: "12px",
|
|
85
86
|
styleOrder: 1,
|
|
86
87
|
styleVars: {
|
|
@@ -96,13 +97,13 @@ function I({
|
|
|
96
97
|
},
|
|
97
98
|
transition: "all 0.1s ease-in-out",
|
|
98
99
|
typography: c,
|
|
99
|
-
value:
|
|
100
|
+
value: u,
|
|
100
101
|
...F
|
|
101
102
|
}
|
|
102
103
|
),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
D && /* @__PURE__ */ e(w, { onClick: y }),
|
|
105
|
+
l && d && /* @__PURE__ */ e(
|
|
106
|
+
A,
|
|
106
107
|
{
|
|
107
108
|
"aria-label": "error-message",
|
|
108
109
|
bottom: "-8px",
|
|
@@ -113,16 +114,16 @@ function I({
|
|
|
113
114
|
styleOrder: 1,
|
|
114
115
|
transform: "translateY(100%)",
|
|
115
116
|
typography: "inputPlaceholder",
|
|
116
|
-
children:
|
|
117
|
+
children: d
|
|
117
118
|
}
|
|
118
119
|
)
|
|
119
120
|
]
|
|
120
121
|
}
|
|
121
122
|
);
|
|
122
123
|
}
|
|
123
|
-
function
|
|
124
|
+
function w(a) {
|
|
124
125
|
return /* @__PURE__ */ e(
|
|
125
|
-
|
|
126
|
+
L,
|
|
126
127
|
{
|
|
127
128
|
alignItems: "center",
|
|
128
129
|
"aria-label": "clear-button",
|
|
@@ -140,6 +141,7 @@ function j(a) {
|
|
|
140
141
|
styleOrder: 1,
|
|
141
142
|
top: "50%",
|
|
142
143
|
transform: "translateY(-50%)",
|
|
144
|
+
type: "button",
|
|
143
145
|
...a,
|
|
144
146
|
children: /* @__PURE__ */ h(
|
|
145
147
|
"svg",
|
|
@@ -177,6 +179,6 @@ function j(a) {
|
|
|
177
179
|
);
|
|
178
180
|
}
|
|
179
181
|
export {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
+
w as ClearButton,
|
|
183
|
+
O as Input
|
|
182
184
|
};
|
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.25",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
50
50
|
"storybook": "^9.1.10",
|
|
51
51
|
"typescript": "^5.9.3",
|
|
52
|
-
"vite": "
|
|
52
|
+
"vite": "7.1.10",
|
|
53
53
|
"vite-plugin-dts": "^4.5.4",
|
|
54
54
|
"vitest": "^3.2.4",
|
|
55
55
|
"@devup-ui/vite-plugin": "1.0.44"
|