gbs-add-block 1.2.4 → 1.2.6

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-slate-300 bg-white text-slate-900 shadow-sm hover:border-slate-400 focus:border-sky-500 focus:ring-sky-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100",
+      label: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200",
+    },
+    minimal: {
+      textarea:
+        "border-0 border-b-2 border-slate-200 bg-transparent px-0 shadow-none focus:border-sky-500 dark:border-slate-700 dark:text-slate-100",
+      label: twMerge(
+        "absolute left-0 pointer-events-none transition-all duration-200",
+        isFloating ? "-top-5 text-xs text-sky-600" : "top-3 text-sm text-slate-400"
+      ),
+    },
+    glass: {
+      textarea:
+        "border border-white/40 bg-white/70 text-slate-900 shadow-sm backdrop-blur hover:border-white/70 focus:border-sky-500 focus:ring-sky-500/20 dark:border-white/10 dark:bg-slate-950/70 dark:text-slate-100",
+      label: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200",
+    },
+  }[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-slate-50 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-slate-500">{helperText}</p>
+          ) : null}
+        </div>
+
+        {maxLength && (
+          <span
+            className={twMerge(
+              "shrink-0 text-xs text-slate-400",
+              charCount > maxLength * 0.9 ? "text-amber-600" : "",
+              charCount === maxLength ? "text-rose-600" : ""
+            )}
+          >
+            {charCount}/{maxLength}
+          </span>
+        )}
+      </div>
+    </div>
+  );
 };

package/source/globalStyle.ts

@@ -1,35 +1,61 @@
-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-slate-700 transition-colors hover:bg-sky-50 hover:text-sky-700 dark:text-slate-100 dark:hover:bg-sky-950",
+  "input-parent":
+    "sticky top-0 z-50 flex w-full items-center gap-1 border-b border-slate-200 bg-white px-1 py-1 text-sm dark:border-slate-700 dark:bg-slate-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-slate-100 dark:hover:bg-slate-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-slate-950 text-white hover:bg-slate-800 dark:bg-white dark:text-slate-950 dark:hover:bg-slate-200",
+    secondary: "bg-sky-600 text-white hover:bg-sky-700",
+    outline: "border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:hover:bg-slate-900",
+    ghost: "text-slate-700 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800",
+    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-slate-900/10",
 };

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-sky-500 focus-visible:ring-offset-2",
+    disabled: "disabled:cursor-not-allowed disabled:opacity-55",
+    text: {
+      label: "text-sm font-medium text-slate-700",
+      helper: "text-xs text-slate-500",
+      error: "text-xs font-medium text-rose-600",
+    },
+    surface: {
+      raised:
+        "border border-slate-200 bg-white shadow-sm shadow-slate-900/5 dark:border-slate-700 dark:bg-slate-950",
+      subtle:
+        "border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900",
+      overlay:
+        "border border-slate-200 bg-white shadow-xl shadow-slate-900/10 dark:border-slate-700 dark:bg-slate-950",
+    },
+    control:
+      "border border-slate-300 bg-white text-slate-900 transition-colors placeholder:text-slate-400 hover:border-slate-400 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100",
+  },
+} as const;
+
+export const getComponentPreset = (presetId: ComponentPresetId = defaultPresetId) =>
+  componentPresets[presetId] || componentPresets[defaultPresetId];