@devup-ui/components 0.1.1 → 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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DevupThemeTypography } from '@devup-ui/react';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
|
-
interface InputProps extends Omit<ComponentProps<'input'>, '
|
|
3
|
+
interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
|
|
4
4
|
type?: Exclude<ComponentProps<'input'>['type'], 'file'>;
|
|
5
5
|
typography?: keyof DevupThemeTypography;
|
|
6
6
|
error?: boolean;
|
|
@@ -11,6 +11,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'className' | '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'>, 'className' | '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, 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,
|
|
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,36 +1,38 @@
|
|
|
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
|
+
className: o,
|
|
16
17
|
classNames: t,
|
|
17
|
-
ref:
|
|
18
|
-
|
|
18
|
+
ref: B,
|
|
19
|
+
onClear: p,
|
|
20
|
+
...y
|
|
19
21
|
}) {
|
|
20
|
-
const [
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
return /* @__PURE__ */
|
|
26
|
-
|
|
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,
|
|
27
29
|
{
|
|
28
30
|
display: "inline-block",
|
|
29
31
|
pos: "relative",
|
|
30
32
|
selectors: { "&,&>*": { boxSizing: "border-box" } },
|
|
31
33
|
children: [
|
|
32
34
|
n && /* @__PURE__ */ e(
|
|
33
|
-
|
|
35
|
+
C,
|
|
34
36
|
{
|
|
35
37
|
"aria-label": "icon",
|
|
36
38
|
boxSize: "24px",
|
|
@@ -45,9 +47,9 @@ function I({
|
|
|
45
47
|
}
|
|
46
48
|
),
|
|
47
49
|
/* @__PURE__ */ e(
|
|
48
|
-
|
|
50
|
+
A,
|
|
49
51
|
{
|
|
50
|
-
ref:
|
|
52
|
+
ref: B,
|
|
51
53
|
_disabled: {
|
|
52
54
|
_placeholder: {
|
|
53
55
|
color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
|
|
@@ -69,15 +71,15 @@ function I({
|
|
|
69
71
|
},
|
|
70
72
|
"aria-label": "input",
|
|
71
73
|
bg: "var(--inputBg, light-dark(#FFFFFF, #2E2E2E))",
|
|
72
|
-
borderColor:
|
|
74
|
+
borderColor: F ? "var(--error, light-dark(#D52B2E, #FF5B5E))" : "var(--border, light-dark(#E4E4E4, #434343))",
|
|
73
75
|
borderRadius: "8px",
|
|
74
76
|
borderStyle: "solid",
|
|
75
77
|
borderWidth: "1px",
|
|
76
|
-
className: t == null ? void 0 : t.input,
|
|
78
|
+
className: `${o || ""} ${(t == null ? void 0 : t.input) || ""}`.trim(),
|
|
77
79
|
disabled: d,
|
|
78
|
-
onChange:
|
|
80
|
+
onChange: D,
|
|
79
81
|
pl: n ? "36px" : "12px",
|
|
80
|
-
pr:
|
|
82
|
+
pr: b ? "36px" : "12px",
|
|
81
83
|
py: "12px",
|
|
82
84
|
styleOrder: 1,
|
|
83
85
|
styleVars: {
|
|
@@ -92,14 +94,14 @@ function I({
|
|
|
92
94
|
negative20: r == null ? void 0 : r.negative20
|
|
93
95
|
},
|
|
94
96
|
transition: "all 0.1s ease-in-out",
|
|
95
|
-
typography:
|
|
96
|
-
value:
|
|
97
|
-
...
|
|
97
|
+
typography: v,
|
|
98
|
+
value: k ?? h,
|
|
99
|
+
...y
|
|
98
100
|
}
|
|
99
101
|
),
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
f && /* @__PURE__ */ e(S, { onClick: E }),
|
|
103
|
+
u && /* @__PURE__ */ e(
|
|
104
|
+
L,
|
|
103
105
|
{
|
|
104
106
|
"aria-label": "error-message",
|
|
105
107
|
bottom: "-8px",
|
|
@@ -110,16 +112,16 @@ function I({
|
|
|
110
112
|
styleOrder: 1,
|
|
111
113
|
transform: "translateY(100%)",
|
|
112
114
|
typography: "inputPlaceholder",
|
|
113
|
-
children:
|
|
115
|
+
children: u
|
|
114
116
|
}
|
|
115
117
|
)
|
|
116
118
|
]
|
|
117
119
|
}
|
|
118
120
|
);
|
|
119
121
|
}
|
|
120
|
-
function
|
|
122
|
+
function S(i) {
|
|
121
123
|
return /* @__PURE__ */ e(
|
|
122
|
-
|
|
124
|
+
j,
|
|
123
125
|
{
|
|
124
126
|
alignItems: "center",
|
|
125
127
|
"aria-label": "clear-button",
|
|
@@ -138,7 +140,7 @@ function j(i) {
|
|
|
138
140
|
top: "50%",
|
|
139
141
|
transform: "translateY(-50%)",
|
|
140
142
|
...i,
|
|
141
|
-
children: /* @__PURE__ */
|
|
143
|
+
children: /* @__PURE__ */ x(
|
|
142
144
|
"svg",
|
|
143
145
|
{
|
|
144
146
|
fill: "none",
|
|
@@ -174,6 +176,6 @@ function j(i) {
|
|
|
174
176
|
);
|
|
175
177
|
}
|
|
176
178
|
export {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
+
S as ClearButton,
|
|
180
|
+
T as Input
|
|
179
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": "*",
|