@devup-ui/components 0.1.1 → 0.1.2
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 t=require("react/jsx-runtime"),i=require("@devup-ui/react"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("@devup-ui/react"),f=require("react");function C({defaultValue:a,value:v,onChange:n,typography:k,error:o=!1,errorMessage:p,allowClear:l=!0,icon:d,colors:e,disabled:u,className:F,classNames:r,ref:B,...y}){const[b,x]=f.useState(a||""),D=g=>{x(g.target.value),n==null||n(g)},E=()=>{x("")},j=b&&!u&&l;return t.jsxs(i.Box,{display:"inline-block",pos:"relative",selectors:{"&,&>*":{boxSizing:"border-box"}},children:[d&&t.jsx(i.Center,{"aria-label":"icon",boxSize:"24px",className:r==null?void 0:r.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}),t.jsx(i.Input,{ref:B,_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:`${F||""} ${(r==null?void 0:r.input)||""}`.trim(),disabled:u,onChange:D,pl:d?"36px":"12px",pr:l?"36px":"12px",py:"12px",styleOrder:1,styleVars:{primary:e==null?void 0:e.primary,error:e==null?void 0:e.error,text:e==null?void 0:e.text,base:e==null?void 0:e.base,iconBold:e==null?void 0:e.iconBold,border:e==null?void 0:e.border,inputBackground:e==null?void 0:e.inputBackground,primaryFocus:e==null?void 0:e.primaryFocus,negative20:e==null?void 0:e.negative20},transition:"all 0.1s ease-in-out",typography:k,value:v??b,...y}),j&&t.jsx(h,{onClick:E}),p&&t.jsx(i.Text,{"aria-label":"error-message",bottom:"-8px",className:r==null?void 0:r.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",typography:"inputPlaceholder",children:p})]})}function h(a){return t.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:t.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("path",{d:"M18 6L6 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"}),t.jsx("path",{d:"M6 6L18 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"})]})})}exports.ClearButton=h;exports.Input=C;
|
|
@@ -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;
|
|
@@ -24,7 +24,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'className' | 'type'>
|
|
|
24
24
|
};
|
|
25
25
|
icon?: React.ReactNode;
|
|
26
26
|
}
|
|
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;
|
|
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
28
|
export declare function ClearButton(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
export {};
|
|
30
30
|
//# 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,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,2CA4GZ;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA6C1D"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as g, jsx as e } from "react/jsx-runtime";
|
|
3
|
-
import { Box as
|
|
4
|
-
import { useState as
|
|
5
|
-
function
|
|
3
|
+
import { Box as f, Center as C, Input as m, Text as A, Button as L } from "@devup-ui/react";
|
|
4
|
+
import { useState as j } from "react";
|
|
5
|
+
function O({
|
|
6
6
|
defaultValue: i,
|
|
7
7
|
value: x,
|
|
8
8
|
onChange: a,
|
|
@@ -13,24 +13,25 @@ function I({
|
|
|
13
13
|
icon: n,
|
|
14
14
|
colors: r,
|
|
15
15
|
disabled: d,
|
|
16
|
+
className: o,
|
|
16
17
|
classNames: t,
|
|
17
|
-
ref:
|
|
18
|
-
...
|
|
18
|
+
ref: F,
|
|
19
|
+
...B
|
|
19
20
|
}) {
|
|
20
|
-
const [l, b] =
|
|
21
|
+
const [l, b] = j(i || ""), y = (h) => {
|
|
21
22
|
b(h.target.value), a == null || a(h);
|
|
22
|
-
},
|
|
23
|
+
}, D = () => {
|
|
23
24
|
b("");
|
|
24
|
-
},
|
|
25
|
+
}, E = l && !d && u;
|
|
25
26
|
return /* @__PURE__ */ g(
|
|
26
|
-
|
|
27
|
+
f,
|
|
27
28
|
{
|
|
28
29
|
display: "inline-block",
|
|
29
30
|
pos: "relative",
|
|
30
31
|
selectors: { "&,&>*": { boxSizing: "border-box" } },
|
|
31
32
|
children: [
|
|
32
33
|
n && /* @__PURE__ */ e(
|
|
33
|
-
|
|
34
|
+
C,
|
|
34
35
|
{
|
|
35
36
|
"aria-label": "icon",
|
|
36
37
|
boxSize: "24px",
|
|
@@ -45,9 +46,9 @@ function I({
|
|
|
45
46
|
}
|
|
46
47
|
),
|
|
47
48
|
/* @__PURE__ */ e(
|
|
48
|
-
|
|
49
|
+
m,
|
|
49
50
|
{
|
|
50
|
-
ref:
|
|
51
|
+
ref: F,
|
|
51
52
|
_disabled: {
|
|
52
53
|
_placeholder: {
|
|
53
54
|
color: "var(--inputDisabledText, light-dark(#D6D7DE, #373737))"
|
|
@@ -73,9 +74,9 @@ function I({
|
|
|
73
74
|
borderRadius: "8px",
|
|
74
75
|
borderStyle: "solid",
|
|
75
76
|
borderWidth: "1px",
|
|
76
|
-
className: t == null ? void 0 : t.input,
|
|
77
|
+
className: `${o || ""} ${(t == null ? void 0 : t.input) || ""}`.trim(),
|
|
77
78
|
disabled: d,
|
|
78
|
-
onChange:
|
|
79
|
+
onChange: y,
|
|
79
80
|
pl: n ? "36px" : "12px",
|
|
80
81
|
pr: u ? "36px" : "12px",
|
|
81
82
|
py: "12px",
|
|
@@ -94,12 +95,12 @@ function I({
|
|
|
94
95
|
transition: "all 0.1s ease-in-out",
|
|
95
96
|
typography: k,
|
|
96
97
|
value: x ?? l,
|
|
97
|
-
...
|
|
98
|
+
...B
|
|
98
99
|
}
|
|
99
100
|
),
|
|
100
|
-
|
|
101
|
+
E && /* @__PURE__ */ e(w, { onClick: D }),
|
|
101
102
|
p && /* @__PURE__ */ e(
|
|
102
|
-
|
|
103
|
+
A,
|
|
103
104
|
{
|
|
104
105
|
"aria-label": "error-message",
|
|
105
106
|
bottom: "-8px",
|
|
@@ -117,9 +118,9 @@ function I({
|
|
|
117
118
|
}
|
|
118
119
|
);
|
|
119
120
|
}
|
|
120
|
-
function
|
|
121
|
+
function w(i) {
|
|
121
122
|
return /* @__PURE__ */ e(
|
|
122
|
-
|
|
123
|
+
L,
|
|
123
124
|
{
|
|
124
125
|
alignItems: "center",
|
|
125
126
|
"aria-label": "clear-button",
|
|
@@ -174,6 +175,6 @@ function j(i) {
|
|
|
174
175
|
);
|
|
175
176
|
}
|
|
176
177
|
export {
|
|
177
|
-
|
|
178
|
-
|
|
178
|
+
w as ClearButton,
|
|
179
|
+
O as Input
|
|
179
180
|
};
|