gbs-add-block 1.2.5 → 1.2.7

package/source/components/multiselect/index.tsx

@@ -153,7 +153,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
                 <Icon
                   elements={check}
                   svgClass={`h-4 w-4 fill-none ${
-                    selected.includes(value) ? "stroke-gray-500" : ""
+                    selected.includes(value) ? "stroke-black dark:stroke-white" : ""
                   }`}
                 />
                 {label.length > 20 ? `${label.substring(0, 20)}...` : label}
@@ -179,7 +179,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             return (
               <span
                 key={index}
-                className="bg-slate-800 text-white px-2 py-1 rounded flex items-center gap-1 text-xs whitespace-nowrap"
+                className="bg-black text-white dark:bg-zinc-900 px-2 py-1 rounded flex items-center gap-1 text-xs whitespace-nowrap border border-transparent dark:border-zinc-800"
               >
                 {label.length > 15 ? `${label.substring(0, 15)}...` : label}
                 <span
@@ -187,7 +187,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
                     e.stopPropagation();
                     handleSelect(value);
                   }}
-                  className="cursor-pointer hover:bg-slate-700 rounded p-0.5"
+                  className="cursor-pointer hover:bg-zinc-800 dark:hover:bg-zinc-700 rounded p-0.5"
                 >
                   <Icon elements={x} svgClass="h-3 w-3 stroke-white" />
                 </span>
@@ -195,7 +195,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             );
           })}
         {truncate && selected.length > 3 && (
-          <span className="bg-slate-800 text-white px-2 py-1 rounded text-xs whitespace-nowrap">
+          <span className="bg-black text-white dark:bg-zinc-900 px-2 py-1 rounded text-xs whitespace-nowrap border border-transparent dark:border-zinc-800">
             +{selected.length - 3} more
           </span>
         )}
@@ -266,3 +266,4 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
 
 const MemoizedMultiSelect = memo(MultiSelect);
 export { MemoizedMultiSelect as MultiSelect };
+

package/source/components/navbar/AuthSection.tsx

@@ -27,7 +27,7 @@ const AuthSection: React.FC<AuthSectionProps> = ({
               alt={userProfile.name}
             />
           ) : (
-            <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
+            <div className="h-8 w-8 rounded-full bg-black dark:bg-white text-white dark:text-black flex items-center justify-center font-bold">
               {userProfile.name.charAt(0).toUpperCase()}
             </div>
           )}
