gbs-add-block 1.2.5 → 1.2.7

package/source/components/toast/ToastComponent.tsx

@@ -7,35 +7,28 @@ interface ToastProps {
   toast: Toast;
 }
 
-const bgColors = {
-  default: "bg-white hover:bg-gray-50",
-  success: "bg-green-50 hover:bg-green-100",
-  error: "bg-red-50 hover:bg-red-100",
-  warning: "bg-yellow-50 hover:bg-yellow-100",
-} as const;
-
-const toastAnimation = {
-  default: "",
-  error: "animate-shake animate-once animate-duration-200",
-  success: "animate-jump-in animate-once animate-duration-200",
-  warning: "animate-jump-in animate-once animate-duration-200",
+const leftBorderColors = {
+  default: "border-l-zinc-550 dark:border-l-zinc-600",
+  success: "border-l-emerald-500",
+  error: "border-l-rose-500",
+  warning: "border-l-amber-500",
 } as const;
 
 const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
   <button
     onClick={onDismiss}
-    className="shrink-0 rounded-lg p-1 transition-colors hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-black/10"
+    className="shrink-0 rounded-md p-1 transition-colors text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-900 focus:outline-none"
   >
     <svg
-      className="h-4 w-4"
+      className="h-3.5 w-3.5"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2.5}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
         d="M6 18L18 6M6 6l12 12"
       />
     </svg>
