@imksh/create 1.0.30 → 1.0.32

package/templates/layers/react/javascript/src/components/common/Tabs.jsx

@@ -1,134 +1,186 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ChevronDown } from "lucide-react";
 import { motion } from "framer-motion";
-const Tabs = ({
+
+export const Tabs = ({
   tabs,
   activeTab,
   onChange,
-  variant = "underline",
-  className = "",
+  variant = "box",
+  className = "bg-base-200 w-fit",
   dropdown = false,
+  disabled = false,
+  size = "base",
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+
+  const getTabSizeClass = () => {
+    switch (size) {
+      case "xs":
+        return "text-xs px-2.5 h-7 min-h-7";
+      case "sm":
+        return "text-sm px-3 h-8 min-h-8";
+      case "base":
+        return "text-base px-4 h-10 min-h-10";
+      case "lg":
+        return "text-lg px-6 h-12 min-h-12";
+      case "xl":
+        return "text-xl px-6 h-14 min-h-14";
+      case "2xl":
+        return "text-2xl px-8 h-16 min-h-16";
+      default:
+        return "text-base px-4 h-10 min-h-10";
+    }
+  };
+
+  const getBtnSizeClass = () => {
+    switch (size) {
+      case "xs":
+        return "btn-xs text-xs";
+      case "sm":
+        return "btn-sm text-sm";
+      case "base":
+        return "text-base";
+      case "lg":
+        return "btn-lg text-lg";
+      case "xl":
+        return "btn-lg text-xl";
+      case "2xl":
+        return "btn-lg text-2xl";
+      default:
+        return "text-base";
+    }
+  };
+
+  const tabSizeClass = getTabSizeClass();
+  const btnSizeClass = getBtnSizeClass();
+
+  // Close dropdown if user clicks outside
   React.useEffect(() => {
     if (!dropdown || !isOpen) return;
     const closeMenu = () => setIsOpen(false);
     document.addEventListener("click", closeMenu);
     return () => document.removeEventListener("click", closeMenu);
   }, [dropdown, isOpen]);
+
   const renderDropdown = () => {
     if (!dropdown) return null;
     const activeItem = tabs.find((t) => t.id === activeTab);
-    return /* @__PURE__ */ jsxs("div", {
-      className: "relative md:hidden w-full max-w-xs z-[50]",
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        /* @__PURE__ */ jsxs("button", {
-          onClick: () => setIsOpen(!isOpen),
-          className:
-            "btn btn-sm bg-base-200 border-base-300 border flex w-full items-center justify-between px-3 text-base-content ",
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              className: "flex items-center gap-1.5",
-              children: [
-                activeItem?.icon,
-                /* @__PURE__ */ jsx("span", {
-                  className: "font-semibold",
-                  children: activeItem?.label,
-                }),
-              ],
-            }),
-            /* @__PURE__ */ jsx(ChevronDown, {
-              size: 14,
-              className: `opacity-50 transition-transform ${isOpen ? "rotate-180" : ""}`,
-            }),
-          ],
-        }),
-        isOpen &&
-          /* @__PURE__ */ jsx("div", {
-            className:
-              "absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-200 shadow rounded-lg py-1 animate-in fade-in slide-in-from-top-2",
-            children: tabs.map((tab) =>
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    onChange(tab.id);
-                    setIsOpen(false);
-                  },
-                  className: `w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors ${activeTab === tab.id ? "bg-primary/10 text-primary font-semibold" : "hover:bg-base-200 text-base-content/80"}`,
-                  children: [tab.icon, tab.label],
-                },
-                tab.id,
-              ),
-            ),
-          }),
-      ],
-    });
+    return (
+      <div
+        className="relative md:hidden w-full max-w-xs z-[50]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Trigger Button */}
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          disabled={disabled}
+          className={`btn ${btnSizeClass} bg-base-200 border-base-300 border flex w-full items-center justify-between px-3 text-base-content ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+        >
+          <div className="flex items-center gap-1.5">
+            {activeItem?.icon}
+            <span className="font-semibold">{activeItem?.label}</span>
+          </div>
+          <ChevronDown
+            size={14}
+            className={`opacity-50 transition-transform ${isOpen ? "rotate-180" : ""}`}
+          />
+        </button>
+
+        {/* Dropdown Menu */}
+        {isOpen && (
+          <div className="absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-200 shadow rounded-lg py-1 animate-in fade-in slide-in-from-top-2">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => {
+                  onChange(tab.id);
+                  setIsOpen(false);
+                }}
+                type="button"
+                className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${size === "base" ? "text-sm" : `text-${size}`} ${
+                  activeTab === tab.id
+                    ? "bg-primary/10 text-primary font-semibold"
+                    : "hover:bg-base-200 text-base-content/80"
+                }`}
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
   };
