@imksh/create 1.0.26 → 1.0.28

package/templates/{mern/client → layers/react/javascript}/src/store/useUiStore.js

@@ -1,54 +1,51 @@
 import { create } from "zustand";
-
-export const useUiStore = create((set, get) => ({
+const useUiStore = create((set, get) => ({
   open: false,
+  isModalOpen: false,
   collapsed: false,
   isMobileMenuOpened: false,
   headerTitle: "Dashboard",
   headerActions: null,
+  breadcrumbs: null,
+  layoutClass: "",
+  setLayoutClass: (layoutClass) => set({ layoutClass }),
   setHeaderTitle: (title) => set({ headerTitle: title }),
   setHeaderActions: (actions) => set({ headerActions: actions }),
+  setBreadcrumbs: (breadcrumbs) => set({ breadcrumbs }),
   toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
-
   setMobileMenuOpened: (open) => {
     set({ isMobileMenuOpened: open });
   },
   toggleMobileMenuOpened: () => {
     set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
   },
-
   theme: localStorage.getItem("theme") || "light",
-
   setTheme: (theme) => {
     document.documentElement.setAttribute("data-theme", theme);
-
     localStorage.setItem("theme", theme);
-
     set({ theme });
   },
-
   toggleTheme: () => {
     const nextTheme = get().theme === "light" ? "dark" : "light";
-
     document.documentElement.setAttribute("data-theme", nextTheme);
-
     localStorage.setItem("theme", nextTheme);
-
     set({ theme: nextTheme });
   },
-
   toggleSidebar: () =>
     set((state) => ({
       open: !state.open,
     })),
-
   openSidebar: () =>
     set({
       open: true,
     }),
-
   close: () =>
     set({
       open: false,
     }),
+  setModalOpen: (open) =>
+    set({
+      isModalOpen: open,
+    }),
 }));
+export { useUiStore };

package/templates/{next → layers/react/javascript}/src/utils/getInitials.js

@@ -7,4 +7,4 @@ export const getInitials = (name = "") => {
     .slice(0, 2)
     .map((word) => word[0].toUpperCase())
     .join("");
-};
+};

package/templates/layers/react/typescript/src/components/common/Breadcrumbs.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
+export interface BreadcrumbItem {
+  label: React.ReactNode;
+  path?: string;
+  subtitle?: string;
+  onClick?: () => void;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+}
+
+export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
+  return (
+    <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
+      {items.map((item, idx) => {
+        const isLast = idx === items.length - 1;
+        return (
+          <React.Fragment key={idx}>
+            {item.path && !isLast ? (
+              <Link to={item.path} onClick={item.onClick} className="hover:text-primary transition-colors hidden sm:flex items-center gap-1">
+                {item.label}
+              </Link>
+            ) : item.onClick && !isLast ? (
+              <button type="button" onClick={item.onClick} className="hover:text-primary transition-colors hidden sm:flex items-center gap-1">
+                {item.label}
+              </button>
+            ) : (
+              <div className="flex flex-col">
+                <span className={isLast ? "text-lg md:text-xl font-bold leading-tight text-base-content tracking-tight truncate max-w-[200px] md:max-w-none" : ""}>
+                  {item.label}
+                </span>
+                {item.subtitle && (
+                  <span className="text-xs text-base-content/60 font-normal truncate">
+                    {item.subtitle}
+                  </span>
+                )}
+              </div>
+            )}
+            {!isLast && <ChevronRight size={14} className="text-base-content/30 shrink-0 hidden sm:block" />}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/templates/layers/react/typescript/src/components/common/CircularProgress.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+export const CircularProgress = ({
+  value,
+  label,
+  color = "text-primary",
+  size = "lg",
+}: {
+  value: number;
+  label?: string;
+  color?: string;
+  size?: "md" | "lg" | "xl";
+}) => {
+  const radius = size === "xl" ? 60 : size === "lg" ? 40 : 24;
+  const stroke = size === "xl" ? 10 : size === "lg" ? 6 : 4;
+  const normalizedRadius = radius - stroke * 2;
+  const circumference = normalizedRadius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (value / 100) * circumference;
+
+  const dims = size === "xl" ? 140 : size === "lg" ? 96 : 56;
+  const textClass =
+    size === "xl" ? "text-2xl" : size === "lg" ? "text-md" : "text-[10px]";
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div
+        className="relative flex items-center justify-center"
+        style={{ width: dims, height: dims }}
+      >
+        {/* Background circle */}
+        <svg
+          height={dims}
+          width={dims}
+          className="absolute transform -rotate-90"
+        >
+          <circle
+            stroke="currentColor"
+            fill="transparent"
+            strokeWidth={stroke}
+            r={normalizedRadius}
+            cx={dims / 2}
+            cy={dims / 2}
+            className="text-base-200"
+          />
+          {/* Progress circle */}
+          <circle
+            stroke="currentColor"
+            fill="transparent"
+            strokeWidth={stroke}
+            strokeDasharray={circumference + " " + circumference}
+            style={{ strokeDashoffset }}
+            strokeLinecap="round"
+            r={normalizedRadius}
+            cx={dims / 2}
+            cy={dims / 2}
+            className={`${color} transition-all duration-1000 ease-out`}
+          />
+        </svg>
+        <span className={`font-bold ${textClass}`}>{value}%</span>
+      </div>
+      {label && (
+        <span className="mt-2 text-sm font-medium text-base-content/70">
+          {label}
+        </span>
+      )}
+    </div>
+  );
+};

package/templates/{production-fullstack/client/src/components/ui → layers/react/typescript/src/components/common}/Modal.tsx

@@ -1,16 +1,30 @@
 import { useEffect, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
 
 export interface ModalProps {
   open: boolean;
   onClose: () => void;
-  title: string;
+  title?: string;
   children: ReactNode;
-  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  size?:
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl"
+    | "7xl"
+    | "full";
   closeOnBackdrop?: boolean;
   closeOnEsc?: boolean;
   showCloseButton?: boolean;
+  hideHeader?: boolean;
+  className?: string;
   footer?: ReactNode;
 }
 
@@ -32,12 +46,25 @@ const Modal = ({
   closeOnBackdrop = true,
   closeOnEsc = true,
   showCloseButton = true,
+  hideHeader = false,
+  className = "",
   footer,
 }: ModalProps) => {
+  const setModalOpen = useUiStore((state) => state.setModalOpen);
+
+  useEffect(() => {
+    if (open) {
+      setModalOpen(true);
+      return () => {
+        setModalOpen(false);
+      };
+    }
+  }, [open, setModalOpen]);
+
   useEffect(() => {
     if (!open || !closeOnEsc) return;
 
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         onClose?.();
       }
@@ -45,8 +72,9 @@ const Modal = ({
 
     document.addEventListener("keydown", handleKeyDown);
 
-    return () =>
+    return () => {
       document.removeEventListener("keydown", handleKeyDown);
+    };
   }, [open, closeOnEsc, onClose]);
 
   if (!open) return null;
@@ -63,6 +91,7 @@ const Modal = ({
       <div
         className={`
           relative
+          flex flex-col overflow-hidden max-h-[90vh]
           w-full
           ${sizes[size]}
           rounded-2xl
@@ -70,30 +99,36 @@ const Modal = ({
           shadow-2xl
           border border-base-300
           animate-in zoom-in-95 fade-in duration-200
+          ${className}
         `}
       >
         {/* 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-ghost"
+                onClick={onClose}
+              >
+                <IoClose size={20} />
+              </button>
+            )}
+          </div>
+        )}
 
         {/* Body */}
-        <div className="max-h-[70vh] overflow-y-auto p-6">
+        <div
+          className="flex-1 min-h-0 overflow-y-auto p-6"
+          data-lenis-prevent="true"
+        >
           {children}
         </div>
 
         {/* Footer */}
         {footer && (
-          <div className="border-t border-base-300 px-6 py-4">
+          <div className="border-t border-base-300 px-6 py-4 shrink-0">
             {footer}
           </div>
         )}
@@ -103,4 +138,4 @@ const Modal = ({
   );
 };
 
-export default Modal;
+export default Modal;

package/templates/layers/react/typescript/src/components/common/PageTransition.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface PageTransitionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const pageVariants = {
+  initial: {
+    opacity: 0,
+    y: 8,
+  },
+  in: {
+    opacity: 1,
+    y: 0,
+  },
+  out: {
+    opacity: 0,
+    y: -8,
+  },
+};
+
+const pageTransition = {
+  type: "tween",
+  ease: "anticipate",
+  duration: 0.3,
+};
+
+const PageTransition = ({ children, className = "" }: PageTransitionProps) => {
+  return (
+    <motion.div
+      initial="initial"
+      animate="in"
+      exit="out"
+      variants={pageVariants}
+      transition={pageTransition}
+      className={`h-full w-full ${className}`}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default PageTransition;

package/templates/layers/react/typescript/src/components/common/Pagination.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  if (totalPages <= 1) return null;
+
+  const maxVisiblePages = 5;
+  let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+  const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+  if (endPage - startPage + 1 < maxVisiblePages) {
+    startPage = Math.max(1, endPage - maxVisiblePages + 1);
+  }
+
+  const pages = [];
+  for (let i = startPage; i <= endPage; i++) {
+    pages.push(i);
+  }
+
+  return (
+    <div className="flex items-center justify-center gap-2 mt-10 p-2 rounded-2xl bg-base-100/50 backdrop-blur-sm border border-base-200/50 w-fit mx-auto shadow-sm">
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent"
+        aria-label="Previous Page"
+      >
+        <ChevronLeft className="w-5 h-5" />
+      </button>
+
+      {startPage > 1 && (
+        <>
+          <button
+            onClick={() => onPageChange(1)}
+            className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content"
+          >
+            1
+          </button>
+          {startPage > 2 && <span className="px-1 text-base-content/40">...</span>}
+        </>
+      )}
+
+      {pages.map((page) => (
+        <button
+          key={page}
+          onClick={() => onPageChange(page)}
+          className={`flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 font-semibold ${
+            currentPage === page
+              ? "bg-primary text-primary-content shadow-lg shadow-primary/30 scale-105"
+              : "text-base-content/70 hover:bg-base-content/10 hover:text-base-content"
+          }`}
+        >
+          {page}
+        </button>
+      ))}
+
+      {endPage < totalPages && (
+        <>
+          {endPage < totalPages - 1 && (
+            <span className="px-1 text-base-content/40">...</span>
+          )}
+          <button
+            onClick={() => onPageChange(totalPages)}
+            className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content"
+          >
+            {totalPages}
+          </button>
+        </>
+      )}
+
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent"
+        aria-label="Next Page"
+      >
+        <ChevronRight className="w-5 h-5" />
+      </button>
+    </div>
+  );
+};

package/templates/{mern-ts/client → layers/react/typescript}/src/components/common/Table.tsx

@@ -33,7 +33,7 @@ const Table = <T extends Record<string, any>>({
   }
 
   return (
-    <div className="flex flex-col w-full border border-base-300 rounded-xl overflow-hidden bg-base-100 shadow-sm">
+    <div className="flex flex-col w-full border border-base-300 rounded-xl overflow-hidden bg-base-100 shadow">
       <div className="overflow-x-auto w-full">
         <table className="table table-hover w-full min-w-full">
           <thead className="bg-base-200/60 border-b border-base-300">
@@ -59,7 +59,9 @@ const Table = <T extends Record<string, any>>({
                   }`}
                 >
                   {columns.map((col, colIndex) => {
-                    const value = col.accessor ? row[col.accessor as string] : undefined;
+                    const value = col.accessor
+                      ? row[col.accessor as string]
+                      : undefined;
                     return (
                       <td
                         key={(col.accessor as string) || colIndex}

package/templates/layers/react/typescript/src/components/common/Tabs.tsx

@@ -0,0 +1,145 @@
+import React, { ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
+import { motion } from "framer-motion";
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+}
+
+interface TabsProps {
+  tabs: TabItem[];
+  activeTab: string;
+  onChange: (id: string) => void;
+  variant?: "underline" | "box";
+  className?: string;
+  dropdown?: boolean;
+}
+
+export const Tabs = ({
+  tabs,
+  activeTab,
+  onChange,
+  variant = "underline",
+  className = "",
+  dropdown = false,
+}: TabsProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  // 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 (
+      <div className="relative md:hidden w-full max-w-xs z-[50]" onClick={(e) => e.stopPropagation()}>
+        {/* Trigger Button */}
+        <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 "
+        >
+          <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);
+                }}
+                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"
+                }`}
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (variant === "box") {
+    return (
+      <>
+        {renderDropdown()}
+        <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}`}
+        >
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              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"
+              }`}
+            >
+              {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>
+      </>
+    );
+  }
+
+  // default: underline
+  return (
+    <>
+      {renderDropdown()}
+      <div
+        className={`tabs tabs-bordered ${dropdown ? "hidden md:flex" : "flex"} ${className}`}
+      >
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            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"
+            }`}
+          >
+            {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>
+    </>
+  );
+};