@matchain/matchid-sdk-react 0.1.14 → 0.1.16

package/dist/index.css

@@ -57,6 +57,7 @@ body {
     /**field component**/
     --matchid-field-color: var(--matchid-text-color);
     --matchid-field-error-color: var(--matchid-red-600);
+    --matchid-field-required-color:#E60808;
     /**button component**/
     --matchid-btn-border-color: var(--matchid-black);
     --matchid-btn-color: var(--matchid-black);
@@ -185,13 +186,16 @@ body {
 .matchid-modal-header {
     padding-bottom: 24px;
     margin-bottom: 24px;
-    border-bottom: 1px solid var(--matchid-modal-header-border-color, #E3E3E3);
     height: 54px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
+.matchid-modal-header-border{
+    border-bottom: 1px solid var(--matchid-modal-header-border-color, #E3E3E3);
+}
+
 .matchid-modal-header-content {
     display: flex;
     align-items: center;
@@ -272,6 +276,10 @@ body {
     font-weight: 600;
 }
 
+.matchid-field-required{
+    color: var(--matchid-field-required-color);
+}
+
 .matchid-field-error{
     font-size: 14px;
     font-weight: 600;

package/dist/index.d.mts

@@ -43,6 +43,7 @@ type OverviewInfo = {
 type ModalProps = PropsWithChildren & {
     isOpen: boolean,
     width?: number
+    className?: string
 }
 
 type ModalWithHeaderProps = ModalProps & {
@@ -50,6 +51,7 @@ type ModalWithHeaderProps = ModalProps & {
     onClose?: () => void,
     title?: string
     showClose?: boolean
+    showBorder?: boolean
 }
 
 type InputProps = {
@@ -60,6 +62,7 @@ type InputProps = {
     readonly?: boolean
     type?: string
     maxLength?: number
+    className?: string
     after?: React.ReactNode
 }
 
@@ -158,19 +161,21 @@ declare const useMatch: () => MatchContextType;
 
 declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;
 
-declare function Field({ label, children, error }: {
+declare function Field({ label, children, error, required, className }: {
     label: ReactNode;
     error?: ReactNode;
+    required?: boolean;
+    className?: string;
 } & PropsWithChildren): react_jsx_runtime.JSX.Element;
 
-declare function Input({ onChange, type, after, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ onChange, type, after, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
 declare function Button({ size, disabled, loading, children, onClick, highlight, block, type, rounded, className, style }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
 
-declare function Modal({ children, isOpen, width }: ModalProps): react_jsx_runtime.JSX.Element;
-declare function ModalWithHeader({ children, onBack, onClose, title, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, isOpen, width, className }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function ModalWithHeader({ children, onBack, onClose, title, showBorder, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
 
 declare function LoginButton({ loginRender, methods, onLoginClick, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
     loginRender?: () => JSX.Element;

package/dist/index.d.ts

@@ -43,6 +43,7 @@ type OverviewInfo = {
 type ModalProps = PropsWithChildren & {
     isOpen: boolean,
     width?: number
+    className?: string
 }
 
 type ModalWithHeaderProps = ModalProps & {
@@ -50,6 +51,7 @@ type ModalWithHeaderProps = ModalProps & {
     onClose?: () => void,
     title?: string
     showClose?: boolean
+    showBorder?: boolean
 }
 
 type InputProps = {
@@ -60,6 +62,7 @@ type InputProps = {
     readonly?: boolean
     type?: string
     maxLength?: number
+    className?: string
     after?: React.ReactNode
 }
 
@@ -158,19 +161,21 @@ declare const useMatch: () => MatchContextType;
 
 declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;
 
-declare function Field({ label, children, error }: {
+declare function Field({ label, children, error, required, className }: {
     label: ReactNode;
     error?: ReactNode;
+    required?: boolean;
+    className?: string;
 } & PropsWithChildren): react_jsx_runtime.JSX.Element;
 
-declare function Input({ onChange, type, after, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ onChange, type, after, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
 declare function Button({ size, disabled, loading, children, onClick, highlight, block, type, rounded, className, style }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
 
-declare function Modal({ children, isOpen, width }: ModalProps): react_jsx_runtime.JSX.Element;
-declare function ModalWithHeader({ children, onBack, onClose, title, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, isOpen, width, className }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function ModalWithHeader({ children, onBack, onClose, title, showBorder, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
 
 declare function LoginButton({ loginRender, methods, onLoginClick, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
     loginRender?: () => JSX.Element;

package/dist/index.js

@@ -397,13 +397,14 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
 function Modal({
   children,
   isOpen,
-  width = 480
+  width = 480,
+  className = ""
 }) {
   return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: "matchid-overlay",
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "matchid-modal", style: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `matchid-modal ${className}`, style: {
         width
       }, children })
     }
@@ -414,11 +415,12 @@ function ModalWithHeader({
   onBack,
   onClose,
   title,
+  showBorder = true,
   showClose = true,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Modal, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `matchid-modal-header`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "matchid-modal-header-content", children: [
         onBack && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matchid-modal-header-title", children: title })
@@ -439,10 +441,11 @@ function Input({
   onChange,
   type,
   after,
+  className = "",
   ...props
 }) {
   const [inputType, setInputType] = (0, import_react.useState)(type);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
     props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DeleteRoundIcon, { onClick: (e) => {
       if (onChange) {
@@ -461,10 +464,15 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 function Field({
   label,
   children,
-  error
+  error,
+  required,
+  className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matchid-field-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matchid-field-label", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matchid-field-required", children: "*" }),
+      label
+    ] }),
     children,
     error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matchid-field-error", children: error })
   ] });