+
   if (variant === "box") {
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        renderDropdown(),
-        /* @__PURE__ */ jsx("div", {
-          className: `tabs tabs-boxed bg-base-200 p-1 flex-nowrap overflow-x-auto hide-scrollbar shrink-0 rounded-lg ${dropdown ? "hidden md:flex" : "flex"} ${className}`,
-          children: tabs.map((tab) =>
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => onChange(tab.id),
-                className: `tab whitespace-nowrap flex items-center rounded-lg gap-2 relative z-0 ${activeTab === tab.id ? "text-primary-content" : "text-base-content/70 hover:text-base-content"}`,
-                children: [
-                  activeTab === tab.id &&
-                    /* @__PURE__ */ jsx(motion.div, {
-                      layoutId: "activeTabBox",
-                      className: "absolute inset-0 bg-primary rounded-lg -z-10",
-                      transition: { type: "spring", duration: 0, bounce: 0.2 },
-                    }),
-                  tab.icon,
-                  tab.label,
-                ],
-              },
-              tab.id,
-            ),
-          ),
-        }),
-      ],
-    });
+    return (
+      <>
+        {renderDropdown()}
+        <div
+          className={`tabs tabs-boxed  p-1 flex-nowrap overflow-x-auto hide-scrollbar shrink-0 rounded-lg ${dropdown ? "hidden md:flex" : "flex"} ${className}`}
+        >
+          {tabs.map((tab) => (
+            <button
+              type="button"
+              key={tab.id}
+              onClick={() => onChange(tab.id)}
+              disabled={disabled}
+              className={`tab ${tabSizeClass} whitespace-nowrap flex items-center rounded-lg gap-2 relative z-0 ${
+                activeTab === tab.id
+                  ? "text-primary-content"
+                  : "text-base-content/70 hover:text-base-content "
+              } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+            >
+              {activeTab === tab.id && (
+                <motion.div
+                  layoutId="activeTabBox"
+                  className="absolute inset-0 bg-primary rounded-lg -z-10"
+                  transition={{ type: "spring", duration: 0, bounce: 0.2 }}
+                />
+              )}
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </>
+    );
   }
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      renderDropdown(),
-      /* @__PURE__ */ jsx("div", {
-        className: `tabs tabs-bordered ${dropdown ? "hidden md:flex" : "flex"} ${className}`,
-        children: tabs.map((tab) =>
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => onChange(tab.id),
-              className: `tab whitespace-nowrap relative !border-transparent ${activeTab === tab.id ? "font-semibold text-primary" : "text-base-content/70 hover:text-base-content"}`,
-              children: [
-                activeTab === tab.id &&
-                  /* @__PURE__ */ jsx(motion.div, {
-                    layoutId: "activeTabUnderline",
-                    className:
-                      "absolute bottom-0 left-0 right-0 h-0.5 bg-primary",
-                    transition: { type: "spring", duration: 0.5, bounce: 0.2 },
-                  }),
-                tab.icon &&
-                  /* @__PURE__ */ jsx("span", {
-                    className: "mr-2",
-                    children: tab.icon,
-                  }),
-                tab.label,
-              ],
-            },
-            tab.id,
-          ),
-        ),
-      }),
-    ],
-  });
+
+  // default: underline
+  return (
+    <>
+      {renderDropdown()}
+      <div
+        className={`tabs tabs-bordered ${dropdown ? "hidden md:flex" : "flex"} ${className}`}
+      >
+        {tabs.map((tab) => (
+          <button
+            type="button"
+            key={tab.id}
+            onClick={() => onChange(tab.id)}
+            disabled={disabled}
+            className={`tab ${tabSizeClass} whitespace-nowrap relative !border-transparent ${
+              activeTab === tab.id
+                ? "font-semibold text-primary"
+                : "text-base-content/70 hover:text-base-content"
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+          >
+            {activeTab === tab.id && (
+              <motion.div
+                layoutId="activeTabUnderline"
+                className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+                transition={{ type: "spring", duration: 0.5, bounce: 0.2 }}
+              />
+            )}
+            {tab.icon && <span className="mr-2">{tab.icon}</span>}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+    </>
+  );
 };
-export { Tabs };

package/templates/layers/react/javascript/src/components/common/ToggleSwitch.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { motion } from "motion/react";
 
-const ToggleSwitch = ({ checked, onChange, label }) => {
+const ToggleSwitch = ({ checked, onChange, label, className }) => {
   return (
     <div
-      className="flex items-center gap-3 cursor-pointer select-none w-fit group"
+      className={`flex items-center gap-3 cursor-pointer select-none w-fit group ${className}`}
       onClick={() => onChange(!checked)}
     >
       <span className="text-sm font-bold">{label}</span>
@@ -16,7 +16,7 @@ const ToggleSwitch = ({ checked, onChange, label }) => {
         }`}
       >
         <motion.div
-          className={`w-4 h-4 rounded-full shadow-sm ${
+          className={`w-4 h-4 rounded-full shadow ${
             checked ? "bg-white" : "bg-base-content/40"
           }`}
           layout

package/templates/layers/react/javascript/src/components/layout/SidebarLayout.jsx

@@ -1,20 +1,15 @@
-import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import SidebarHeader from "../ui/SidebarHeader";
-import Sidebar from "../ui/sidebar";
+import Sidebar from "../ui/Sidebar";
 import { useUiStore } from "../../store/useUiStore";
-import appConfig from "../../config/appConfig";
 
 const SidebarLayout = () => {
   const { headerTitle, headerActions, setHeaderTitle, setHeaderActions } =
     useUiStore();
   const { pathname } = useLocation();
 
-  // Reset header title and actions whenever the route shifts
-  useEffect(() => {
-    setHeaderTitle(appConfig.app.name);
-    setHeaderActions(null);
-  }, [pathname, setHeaderTitle, setHeaderActions]);
+  // Layout no longer resets title on every route change.
+  // Individual pages are responsible for setting their own title via useUiStore.
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -23,10 +18,7 @@ const SidebarLayout = () => {
       <div className="flex flex-1 flex-col overflow-hidden">
         <SidebarHeader title={headerTitle} actions={headerActions} />
 
-        <main
-          className="flex-1 h-full overflow-y-auto px-2 py-6 md:p-6 max-w-7xl"
-          data-lenis-prevent
-        >
+        <main className="flex-1 h-full overflow-y-auto " data-lenis-prevent>
           <Outlet />
         </main>
       </div>

package/templates/layers/react/javascript/src/components/modals/Modal.jsx

@@ -1,13 +1,19 @@
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
 
 const sizes = {
   sm: "max-w-sm",
   md: "max-w-md",
   lg: "max-w-lg",
-  xl: "max-w-2xl",
-  "2xl": "max-w-4xl",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
   full: "max-w-7xl",
 };
 
@@ -16,12 +22,27 @@ const Modal = ({
   onClose,
   title,
   children,
-  size = "md",
+  size = "4xl",
   closeOnBackdrop = true,
   closeOnEsc = true,
   showCloseButton = true,
+  hideHeader = false,
+  className = "",
+  bodyClass = "p-2 sm:p-4",
   footer,
+  height,
 }) => {
+  const setModalOpen = useUiStore((state) => state.setModalOpen);
+
+  useEffect(() => {
+    if (open) {
+      setModalOpen(true);
+      return () => {
+        setModalOpen(false);
+      };
+    }
+  }, [open, setModalOpen]);
+
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 
@@ -33,7 +54,9 @@ const Modal = ({
 
     document.addEventListener("keydown", handleKeyDown);
 
-    return () => document.removeEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }, [open, closeOnEsc, onClose]);
 
   if (!open) return null;
@@ -50,35 +73,47 @@ const Modal = ({
       <div
         className={`
           relative
+          flex flex-col overflow-hidden max-h-[90vh]
           w-full
           ${sizes[size]}
           rounded-2xl
           bg-base-100
-          shadow-2xl
+          shadow-md
           border border-base-300
           animate-in zoom-in-95 fade-in duration-200
+          ${className}
         `}
+        style={height ? { height } : undefined}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-base-300 px-6 py-4">
-          <h2 className="text-lg font-bold">{title}</h2>
+        {!hideHeader && (title || showCloseButton) && (
+          <div className="flex items-center justify-between border-b border-base-300 px-6 py-4 shrink-0">
+            {title && <h2 className="text-lg font-bold">{title}</h2>}
 
-          {showCloseButton && (
-            <button
-              className="btn btn-circle btn-sm btn-ghost"
-              onClick={onClose}
-            >
-              <IoClose size={20} />
-            </button>
-          )}
-        </div>
+            {showCloseButton && (
+              <button
+                className="btn btn-circle btn-sm btn-error btn-soft text-error/70 hover:text-error hover:bg-error/20 hover:shadow-sm hover:rotate-180 transition-transform duration-200"
+                onClick={onClose}
+              >
+                <IoClose size={20} className="" />
+              </button>
+            )}
+          </div>
+        )}
 
         {/* Body */}
-        <div className="max-h-[70vh] overflow-y-auto p-6">{children}</div>
+        <div
+          className={`flex-1 min-h-0 overflow-y-auto ${bodyClass}`}
+          data-lenis-prevent="true"
+        >
+          {children}
+        </div>
 
         {/* Footer */}
         {footer && (
-          <div className="border-t border-base-300 px-6 py-4">{footer}</div>
+          <div className="border-t border-base-300 px-6 py-4 shrink-0">
+            {footer}
+          </div>
         )}
       </div>
     </div>,

package/templates/layers/react/javascript/src/components/ui/Input.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { X } from "lucide-react";
+
+export const Input = React.forwardRef(
+  (
+    {
+      icon,
+      wrapperClassName = "",
+      onClear,
+      className = "",
+      value,
+      size,
+      ...props
+    },
+    ref,
+  ) => {
+    const sizeClass = size ? `input-${size}` : "";
+    return (
+      <div className={`relative ${wrapperClassName}`}>
+        {icon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50 pointer-events-none flex items-center justify-center z-10">
+            {icon}
+          </div>
+        )}
+        <input
+          ref={ref}
+          value={value}
+          className={`input input-bordered w-full ${sizeClass} ${icon ? "pl-10" : ""} ${
+            onClear && value ? "pr-10" : ""
+          } ${className}`}
+          {...props}
+        />
+
+        {onClear && value && (
+          <button
+            type="button"
+            onClick={onClear}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content transition-colors flex items-center justify-center"
+            aria-label="Clear input"
+          >
+            <X size={16} />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";