@matchain/matchid-sdk-react 0.1.14 → 0.1.15

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

@@ -50,6 +50,7 @@ type ModalWithHeaderProps = ModalProps & {
     onClose?: () => void,
     title?: string
     showClose?: boolean
+    showBorder?: boolean
 }
 
 type InputProps = {
@@ -158,9 +159,10 @@ 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 }: {
     label: ReactNode;
     error?: ReactNode;
+    required?: boolean;
 } & PropsWithChildren): react_jsx_runtime.JSX.Element;
 
 declare function Input({ onChange, type, after, ...props }: InputProps): react_jsx_runtime.JSX.Element;
@@ -170,7 +172,7 @@ declare function Button({ size, disabled, loading, children, onClick, highlight,
 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 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

@@ -50,6 +50,7 @@ type ModalWithHeaderProps = ModalProps & {
     onClose?: () => void,
     title?: string
     showClose?: boolean
+    showBorder?: boolean
 }
 
 type InputProps = {
@@ -158,9 +159,10 @@ 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 }: {
     label: ReactNode;
     error?: ReactNode;
+    required?: boolean;
 } & PropsWithChildren): react_jsx_runtime.JSX.Element;
 
 declare function Input({ onChange, type, after, ...props }: InputProps): react_jsx_runtime.JSX.Element;
@@ -170,7 +172,7 @@ declare function Button({ size, disabled, loading, children, onClick, highlight,
 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 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

@@ -414,11 +414,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 })
@@ -461,10 +462,14 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 function Field({
   label,
   children,
-  error
+  error,
+  required
 }) {
   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 }),
+    /* @__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 })
   ] });