@@ -58,7 +51,7 @@ export function ToastComponent({ toast }: ToastProps) {
 
   if (toast.content) {
     return (
-      <div className="relative">
+      <div className="relative pointer-events-auto rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 shadow-lg">
         {toast.content}
         <div className="absolute top-2 right-2">
           <CloseButton onDismiss={handleDismiss} />
@@ -67,32 +60,40 @@ export function ToastComponent({ toast }: ToastProps) {
     );
   }
 
+  const borderClass = leftBorderColors[toast.type || "default"];
+
   return (
     <div
       className={`
-        ${bgColors[toast.type || "default"]}
-        ${toastAnimation[toast.type || "default"]}
         transform transition-all duration-300 ease-in-out
-        pointer-events-auto relative flex w-full items-center justify-between
-        overflow-hidden rounded-full border px-4 py-3 shadow-lg
+        pointer-events-auto relative flex w-full items-start justify-between
+        overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-4 py-3.5 shadow-lg
+        border-l-4 ${borderClass}
+        animate-fade-in
       `}
       role="alert"
     >
       <div className="flex items-start gap-3 w-full">
-        <ToastIcon type={toast.type} />
-        <div className="flex-1">
+        <div className="mt-0.5 shrink-0">
+          <ToastIcon type={toast.type} />
+        </div>
+        <div className="flex-1 min-w-0">
           {toast.title && (
-            <div className="font-medium text-sm text-gray-900">
+            <div className="font-bold text-sm text-zinc-900 dark:text-white tracking-tight leading-none">
               {toast.title}
             </div>
           )}
           {toast.description && (
-            <div className="text-sm text-gray-500 mt-1">
+            <div className="text-xs font-medium text-zinc-500 dark:text-zinc-400 mt-1">
               {toast.description}
             </div>
           )}
         </div>
-        {toast.action}
+        {toast.action && (
+          <div className="shrink-0 flex items-center gap-2">
+            {toast.action}
+          </div>
+        )}
         <CloseButton onDismiss={handleDismiss} />
       </div>
     </div>

package/source/components/toast/ToastIcon.tsx

@@ -4,20 +4,20 @@ const ToastIcon = ({ type }: { type: Toast["type"] }) => {
   if (!type) return null;
 
   const iconColors = {
-    default: "text-gray-800",
-    success: "text-green-600",
-    error: "text-red-600",
-    warning: "text-yellow-600",
+    default: "text-zinc-500",
+    success: "text-emerald-500",
+    error: "text-rose-500",
+    warning: "text-amber-500",
   } as const;
 
   return (
-    <div className={`h-5 w-5 ${iconColors[type]}`}>
+    <div className={`h-4.5 w-4.5 ${iconColors[type]}`}>
       {type === "success" && (
         <svg
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          strokeWidth="2"
+          strokeWidth="2.5"
         >
           <path
             strokeLinecap="round"
@@ -31,7 +31,7 @@ const ToastIcon = ({ type }: { type: Toast["type"] }) => {
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          strokeWidth="2"
+          strokeWidth="2.5"
         >
           <path
             strokeLinecap="round"
@@ -45,7 +45,7 @@ const ToastIcon = ({ type }: { type: Toast["type"] }) => {
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          strokeWidth="2"
+          strokeWidth="2.5"
         >
           <path
             strokeLinecap="round"

package/source/components/uploader/ProgressAnimation.tsx

@@ -30,7 +30,7 @@ const AestheticProcessingAnimationWithStyles = ({
   progressPercentage,
 }: AestheticProcessingAnimationProps) => (
   <>
-    <style jsx global>{`
+    <style dangerouslySetInnerHTML={{ __html: `
       @keyframes processing {
         0% {
           transform: translateX(-100%);
@@ -42,7 +42,7 @@ const AestheticProcessingAnimationWithStyles = ({
       .animate-processing {
         animation: processing 2s ease-in-out infinite;
       }
-    `}</style>
+    ` }} />
     <AestheticProcessingAnimation progressPercentage={progressPercentage} />
   </>
 );

package/source/components/uploader/UploadedFilePreview.tsx

@@ -105,7 +105,7 @@ export default function UploadedFilePreview({
                 <Icon
                   dimensions={{ width: "18", height: "18" }}
                   elements={cloudDownload}
-                  svgClass={"stroke-blue-800 fill-none dark:stroke-white"}
+                  svgClass={"stroke-zinc-700 dark:stroke-zinc-400 fill-none"}
                 />
               </button>
               {isRemovable && (

package/source/components/uploader/index.tsx

@@ -223,7 +223,7 @@ export const FileUploader = ({
         ref={dropZoneRef}
         className={`flex flex-col items-center border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
           isDragging
-            ? "border-blue-500 bg-blue-50"
+            ? "border-black bg-zinc-50 dark:border-white dark:bg-zinc-900"
             : "border-gray-300 hover:border-gray-400"
         }`}
         onClick={() => fileInputRef.current.click()}

package/source/components/uploader/uploaderIcon.tsx

@@ -27,7 +27,7 @@ export const GetFileIcon = ({ file, showImagePreview, previewUrls }: any) => {
       <Icon
         dimensions={{ width: "26", height: "26" }}
         elements={fileimage}
-        svgClass={"stroke-blue-500 fill-none dark:stroke-white"}
+        svgClass={"stroke-zinc-500 fill-none dark:stroke-white"}
       />
     );
   if (file.type === "application/pdf" || file.type.includes("pdf"))

package/source/globalStyle.ts

@@ -1,35 +1,74 @@
-export const primary = {
-  "error-border": "border border-red-600",
-  "error-primary": "text-xs text-red-500 pl-1",
-};
-
-export const popUp = {
-  "pop-up-style":
-    "w-full absolute overflow-y-auto border border-slate-200 rounded-lg mt-[2px] scrollbar bg-white z-90 scrollbar h-40 dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
-  "pop-up-style-calender":
-    "w-full absolute overflow-y-auto border border-slate-200 rounded-lg mt-[2px] scrollbar bg-white z-90 scrollbar h-[370px] dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
-};
-
-export const iconClass = {
-  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-white",
-  "error-icon": "h-4 w-4 stroke-red-500 fill-none dark:stroke-red-500",
-};
-
-export const inputStyles = {
-  default: "bg-gray-100 p-2 rounded-lg focus:outline-black",
-  error: "border border-red-600",
-  otp: "w-8 h-10 m-1 border border-gray-600 rounded-lg text-center text-black",
-  passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-2",
-  otpContainer: "otp-container",
-};
-
-export const selectStyle = {
-  "select-button":
-    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-md",
-  "filter-button":
-    "flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-xs dark:hover:bg-blue-600",
-  "input-parent":
-    "text-sm flex w-full -mt-1 gap-1 items-center sticky top-0 border-b rounded-lg border-slate-200 z-50 bg-white dark:bg-black",
-  "selectedDisplay-Button":
-    "absolute right-8 top-0 h-full flex items-center px-2 z-20 absolute right-4 top-1/2 transform -translate-y-1/2 z-10",
-};
+import { getComponentPreset } from "./theme";
+
+const preset = getComponentPreset();
+
+export const primary = {
+  "error-border": "border border-rose-500 focus-within:border-rose-500",
+  "error-primary": `${preset.text.error} mt-1 pl-1`,
+};
+
+export const popUp = {
+  "pop-up-style": `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-44 text-sm text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
+  "pop-up-style-calender": `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-[370px] text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
+};
+
+export const iconClass = {
+  "grey-common": "h-4 w-4 stroke-slate-500 fill-none dark:stroke-slate-300",
+  "error-icon": "h-4 w-4 stroke-rose-500 fill-none dark:stroke-rose-400",
+};
+
+export const inputStyles = {
+  default: `${preset.control} ${preset.radius} ${preset.focusRing} px-3 py-2 text-sm shadow-sm`,
+  error: "border-rose-500 focus-visible:ring-rose-500",
+  otp: `${preset.control} ${preset.radius} ${preset.focusRing} m-1 h-10 w-9 text-center text-sm font-semibold`,
+  passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-2",
+  otpContainer: "otp-container flex items-center gap-1",
+};
+
+export const selectStyle = {
+  "select-button": `${preset.control} ${preset.radius} ${preset.focusRing} flex min-h-10 w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm font-medium shadow-sm`,
+  "filter-button":
+    "mt-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-zinc-700 transition-colors hover:bg-zinc-100 hover:text-black dark:text-zinc-300 dark:hover:bg-zinc-900 dark:hover:text-white",
+  "input-parent":
+    "sticky top-0 z-50 flex w-full items-center gap-1 border-b border-zinc-200 bg-white px-1 py-1 text-sm dark:border-zinc-800 dark:bg-zinc-950",
+  "selectedDisplay-Button":
+    "absolute right-8 top-1/2 z-20 flex -translate-y-1/2 items-center rounded-md p-1 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800",
+};
+
+export const buttonStyles = {
+  base: `${preset.radius} ${preset.focusRing} ${preset.disabled} inline-flex items-center justify-center gap-2 font-medium transition-colors`,
+  sizes: {
+    sm: "h-8 px-3 text-xs",
+    md: "h-10 px-4 text-sm",
+    lg: "h-11 px-5 text-base",
+  },
+  variants: {
+    primary:
+      "bg-black text-white hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-100",
+    secondary:
+      "bg-zinc-900 text-white hover:bg-zinc-850 dark:bg-zinc-100 dark:text-black dark:hover:bg-zinc-200",
+    outline:
+      "border border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-50 dark:border-zinc-850 dark:bg-black dark:text-zinc-100 dark:hover:bg-zinc-900",
+    ghost:
+      "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900",
+    danger: "bg-rose-600 text-white hover:bg-rose-700",
+  },
+};
+
+export const cardStyles = {
+  base: `${preset.surface.raised} rounded-lg p-4`,
+  interactive: "transition-shadow hover:shadow-md hover:shadow-zinc-950/10",
+};
+
+export const gridStyles = {
+  container: `${preset.surface.raised} flex flex-col rounded-md overflow-hidden dark:text-white`,
+  toolbar: `flex bg-white dark:bg-black justify-end space-x-2 px-4 py-3 border-b border-zinc-200 dark:border-zinc-900`,
+  pagination: `w-full flex flex-wrap justify-between items-center text-xs px-4 py-3 bg-white dark:bg-black gap-2 md:gap-4 border-t border-zinc-200 dark:border-zinc-900`,
+  tableHeader: `bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 font-bold border-b border-zinc-200 dark:border-zinc-900 px-4 py-3 text-left text-xs uppercase tracking-wider`,
+  button: `border border-zinc-300 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded px-3 py-1.5 text-xs font-semibold cursor-pointer transition`,
+  rowEven:
+    "bg-white dark:bg-black hover:bg-zinc-50/50 dark:hover:bg-zinc-900/60 transition-colors text-black dark:text-white",
+  rowOdd:
+    "bg-zinc-50/20 dark:bg-zinc-950/20 hover:bg-zinc-50/50 dark:hover:bg-zinc-900/60 transition-colors",
+  rowSelected: "bg-zinc-100 dark:bg-zinc-900 font-semibold",
+};

package/source/icon/iconPaths.ts

@@ -198,3 +198,9 @@ export const trash: any = [
     fill: "none",
   },
 ];
+
+export const menuIcon: any = [
+  { type: "path", d: "M4 12h16", key: "m1" },
+  { type: "path", d: "M4 6h16", key: "m2" },
+  { type: "path", d: "M4 18h16", key: "m3" },
+];

package/source/theme.ts

@@ -0,0 +1,40 @@
+export type ComponentPresetId = "gbs-basic";
+
+export type ComponentSize = "sm" | "md" | "lg";
+
+export type ComponentVariant =
+  | "primary"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "danger";
+
+export const defaultPresetId: ComponentPresetId = "gbs-basic";
+
+export const componentPresets = {
+  "gbs-basic": {
+    id: "gbs-basic",
+    radius: "rounded-lg",
+    focusRing:
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2",
+    disabled: "disabled:cursor-not-allowed disabled:opacity-55",
+    text: {
+      label: "text-sm font-medium text-zinc-700 dark:text-zinc-300",
+      helper: "text-xs text-zinc-500",
+      error: "text-xs font-medium text-rose-600",
+    },
+    surface: {
+      raised:
+        "border border-zinc-200 bg-white shadow-sm shadow-zinc-950/5 dark:border-zinc-900 dark:bg-black",
+      subtle:
+        "border border-zinc-200 bg-zinc-50 dark:border-zinc-900 dark:bg-zinc-950",
+      overlay:
+        "border border-zinc-200 bg-white shadow-xl shadow-zinc-950/10 dark:border-zinc-900 dark:bg-zinc-950",
+    },
+    control:
+      "border border-zinc-300 bg-white text-zinc-900 transition-colors placeholder:text-zinc-400 hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+} as const;
+
+export const getComponentPreset = (presetId: ComponentPresetId = defaultPresetId) =>
+  componentPresets[presetId] || componentPresets[defaultPresetId];