@@ -75,11 +75,11 @@ const AuthSection: React.FC<AuthSectionProps> = ({
       <button
         onClick={onLogin}
         className={`
-          px-4 py-2 text-sm font-medium rounded-md
+          px-4 py-2 text-sm font-medium rounded-md border border-zinc-300 dark:border-zinc-700
           ${
             variant === "dark"
-              ? "text-white hover:bg-gray-700"
-              : "text-blue-600 hover:bg-blue-50"
+              ? "text-white hover:bg-zinc-850"
+              : "text-black hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-900"
           }
         `}
       >
@@ -87,7 +87,7 @@ const AuthSection: React.FC<AuthSectionProps> = ({
       </button>
       <button
         onClick={onSignup}
-        className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
+        className="px-4 py-2 text-sm font-medium text-white bg-black dark:bg-white dark:text-black rounded-md hover:bg-zinc-900 dark:hover:bg-zinc-100 transition-colors"
       >
         Sign up
       </button>

package/source/components/navbar/NavItemComponent.tsx

@@ -38,7 +38,7 @@ const NavItemComponent: React.FC<NavItemComponentProps> = ({
                 onClick={(e) => toggleSubmenu(item.id, e)}
                 className={`
                   flex items-center justify-between px-3 py-2 rounded-md
-                  ${item.highlight ? "font-medium text-blue-600" : ""}
+                  ${item.highlight ? "font-bold text-black dark:text-white" : ""}
                   ${
                     isMobile
                       ? "w-full text-left"
@@ -92,7 +92,7 @@ const NavItemComponent: React.FC<NavItemComponentProps> = ({
               href={item.href}
               className={`
                 flex items-center px-3 py-2 rounded-md
-                ${item.highlight ? "font-medium text-blue-600" : ""}
+                ${item.highlight ? "font-bold text-black dark:text-white" : ""}
                 ${
                   isMobile
                     ? "block w-full"

package/source/components/select/PortalDropDown.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { popUp } from "../globalStyle";
 
 export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
 
-  useEffect(() => {
-    if (isVisible && targetRef.current) {
+  const updatePosition = useCallback(() => {
+    if (targetRef && targetRef.current) {
       const rect = targetRef.current.getBoundingClientRect();
       const scrollTop =
         window.pageYOffset || document.documentElement.scrollTop;
@@ -19,7 +19,23 @@ export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
         width: rect.width,
       });
     }
-  }, [isVisible, targetRef]);
+  }, [targetRef]);
+
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+
+      // Listen to scroll events anywhere in the document (use capture to catch scroll inside elements)
+      window.addEventListener("scroll", updatePosition, true);
+      // Listen to window resizing
+      window.addEventListener("resize", updatePosition);
+    }
+
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isVisible, updatePosition]);
 
   if (!isVisible) return null;
 

package/source/components/select/index.tsx

@@ -40,6 +40,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     error = undefined,
     onFiltering,
     disabled = false,
+    className = "",
   } = props;
 
   applyScrollbarStyles();
@@ -141,7 +142,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
               name="search"
               id="search"
               placeholder="Search a value"
-              className="w-full outline-none "
+              className="w-full bg-transparent outline-none text-slate-900 placeholder:text-slate-400 dark:text-slate-100"
               ref={inputRef}
               value={searchTerm}
               onChange={(e) => {
@@ -163,7 +164,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
                 }
               }}
               className={`${selectStyle["filter-button"]} ${
-                focusedIndex === index ? "bg-gray-100 dark:bg-gray-700" : ""
+                focusedIndex === index ? "bg-zinc-100 text-black dark:bg-zinc-900 dark:text-white" : ""
               }`}
               onClick={() => handleSelect({ value, label })}
               onMouseEnter={() => setFocusedIndex(index)}
@@ -171,7 +172,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
               <Icon
                 elements={check}
                 svgClass={`h-4 w-4 fill-none ${
-                  selectedItem === value ? "stroke-gray-500" : ""
+                  selectedItem === value ? "stroke-black dark:stroke-white" : ""
                 }`}
               />
               {label.length > 20 ? `${label.substring(0, 20)}...` : label}
@@ -186,7 +187,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
 
   return (
     <div
-      className="relative w-full"
+      className={`relative w-full ${className}`}
       ref={selectRef}
       id={id}
       onKeyDown={handleKeyDown}
@@ -245,3 +246,4 @@ Select.displayName = "Select";
 
 const MemoizedSelect = memo(Select);
 export { MemoizedSelect as Select };
+

package/source/components/select/types.ts

@@ -15,6 +15,7 @@ export type SelectProps = {
   selectedItem?: string;
   onFiltering?: (searchTerm: string) => void;
   disabled?: boolean;
+  className?: string;
 };
 
 export type SelectHandle = {
@@ -25,3 +26,4 @@ export type SelectHandle = {
   selectedDisplay: string;
   selected: string | undefined;
 };
+

package/source/components/spinner/index.tsx

@@ -11,8 +11,8 @@ import type { SpinnerProps } from "./types";
 
 export const Spinner: React.FC<SpinnerProps> = ({
   size = "h-10 w-10",
-  color = "border-blue-600",
-  fullCircleColor = "border-t-red-400",
+  color = "border-blue-500",
+  fullCircleColor = "border-t-blue-400",
   dotColor = "bg-blue-500",
   duration = "duration-500",
   type = "circle",

package/source/components/tabs/index.tsx

@@ -1,52 +1,71 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState } from "react";
-import type { TabsProps } from "./types";
-
-export function Tabs({
-  tabs,
-  defaultTabId,
-  renderContent,
-  onChange,
-  className = "",
-}: TabsProps) {
-  const [activeTabId, setActiveTabId] = useState<string>(
-    defaultTabId || (tabs.length > 0 ? tabs[0].id : "")
-  );
-
-  const handleTabChange = (tabId: string) => {
-    setActiveTabId(tabId);
-    if (onChange) {
-      onChange(tabId);
-    }
-  };
-
-  return (
-    <div className={`w-full ${className}`}>
-      <nav className="flex border-b border-gray-200">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            disabled={tab.disabled}
-            className={`px-4 py-2 text-sm font-medium transition-colors ${
-              tab.disabled
-                ? "text-gray-300 cursor-not-allowed"
-                : activeTabId === tab.id
-                ? "border-b-2 border-black text-black"
-                : "text-gray-500 hover:text-gray-700 hover:border-gray-300"
-            }`}
-            onClick={() => !tab.disabled && handleTabChange(tab.id)}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </nav>
-      <div className="pt-4">{renderContent(activeTabId)}</div>
-    </div>
-  );
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import type { TabsProps } from "./types";
+
+export function Tabs({
+  tabs,
+  defaultTabId,
+  renderContent,
+  onChange,
+  className = "",
+  variant = "line",
+}: TabsProps) {
+  const [activeTabId, setActiveTabId] = useState<string>(
+    defaultTabId || (tabs.length > 0 ? tabs[0].id : "")
+  );
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTabId(tabId);
+    if (onChange) {
+      onChange(tabId);
+    }
+  };
+
+  const isPills = variant === "pills";
+
+  return (
+    <div className={twMerge("w-full", className)}>
+      <nav
+        className={twMerge(
+          "flex gap-1",
+          isPills
+            ? "rounded-lg bg-zinc-100 p-1 dark:bg-zinc-900"
+            : "border-b border-zinc-200 dark:border-zinc-800"
+        )}
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTabId === tab.id;
+
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              disabled={tab.disabled}
+              className={twMerge(
+                "min-h-9 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white disabled:cursor-not-allowed disabled:text-zinc-400",
+                isPills ? "rounded-md" : "-mb-px border-b-2 border-transparent",
+                isActive && isPills
+                  ? "bg-white text-zinc-950 shadow-sm dark:bg-zinc-800 dark:text-white"
+                  : "",
+                isActive && !isPills
+                  ? "border-black text-black dark:border-white dark:text-white"
+                  : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-100"
+              )}
+              onClick={() => !tab.disabled && handleTabChange(tab.id)}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </nav>
+      <div className="pt-4">{renderContent(activeTabId)}</div>
+    </div>
+  );
 }

package/source/components/tabs/types.ts

@@ -1,15 +1,16 @@
-import type { ReactNode } from "react";
-
-export interface TabItem {
-  id: string;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface TabsProps {
-  tabs: TabItem[];
-  defaultTabId?: string;
-  renderContent: (activeTabId: string) => ReactNode;
-  onChange?: (tabId: string) => void;
-  className?: string;
+import type { ReactNode } from "react";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  tabs: TabItem[];
+  defaultTabId?: string;
+  renderContent: (activeTabId: string) => ReactNode;
+  onChange?: (tabId: string) => void;
+  className?: string;
+  variant?: "line" | "pills";
 }

package/source/components/textarea/index.tsx

@@ -1,150 +1,123 @@
-import React, { useState, useRef, useEffect } from "react";
-import type { TextAreaProps } from "./types";
-
-export const TextArea = ({
-  label,
-  placeholder = "Enter your text here...",
-  value,
-  onChange,
-  error,
-  helperText,
-  rows = 4,
-  maxLength,
-  required = false,
-  disabled = false,
-  variant = "default",
-  className = "",
-  ...props
-}: TextAreaProps) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [charCount, setCharCount] = useState(0);
-  const textareaRef = useRef(null);
-
-  useEffect(() => {
-    if (value) {
-      setCharCount(value.length);
-    }
-  }, [value]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = e.target.value;
-    setCharCount(newValue.length);
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-
-  const getVariantClasses = () => {
-    switch (variant) {
-      case "minimal":
-        return {
-          container: "relative",
-          textarea: `w-full px-0 py-3 text-gray-900 placeholder-gray-400 bg-transparent border-0 border-b-2 border-gray-200 resize-none focus:border-blue-500 focus:outline-none ${
-            disabled ? "opacity-50 cursor-not-allowed" : ""
-          }`,
-          label: `absolute left-0 transition-all duration-200 pointer-events-none ${
-            isFocused || value
-              ? "-top-6 text-sm text-blue-500"
-              : "top-3 text-base text-gray-400"
-          }`,
-        };
-      default:
-        return {
-          container: "relative",
-          textarea: `w-full px-4 py-3 text-gray-900 placeholder-gray-400 bg-white border-2 border-gray-200 rounded-lg resize-none focus:border-blue-500 focus:ring-blue-500/20 focus:outline-none transition-all duration-200 shadow-sm hover:border-gray-300 ${
-            error
-              ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
-              : ""
-          } ${disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""}`,
-          label: `block text-sm font-medium text-gray-700 mb-2 ${
-            required ? "after:content-['*'] after:text-red-500 after:ml-1" : ""
-          }`,
-        };
-    }
-  };
-
-  const variantClasses = getVariantClasses();
-
-  return (
-    <div className={`${variantClasses.container} ${className}`}>
-      {label && <label className={variantClasses.label}>{label}</label>}
-
-      <div className="relative">
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholder={
-            variant === "minimal" && isFocused
-              ? placeholder
-              : variant === "minimal"
-              ? ""
-              : placeholder
-          }
-          rows={rows}
-          maxLength={maxLength}
-          required={required}
-          disabled={disabled}
-          className={variantClasses.textarea}
-          {...props}
-        />
-
-        {/* Floating label for minimal variant */}
-        {variant === "minimal" && label && (
-          <label className={variantClasses.label}>{label}</label>
-        )}
-      </div>
-
-      {/* Bottom section with helper text, error, and character count */}
-      <div className="flex justify-between items-start mt-2">
-        <div className="flex-1">
-          {error && (
-            <p className="text-sm text-red-600 flex items-center">
-              <svg
-                className="w-4 h-4 mr-1 flex-shrink-0"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              {error}
-            </p>
-          )}
-          {!error && helperText && (
-            <p className="text-sm text-gray-500">{helperText}</p>
-          )}
-        </div>
-
-        {maxLength && (
-          <div className="ml-4 flex-shrink-0">
-            <span
-              className={`text-sm ${
-                charCount > maxLength * 0.9
-                  ? "text-amber-600"
-                  : charCount === maxLength
-                  ? "text-red-600"
-                  : "text-gray-400"
-              }`}
-            >
-              {charCount}/{maxLength}
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+import React, { useState, useRef, useEffect } from "react";
+import { twMerge } from "tailwind-merge";
+import type { TextAreaProps } from "./types";
+
+export const TextArea = ({
+  label,
+  placeholder = "Enter your text here...",
+  value,
+  onChange,
+  error,
+  helperText,
+  rows = 4,
+  maxLength,
+  required = false,
+  disabled = false,
+  variant = "default",
+  className = "",
+  ...props
+}: TextAreaProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (typeof value === "string") {
+      setCharCount(value.length);
+    }
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCharCount(e.target.value.length);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const isFloating = variant === "minimal" && (isFocused || Boolean(value));
+
+  const variantClasses = {
+    default: {
+      textarea:
+        "border border-zinc-300 bg-white text-zinc-900 shadow-sm hover:border-zinc-400 focus:border-black focus:ring-black/20 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100 dark:focus:border-white dark:focus:ring-white/20",
+      label: "mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
+    },
+    minimal: {
+      textarea:
+        "border-0 border-b-2 border-zinc-200 bg-transparent px-0 shadow-none focus:border-black dark:border-zinc-800 dark:text-zinc-100 dark:focus:border-white",
+      label: twMerge(
+        "absolute left-0 pointer-events-none transition-all duration-200",
+        isFloating ? "-top-5 text-xs text-black dark:text-white font-semibold" : "top-3 text-sm text-zinc-400"
+      ),
+    },
+    glass: {
+      textarea:
+        "border border-white/40 bg-white/70 text-zinc-900 shadow-sm backdrop-blur hover:border-white/70 focus:border-black focus:ring-black/20 dark:border-white/10 dark:bg-zinc-950/70 dark:text-zinc-100 dark:focus:border-white dark:focus:ring-white/20",
+      label: "mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
+    },
+  }[variant];
+
+  return (
+    <div className={twMerge("relative w-full", className)}>
+      {label && variant !== "minimal" && (
+        <label className={variantClasses.label}>
+          {label}
+          {required && <span className="ml-1 text-rose-500">*</span>}
+        </label>
+      )}
+
+      <div className="relative">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          placeholder={variant === "minimal" ? (isFocused ? placeholder : "") : placeholder}
+          rows={rows}
+          maxLength={maxLength}
+          required={required}
+          disabled={disabled}
+          className={twMerge(
+            "w-full resize-none rounded-lg px-3 py-3 text-sm outline-none transition-all duration-200 focus:ring-2 disabled:cursor-not-allowed disabled:bg-zinc-50 dark:disabled:bg-zinc-900 disabled:opacity-60",
+            variantClasses.textarea,
+            error ? "border-rose-500 focus:border-rose-500 focus:ring-rose-500/20" : ""
+          )}
+          {...props}
+        />
+
+        {variant === "minimal" && label && (
+          <label
+            className={variantClasses.label}
+            onClick={() => textareaRef.current?.focus()}
+          >
+            {label}
+            {required && <span className="ml-1 text-rose-500">*</span>}
+          </label>
+        )}
+      </div>
+
+      <div className="mt-2 flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          {error ? (
+            <p className="text-xs font-medium text-rose-600">{error}</p>
+          ) : helperText ? (
+            <p className="text-xs text-zinc-500">{helperText}</p>
+          ) : null}
+        </div>
+
+        {maxLength && (
+          <span
+            className={twMerge(
+              "shrink-0 text-xs text-zinc-400",
+              charCount > maxLength * 0.9 ? "text-amber-600" : "",
+              charCount === maxLength ? "text-rose-600" : ""
+            )}
+          >
+            {charCount}/{maxLength}
+          </span>
+        )}
+      </div>
+    </div>
+  );
 };