gbs-add-block 0.0.80 → 0.0.82

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.80)
+# GBS Building Blocks 2.0 (v0.0.82)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.80)
+## What's New 🎉 (Ver 0.0.82)
 
 - Updated for bug fixes.
 - New Component Card & SideBar Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/input/index.tsx

@@ -8,7 +8,7 @@
 import React, { useState, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 import Icon from "../icon/Icon";
-import { eye } from "../icon/iconPaths";
+import { eye, search } from "../icon/iconPaths";
 import type { InputProps } from "./types";
 import { iconClass, inputStyles, primary } from "../globalStyle";
 
@@ -96,6 +96,11 @@ export const Input = ({
                 props.type === "password" && showPassword ? "text" : props.type
               }
             />
+            {props.type === "search" && (
+              <div className="absolute inset-y-0 right-2 flex items-center">
+                <Icon elements={search} svgClass={iconClass["grey-common"]} />
+              </div>
+            )}
             {props.type === "password" && (
               <button
                 type="button"

package/source/components/modal/index.tsx

@@ -18,7 +18,7 @@ const defaultClasses = {
   modalTitle:
     "p-4 text-lg leading-6 font-medium text-gray-900 flex justify-between items-center",
   closeButton:
-    "p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300",
+    "absolute top-2 right-2 p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300",
   closeIcon: "h-5 w-5 stroke-gray-500 fill-none",
 };
 
@@ -38,6 +38,7 @@ export const Modal = memo(
     titleId = "modal-title",
     closeButtonContent,
     animationDuration = 200,
+    showTitle = true,
   }: ModalProps) => {
     const modalRef = useRef<HTMLDivElement>(null);
     const previousActiveElement = useRef<HTMLElement | null>(null);
@@ -114,7 +115,7 @@ export const Modal = memo(
           tabIndex={-1}
         >
           <div className={twMerge(modalTitleClass, classModalTitle)}>
-            <h2 id={titleId}>{modalTitle}</h2>
+            {showTitle && <h2 id={titleId}>{modalTitle}</h2>}
             {showCloseButton && (
               <button
                 onClick={handleClose}
@@ -128,7 +129,7 @@ export const Modal = memo(
               </button>
             )}
           </div>
-          <hr className="border-gray-200" />
+          {showTitle && <hr className="border-gray-200" />}
           <div className="p-4">{children}</div>
         </div>
       </div>

package/source/components/modal/types.ts

@@ -13,4 +13,5 @@ export type ModalProps = {
   titleId?: string;
   closeButtonContent?: React.ReactNode;
   animationDuration?: number;
+  showTitle?: boolean;
 };