@rajdeep0510/scaffold-cli 1.2.0 → 1.3.0

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "files.watcherExclude": {
+        "**/.git/objects/**": true,
+        "**/.git/subtree-cache/**": true,
+        "**/.hg/store/**": true,
+        "**/.git/**": true,
+        "**/node_modules/**": true,
+        "**/.vscode/**": true
+    }
+}

package/bin/index.js

@@ -27,15 +27,15 @@ program.addHelpText('before', () => {
     );
     
     const importInfo = chalk.blue("How to import components:") + "\n" + 
-                      chalk.green("   import { Button } from '@/components/ui/button'");
+                    chalk.green("   import { Button } from '@/components/ui/button'");
     
     return banner + "\n\n" + description + "\n\n" + importInfo + "\n\n";
 });
 
 program
-  .command('add <component-name>')
-  .description('Add a new component')
-  .action(addComponent)
+    .command('add <component-name>')
+    .description('Add a new component')
+    .action(addComponent)
 
 program
     .command('list')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rajdeep0510/scaffold-cli",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "This is a CLI app for a UI library which is used for creating versatile and modern UI components.",
   "main": "bin/index.js",
   "type": "module",
@@ -39,4 +39,4 @@
     "ora": "^8.2.0",
     "prop-types": "^15.8.1"
   }
-}
+}

package/templates/Card/Card.jsx

@@ -0,0 +1,187 @@
+import React from "react";
+
+const VARIANTS = {
+  elevated: "shadow-xl border-transparent",
+  outlined: "border border-opacity-20 shadow-sm",
+  flat: "shadow-none border-transparent",
+  glass: "backdrop-blur-xl bg-opacity-70 border border-white/10 shadow-lg",
+  gradient: "border-none shadow-2xl bg-gradient-to-br",
+};
+
+const THEMES = {
+  light: {
+    base: "bg-white text-slate-800",
+    glass: "bg-white/70 text-slate-900 border-slate-200/50",
+    border: "border-slate-200",
+    subtext: "text-slate-500",
+    divider: "border-slate-100",
+  },
+  dark: {
+    base: "bg-slate-900 text-slate-100",
+    glass: "bg-slate-900/60 text-white border-white/10",
+    border: "border-slate-800",
+    subtext: "text-slate-400",
+    divider: "border-slate-800",
+  },
+};
+
+const PADDINGS = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-10",
+};
+
+const ROUNDED = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full",
+};
+
+const HOVER_EFFECTS = {
+  none: "",
+  lift: "hover:-translate-y-1 hover:shadow-2xl",
+  scale: "hover:scale-[1.02]",
+  glow: "hover:shadow-indigo-500/20 hover:border-indigo-500/30",
+  shimmer: "hover:bg-opacity-90",
+};
+
+/**
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children]
+ * @param {string} [props.title]
+ * @param {string} [props.subtitle]
+ * @param {string} [props.image]
+ * @param {boolean} [props.imageFull]
+ * @param {React.ReactNode} [props.footer]
+ * @param {React.ReactNode} [props.action]
+ * @param {string} [props.badge]
+ * @param {string} [props.theme]
+ * @param {string} [props.variant]
+ * @param {string} [props.padding]
+ * @param {string} [props.rounded]
+ * @param {string} [props.hoverEffect]
+ * @param {string} [props.className]
+ * @param {string} [props.width]
+ * @param {function} [props.onClick]
+ */
+export default function Card({
+  children = undefined,
+  title = undefined,
+  subtitle = undefined,
+  image = undefined,
+  imageFull = false, // If true, image covers the background or top area completely without padding
+  footer = undefined,
+  action = undefined,
+  badge = undefined,
+  theme = "dark",
+  variant = "elevated",
+  padding = "md",
+  rounded = "2xl",
+  hoverEffect = "lift",
+  className = "",
+  width = "w-full max-w-sm", // Default width constraint
+  onClick = undefined,
+  ...props
+}) {
+  const isGlass = variant === "glass";
+  const currentTheme = THEMES[theme] || THEMES.dark;
+  const baseStyle = isGlass ? currentTheme.glass : currentTheme.base;
+  const borderColor = currentTheme.border;
+
+  return (
+    <div
+      onClick={onClick}
+      className={`
+        relative flex flex-col overflow-hidden transition-all duration-300 ease-out group
+        ${width}
+        ${ROUNDED[rounded] || ROUNDED["2xl"]}
+        ${VARIANTS[variant] || VARIANTS.elevated}
+        ${baseStyle}
+        ${!isGlass && variant === "outlined" ? borderColor : ""}
+        ${HOVER_EFFECTS[hoverEffect] || ""}
+        ${onClick ? "cursor-pointer" : ""}
+        ${className}
+      `}
+      {...props}
+    >
+      {/* Background Image (Optional absolute overlay) */}
+      {image && imageFull && (
+        <div className="absolute inset-0 z-0">
+          <img
+            src={image}
+            alt={title || "Card background"}
+            className="h-full w-full object-cover opacity-20 group-hover:scale-105 transition-transform duration-700"
+          />
+          <div
+            className={`absolute inset-0 bg-gradient-to-t ${
+              theme === "dark" ? "from-slate-900" : "from-white"
+            } via-transparent to-transparent`}
+          />
+        </div>
+      )}
+
+      {/* Header Image (Standard top image) */}
+      {image && !imageFull && (
+        <div className="relative h-48 w-full overflow-hidden z-10">
+          <img
+            src={image}
+            alt={title}
+            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+          />
+          {badge && (
+            <div className="absolute top-4 left-4">
+              <span className="px-3 py-1 text-xs font-bold uppercase tracking-wider text-white bg-black/50 backdrop-blur-md rounded-full">
+                {badge}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Content Container */}
+      <div className={`relative z-10 flex flex-col h-full ${PADDINGS[padding]}`}>
+        {/* Header Section */}
+        {(title || subtitle || action) && (
+          <div className="flex justify-between items-start mb-4">
+            <div className="flex-1">
+              {title && (
+                <h3 className="text-xl font-bold tracking-tight mb-1">
+                  {title}
+                </h3>
+              )}
+              {subtitle && (
+                <p className={`text-sm font-medium ${currentTheme.subtext}`}>
+                  {subtitle}
+                </p>
+              )}
+            </div>
+            {action && <div className="ml-4">{action}</div>}
+          </div>
+        )}
+
+        {/* Main Body */}
+        <div className={`flex-1 ${currentTheme.subtext} leading-relaxed`}>
+          {children}
+        </div>
+
+        {/* Footer Section */}
+        {footer && (
+          <div
+            className={`mt-6 pt-4 border-t ${currentTheme.divider} flex items-center justify-between`}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+Card.displayName = "Card";

package/templates/Card/index.js

@@ -0,0 +1,2 @@
+export { default as Card } from "./Card";
+export { default } from "./Card";

package/templates/Card/meta.json

@@ -0,0 +1,100 @@
+{
+    "name": "Card",
+    "description": "A versatile card component with support for multiple themes, variants, and interactive states.",
+    "props": {
+        "title": {
+            "type": "string",
+            "description": "The main heading of the card."
+        },
+        "subtitle": {
+            "type": "string",
+            "description": "Secondary text usually placed below the title."
+        },
+        "image": {
+            "type": "string",
+            "description": "URL of the image to display."
+        },
+        "imageFull": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the image is used as a background with an overlay."
+        },
+        "badge": {
+            "type": "string",
+            "description": "Top-left badge text overlaying the image."
+        },
+        "action": {
+            "type": "node",
+            "description": "Element to display in the top-right corner (e.g., button, icon)."
+        },
+        "footer": {
+            "type": "node",
+            "description": "Content to display at the bottom of the card with a divider."
+        },
+        "theme": {
+            "type": "enum",
+            "options": [
+                "light",
+                "dark"
+            ],
+            "default": "dark",
+            "description": "Color scheme of the card."
+        },
+        "variant": {
+            "type": "enum",
+            "options": [
+                "elevated",
+                "outlined",
+                "flat",
+                "glass",
+                "gradient"
+            ],
+            "default": "elevated",
+            "description": "Visual style of the card container."
+        },
+        "padding": {
+            "type": "enum",
+            "options": [
+                "none",
+                "sm",
+                "md",
+                "lg",
+                "xl"
+            ],
+            "default": "md",
+            "description": "Internal padding of the content area."
+        },
+        "rounded": {
+            "type": "enum",
+            "options": [
+                "none",
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "2xl",
+                "3xl",
+                "full"
+            ],
+            "default": "2xl",
+            "description": "Border radius of the card."
+        },
+        "hoverEffect": {
+            "type": "enum",
+            "options": [
+                "none",
+                "lift",
+                "scale",
+                "glow",
+                "shimmer"
+            ],
+            "default": "lift",
+            "description": "Animation effect on hover."
+        },
+        "width": {
+            "type": "string",
+            "default": "w-full max-w-sm",
+            "description": "Width classes to control the card's dimensions."
+        }
+    }
+}

package/templates/Navbar/Navbar.jsx

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from "react";
+
+/**
+ * @typedef {Object} LinkItem
+ * @property {string} label - The text to display.
+ * @property {string} href - The URL link.
+ */
+
+/**
+ * @param {Object} props
+ * @param {React.ReactNode | string} [props.logo] - Brand logo or text.
+ * @param {LinkItem[]} [props.links] - Array of navigation links.
+ * @param {actionItem[]} [props.actions] - Right-side actions (e.g. Login buttons).
+ * @param {string} [props.theme] - "light" or "dark".
+ * @param {boolean} [props.sticky] - Whether the navbar is sticky.
+ * @param {string} [props.className] - Additional classes.
+ * @param {function} [props.onLinkClick] - Callback when a link is clicked.
+ */
+export default function Navbar({
+  logo = "Brand",
+  links = [
+    { label: "Home", href: "#" },
+    { label: "Features", href: "#" },
+    { label: "Pricing", href: "#" },
+    { label: "About", href: "#" },
+  ],
+    actions = [
+      { label: "Login", href: "#" },
+      { label: "Sign Up", href: "#" },
+  ],
+  theme = "light",
+  sticky = true,
+  className = "",
+  onLinkClick = undefined,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  // Handle scroll for glass effect or shadow
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const isDark = theme === "dark";
+
+  // Theme Styles
+  const baseStyles = isDark ? "bg-slate-900 text-white" : "bg-white text-slate-900";
+  const scrolledStyles = isDark
+    ? "bg-slate-900/80 backdrop-blur-md border-b border-white/5"
+    : "bg-white/80 backdrop-blur-md border-b border-slate-200/50";
+  
+  const navClasses = `
+    ${sticky ? "fixed top-0 left-0 right-0 z-50" : "relative"}
+    ${scrolled ? scrolledStyles : baseStyles}
+    ${scrolled ? "shadow-sm" : ""}
+    transition-all duration-300 ease-in-out
+    ${className}
+  `;
+
+  // Link Styles
+  const linkBase = "text-sm font-medium transition-colors duration-200 cursor-pointer";
+  const linkColor = isDark
+    ? "text-slate-300 hover:text-white"
+    : "text-slate-600 hover:text-slate-900";
+    
+  // Mobile Menu Styles
+  const mobileMenuClasses = `
+    absolute top-full left-0 right-0 p-4 border-b
+    ${isDark ? "bg-slate-900 border-white/5" : "bg-white border-slate-100"}
+    ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"}
+    transition-all duration-300 ease-out origin-top shadow-xl
+  `;
+
+  return (
+    <nav className={navClasses} {...props}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          
+          {/* Logo Section */}
+          <div className="flex-shrink-0 flex items-center gap-2">
+            <span className={`text-xl font-bold tracking-tight ${isDark ? "text-white" : "text-slate-900"}`}>
+              {logo}
+            </span>
+          </div>
+
+          {/* Desktop Links */}
+          <div className="hidden md:flex items-center space-x-8">
+            {links && links.map((link, index) => (
+              <a
+                key={index}
+                href={link.href}
+                onClick={(e) => {
+                   if (onLinkClick) onLinkClick(e, link);
+                }}
+                className={`${linkBase} ${linkColor}`}
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+
+          {/* Actions (Desktop) */}
+          <div className="hidden md:flex items-center gap-4">
+             {Array.isArray(actions) ? (
+              actions.map((action, index) => (
+                <a
+                  key={index}
+                  href={action.href}
+                  className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
+                    index === actions.length - 1
+                      ? isDark
+                        ? "bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg shadow-indigo-500/20"
+                        : "bg-slate-900 text-white hover:bg-slate-800 shadow-lg"
+                      : isDark
+                      ? "text-slate-300 hover:text-white"
+                      : "text-slate-600 hover:text-slate-900"
+                  }`}
+                >
+                  {action.label}
+                </a>
+              ))
+            ) : (
+              actions
+            )}
+          </div>
+
+          {/* Mobile Toggle Button */}
+          <div className="flex md:hidden">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className={`p-2 rounded-md ${
+                  isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-600 hover:bg-slate-100"
+              } focus:outline-none`}
+            >
+              <span className="sr-only">Open main menu</span>
+              {/* Hamburger / Close Icon */}
+              <svg
+                className="h-6 w-6"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                {isOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <div className={mobileMenuClasses}>
+        <div className="flex flex-col space-y-4">
+          {links && links.map((link, index) => (
+             <a
+               key={index}
+               href={link.href}
+                onClick={(e) => {
+                   setIsOpen(false);
+                   if (onLinkClick) onLinkClick(e, link);
+                }}
+               className={`block px-3 py-2 rounded-md text-base font-medium ${
+                   isDark 
+                   ? "text-slate-300 hover:text-white hover:bg-slate-800" 
+                   : "text-slate-600 hover:text-slate-900 hover:bg-slate-50"
+               }`}
+             >
+               {link.label}
+             </a>
+          ))}
+          <div className="pt-4 border-t border-gray-200/10 flex flex-col gap-3">
+             {Array.isArray(actions) ? (
+            actions.map((action, index) => (
+              <a
+                key={index}
+                href={action.href}
+                className={`w-full px-4 py-2 text-sm font-medium rounded-lg text-center transition-all ${
+                  index === actions.length - 1
+                    ? isDark
+                      ? "bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg"
+                      : "bg-slate-900 text-white hover:bg-slate-800 shadow-lg"
+                    : isDark
+                    ? "text-slate-300 hover:text-white border border-slate-700 hover:bg-slate-800"
+                    : "text-slate-600 hover:text-slate-900 border border-slate-200 hover:bg-slate-50"
+                }`}
+              >
+                {action.label}
+              </a>
+            ))
+          ) : (
+            actions
+          )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/templates/Navbar/index.js

@@ -0,0 +1,2 @@
+export { default as Navbar } from "./Navbar";
+export { default } from "./Navbar";

package/templates/Navbar/meta.json

@@ -0,0 +1,43 @@
+{
+    "name": "Navbar",
+    "description": "A responsive navigation bar with logo, links, and action buttons. Supports desktop and mobile layouts with a hamburger menu.",
+    "props": {
+        "logo": {
+            "type": "node",
+            "default": "Brand",
+            "description": "The logo or brand name displayed on the left."
+        },
+        "links": {
+            "type": "array",
+            "default": "Home, Features, Pricing, About",
+            "description": "List of navigation items: { label, href }."
+        },
+        "actions": {
+            "type": "node",
+            "description": "Custom action buttons (e.g., Login/Signup) for the right side."
+        },
+        "theme": {
+            "type": "enum",
+            "options": [
+                "light",
+                "dark"
+            ],
+            "default": "light",
+            "description": "Visual theme of the navbar."
+        },
+        "sticky": {
+            "type": "boolean",
+            "default": true,
+            "description": "If true, the navbar remains fixed at the top of the viewport."
+        },
+        "className": {
+            "type": "string",
+            "default": "",
+            "description": "Additional custom classes."
+        },
+        "onLinkClick": {
+            "type": "function",
+            "description": "Callback function triggered when a navigation link is clicked."
+        }
+    }
+}

package/templates/RadioGroup/RadioGroup.jsx

@@ -0,0 +1,148 @@
+import React, { forwardRef } from "react";
+
+const SIZES = {
+  sm: { circle: "h-4 w-4", dot: "h-1.5 w-1.5", text: "text-xs" },
+  md: { circle: "h-5 w-5", dot: "h-2 w-2", text: "text-sm" },
+  lg: { circle: "h-6 w-6", dot: "h-2.5 w-2.5", text: "text-base" },
+};
+
+const THEMES = {
+  light: {
+    labelRaw: "text-slate-500 group-hover:text-slate-800",
+    labelChecked: "text-slate-900",
+    borderRaw: "border-slate-300",
+    borderHover: "group-hover:border-slate-400",
+    dot: "bg-current",
+  },
+  dark: {
+    labelRaw: "text-slate-400 group-hover:text-slate-200",
+    labelChecked: "text-white",
+    borderRaw: "border-slate-700",
+    borderHover: "group-hover:border-slate-500",
+    dot: "bg-white",
+  },
+};
+
+export const RadioButton = forwardRef(
+  (
+    {
+      label,
+      value,
+      selectedValue,
+      onChange,
+      name,
+      disabled,
+      size = "md",
+      theme = "dark",
+      activeColor = "text-blue-500",
+      ...props
+    },
+    ref,
+  ) => {
+    const isSelected = value === selectedValue;
+    const currentSize = SIZES[size] || SIZES.md;
+    const currentTheme = THEMES[theme] || THEMES.dark;
+
+    return (
+      <label
+        className={`group flex items-center gap-3 select-none transition-all ${
+          disabled ? "opacity-30 cursor-not-allowed" : "cursor-pointer"
+        }`}
+      >
+        <div className="relative flex items-center justify-center">
+          <input
+            {...props}
+            ref={ref}
+            type="radio"
+            name={name}
+            checked={isSelected}
+            disabled={disabled}
+            onChange={() => onChange(value)}
+            className="peer sr-only"
+          />
+
+          {/* Outer Circle */}
+          <div
+            className={`
+              rounded-full border-2 transition-all duration-200 bg-transparent
+              ${currentSize.circle}
+              ${currentTheme.borderRaw}
+              ${!disabled && currentTheme.borderHover}
+              peer-checked:border-current ${activeColor}
+            `}
+          />
+
+          {/* Inner Dot */}
+          <div
+            className={`
+              absolute rounded-full transition-transform duration-200
+              ${currentSize.dot}
+              ${currentTheme.dot}
+              ${activeColor}
+              ${isSelected ? "scale-100 opacity-100" : "scale-0 opacity-0"}
+            `}
+          />
+        </div>
+
+        {label && (
+          <span
+            className={`
+              font-medium transition-colors
+              ${currentSize.text}
+              ${isSelected ? currentTheme.labelChecked : currentTheme.labelRaw}
+            `}
+          >
+            {label}
+          </span>
+        )}
+      </label>
+    );
+  },
+);
+
+RadioButton.displayName = "RadioButton";
+
+export default function RadioGroup({
+  options,
+  value,
+  onChange,
+  name,
+  label,
+  orientation = "vertical",
+  size = "md",
+  theme = "dark",
+  activeColor = "text-blue-500",
+  className = "",
+}) {
+  return (
+    <fieldset className={`flex flex-col gap-4 ${className}`}>
+      {label && (
+        <legend className="text-[10px] font-bold tracking-[0.2em] text-slate-500 uppercase">
+          {label}
+        </legend>
+      )}
+      <div
+        className={`flex ${
+          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6"
+        }`}
+      >
+        {options.map((opt) => (
+          <RadioButton
+            key={opt.value}
+            name={name}
+            label={opt.label}
+            value={opt.value}
+            selectedValue={value}
+            onChange={onChange}
+            disabled={opt.disabled}
+            size={size}
+            theme={theme}
+            activeColor={activeColor}
+          />
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+RadioGroup.displayName = "RadioGroup";

package/templates/RadioGroup/index.js

@@ -0,0 +1,4 @@
+import RadioGroup from "./RadioGroup";
+export { RadioButton } from "./RadioGroup";
+
+export default RadioGroup;

package/templates/RadioGroup/meta.json

@@ -0,0 +1,10 @@
+{
+  "name": "RadioGroup",
+  "description": "Minimalist dark-mode radio group with full prop-based customizability.",
+  "props": {
+    "activeColor": "Tailwind text color class (default: text-blue-500)",
+    "size": ["sm", "md", "lg"],
+    "orientation": ["vertical", "horizontal"],
+    "options": "Array<{label, value, disabled}>"
+  }
+}