@rajdeep0510/scaffold-cli 1.0.1 → 1.2.0

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,28 @@
+name: Publish npm Package
+
+on:
+  push:
+    branches:
+      - main # Trigger when pushing to main branch
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          registry-url: "https://registry.npmjs.org/"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/README.md

@@ -1,5 +1,7 @@
 # scaffold
 
+![NPM Version](https://img.shields.io/npm/v/%40rajdeep0510%2Fscaffold-cli)
+
 A CLI tool for creating versatile and modern UI components.
 
 ## Import components

package/commands/addComponent.js

@@ -4,73 +4,99 @@ import { fileURLToPath } from 'url'
 import chalk from 'chalk'
 import figlet from 'figlet'
 import ora from 'ora'
+import { execSync } from 'child_process'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url)) // ESM-safe __dirname
 
 
 // banner TODO: remove
 console.log(
-    chalk.cyan(
-        figlet.text('scaffold', { font: 'doom' }, function(err, data) {
-            if (err) {
-                console.log('Something went wrong...');
-                console.dir(err);
-                return;
-            }
-            console.log(data);
-        })
-
-    )
+  chalk.cyan(
+    figlet.text('scaffold', { font: 'doom' }, function (err, data) {
+      if (err) {
+        console.log('Something went wrong...');
+        console.dir(err);
+        return;
+      }
+      console.log(data);
+    })
+
+  )
 )
 
 export async function addComponent(name) {
-    const useSrc = await fs.pathExists('src')
-    const hasApp = await fs.pathExists(path.join(useSrc ? 'src' : '', 'app'))
-    const hasPages = await fs.pathExists(path.join(useSrc ? 'src' : '', 'pages'))
+  const useSrc = await fs.pathExists('src')
+  const hasApp = await fs.pathExists(path.join(useSrc ? 'src' : '', 'app'))
+  const hasPages = await fs.pathExists(path.join(useSrc ? 'src' : '', 'pages'))
 
-    if (!hasApp && !hasPages) {
-        console.log(chalk.red('Could not detect Next.js routing structure (no app/ or pages/ directory)'))
-        return
-    }
+  if (!hasApp && !hasPages) {
+    console.log(chalk.red('Could not detect Next.js routing structure (no app/ or pages/ directory)'))
+    return
+  }
 
-    const baseDir = useSrc ? 'src/components/ui' : 'components/ui'
-    const targetDir = path.join(baseDir, name)
-    const templateDir = path.resolve(__dirname, '../templates', name)
+  const baseDir = useSrc ? 'src/components/ui' : 'components/ui'
+  const targetDir = path.join(baseDir, name)
+  const templateDir = path.resolve(__dirname, '../templates', name)
 
-    // 🔎 check if template folder exists
-    if (!(await fs.pathExists(templateDir))) {
-        console.log(chalk.red(`Template folder '${templateDir}' not found.`))
-        return
-    }
+  // 🔎 check if template folder exists
+  if (!(await fs.pathExists(templateDir))) {
+    console.log(chalk.red(`Template folder '${templateDir}' not found.`))
+    return
+  }
 
-    // 🔎 validate meta.json before copying
-    const metaPath = path.join(templateDir, 'meta.json')
-    if (!(await fs.pathExists(metaPath))) {
-        console.log(chalk.red(`No meta.json found in template '${name}'`))
-        return
-    }
+  // 🔎 validate meta.json before copying
+  const metaPath = path.join(templateDir, 'meta.json')
+  if (!(await fs.pathExists(metaPath))) {
+    console.log(chalk.red(`No meta.json found in template '${name}'`))
+    return
+  }
 
-    const meta = await fs.readJson(metaPath)
-    if (!meta.name || !meta.description || !meta.version) {
-        console.log(chalk.red(`Invalid meta.json for '${name}'. Missing required fields.`))
-        return
-    }
+  const meta = await fs.readJson(metaPath)
+  if (!meta.name || !meta.description || !meta.version) {
+    console.log(chalk.red(`Invalid meta.json for '${name}'. Missing required fields.`))
+    return
+  }
 
-    // 🌀 Spinner while copying
-    const spinner = ora(`Adding component '${name}'...`).start()
+  // 🌀 Spinner while copying
+  const spinner = ora(`Adding component '${name}'...`).start()
 
-    try {
-        await fs.ensureDir(targetDir)
-        await fs.copy(templateDir, targetDir)
+  try {
+    await fs.ensureDir(targetDir)
+    await fs.copy(templateDir, targetDir)
 
-        spinner.succeed(chalk.green(`Component '${meta.name}' created at ${targetDir}`))
-
-        console.log(chalk.yellow(`ℹ️  Description:`), chalk.white(meta.description))
-        console.log(chalk.magenta(`📦 Version:`), chalk.white(meta.version))
-        console.log(chalk.cyan(`\n👉 Import in Next.js:`))
-        console.log(chalk.blueBright(`   import { ${meta.name} } from "@/components/ui/${name}"\n`))
-    } catch (err) {
-        spinner.fail(chalk.red(`Failed to add component '${name}'`))
+    // Install dependencies if specified in meta.json
+    if (meta.dependencies && (meta.dependencies.npm?.length > 0 || meta.dependencies.peer?.length > 0)) {
+      spinner.text = `Installing dependencies for '${name}'...`
+      
+      try {
+        if (meta.dependencies.npm?.length > 0) {
+          const npmDeps = meta.dependencies.npm.join(' ')
+          execSync(`npm install ${npmDeps}`, { stdio: 'inherit' })
+          console.log(chalk.green(`✅ Installed npm dependencies: ${npmDeps}`))
+        }
+        
+        if (meta.dependencies.peer?.length > 0) {
+          const peerDeps = meta.dependencies.peer.join(' ')
+          execSync(`npm install --save-peer ${peerDeps}`, { stdio: 'inherit' })
+          console.log(chalk.green(`✅ Installed peer dependencies: ${peerDeps}`))
+        }
+      } catch (err) {
+        console.log(chalk.yellow(`⚠️  Warning: Failed to install some dependencies. You may need to install them manually.`))
         console.error(err)
+      }
     }
+
+    spinner.succeed(chalk.green(`Component '${meta.name}' created at ${targetDir}`))
+
+    console.log(chalk.yellow(`ℹ️  Description:`), chalk.white(meta.description))
+    console.log(chalk.magenta(`📦 Version:`), chalk.white(meta.version))
+    console.log(chalk.magenta(`Author :`), chalk.white(meta.author))
+    console.log(chalk.cyan(`\n👉 Import in Next.js:`))
+    console.log(chalk.blueBright(`   import { ${meta.name} } from "@/components/ui/${name}"\n`))
+  } catch (err) {
+    spinner.fail(chalk.red(`Failed to add component '${name}'`))
+    console.error(err)
+  }
 }
+
+// change made TODO:remove

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rajdeep0510/scaffold-cli",
-  "version": "1.0.1",
+  "version": "1.2.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",

package/templates/Avatar/component.jsx

@@ -0,0 +1,62 @@
+// component.jsx
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+export default function Avatar({
+  src,
+  alt,
+  name,
+  info,
+  size = "md",
+  cardPosition = "bottom",
+}) {
+  const [showCard, setShowCard] = useState(false);
+
+  // Avatar size styles
+  const sizeClasses = {
+    sm: "w-8 h-8",
+    md: "w-12 h-12",
+    lg: "w-16 h-16",
+  };
+
+  // Hover card position
+  const positionClasses =
+    cardPosition === "top" ? "bottom-full mb-2" : "top-full mt-2";
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={() => setShowCard(true)}
+      onMouseLeave={() => setShowCard(false)}
+    >
+      {/* Avatar Image */}
+      <img
+        src={src}
+        alt={alt || "Avatar"}
+        className={`${sizeClasses[size]} rounded-full object-cover border shadow-sm cursor-pointer`}
+      />
+
+      {/* Hover Card */}
+      {showCard && (
+        <div
+          className={`absolute left-1/2 -translate-x-1/2 ${positionClasses} 
+                      bg-white shadow-lg rounded-2xl p-3 w-48 
+                      border text-sm z-10`}
+        >
+          <p className="font-extrabold">{name}</p>
+          <p className="text-gray-600">{info}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// PropTypes validation
+Avatar.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  info: PropTypes.string,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  cardPosition: PropTypes.oneOf(["top", "bottom"]),
+};

package/templates/Avatar/index.js

@@ -0,0 +1,5 @@
+/**
+ * Avatar component barrel export
+ */
+export { default } from "./component";
+export { default as Avatar } from "./component";

package/templates/Avatar/meta.json

@@ -0,0 +1,92 @@
+{
+  "name": "Avatar",
+  "description": "An avatar component that displays a profile picture and shows a hover card with name and info.",
+  "category": "display",
+  "tags": [
+    "avatar",
+    "profile",
+    "hover",
+    "info",
+    "card",
+    "ui",
+    "tailwind"
+  ],
+  "version": "1.0.0",
+  "author": "@rajdeep",
+  "created": "2025-08-29",
+  "dependencies": {
+    "npm": [],
+    "peer": [
+      "react",
+      "prop-types"
+    ]
+  },
+  "props": [
+    {
+      "name": "src",
+      "type": "string",
+      "required": true,
+      "default": "undefined",
+      "description": "Image URL or path from public folder for the avatar"
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "required": false,
+      "default": "Avatar",
+      "description": "Alternative text for accessibility"
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "default": "undefined",
+      "description": "Name displayed in hover card"
+    },
+    {
+      "name": "info",
+      "type": "string",
+      "required": false,
+      "default": "undefined",
+      "description": "Additional info displayed in hover card"
+    },
+    {
+      "name": "size",
+      "type": "string",
+      "required": false,
+      "default": "md",
+      "description": "Avatar size",
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    {
+      "name": "cardPosition",
+      "type": "string",
+      "required": false,
+      "default": "bottom",
+      "description": "Position of hover card",
+      "options": [
+        "top",
+        "bottom"
+      ]
+    }
+  ],
+  "files": [
+    "component.jsx",
+    "index.js",
+    "meta.json"
+  ],
+  "customization": {
+    "styling_notes": "Avatar size is controlled via the 'size' prop. Hover card colors, shadow, and border radius can be customized via Tailwind classes in the component."
+  },
+  "accessibility": {
+    "features": [
+      "Hover card provides additional info",
+      "Alt text for image for screen readers",
+      "Keyboard focus not required but can be extended"
+    ]
+  }
+}

package/templates/Input/components.jsx

@@ -0,0 +1,33 @@
+// component.jsx
+import PropTypes from "prop-types";
+
+export default function Input({
+  type = "text",
+  placeholder = "",
+  value,
+  onChange,
+  className = "",
+}) {
+  return (
+    <input
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      className={`px-3 py-2 rounded-md border outline-none 
+                  transition-all duration-200 
+                  border-gray-300 focus:border-gray-500 
+                  focus:ring-2 focus:ring-gray-300 focus:ring
+                  ${className}`}
+    />
+  );
+}
+
+// PropTypes validation
+Input.propTypes = {
+  type: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+};

package/templates/Input/index.js

@@ -0,0 +1,5 @@
+/**
+ * Input component barrel export
+ */
+export { default } from "./component";
+export { default as Input } from "./component";

package/templates/Input/meta.json

@@ -0,0 +1,82 @@
+{
+  "name": "Input",
+  "description": "A customizable input field component with glow effect on focus.",
+  "category": "form",
+  "tags": [
+    "input",
+    "form",
+    "field",
+    "text",
+    "tailwind",
+    "ui"
+  ],
+  "version": "1.0.0",
+  "author": "@rajdeep",
+  "created": "2025-08-30",
+  "dependencies": {
+    "npm": [],
+    "peer": [
+      "react",
+      "prop-types"
+    ]
+  },
+  "props": [
+    {
+      "name": "type",
+      "type": "string",
+      "required": false,
+      "default": "text",
+      "description": "The type of the input field",
+      "options": [
+        "text",
+        "email",
+        "password",
+        "number",
+        "url"
+      ]
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "required": false,
+      "default": "''",
+      "description": "Placeholder text shown when input is empty"
+    },
+    {
+      "name": "value",
+      "type": "string | number",
+      "required": false,
+      "default": "undefined",
+      "description": "The value of the input"
+    },
+    {
+      "name": "onChange",
+      "type": "function",
+      "required": false,
+      "default": "undefined",
+      "description": "Callback function triggered when input value changes"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "default": "''",
+      "description": "Custom Tailwind or CSS classes to style the input"
+    }
+  ],
+  "files": [
+    "component.jsx",
+    "index.js",
+    "meta.json"
+  ],
+  "customization": {
+    "styling_notes": "Input uses Tailwind classes for border, padding, and glow effect. Customize glow using focus:ring utilities."
+  },
+  "accessibility": {
+    "features": [
+      "Semantic <input> element",
+      "Supports keyboard navigation",
+      "Screen reader friendly with placeholder"
+    ]
+  }
+}

package/templates/button/component.jsx

@@ -1,92 +1,85 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
 
-/**
- * A customizable button component with multiple variants and sizes + click animation
- */
 const Button = ({
-                    children,
-                    variant = 'primary',
-                    size = 'md',
-                    disabled = false,
-                    loading = false,
-                    className = '',
-                    onClick,
-                    type = 'button',
-                    ...rest
-                }) => {
-    const [isActive, setIsActive] = useState(false);
+  children,
+  size = "sm",
+  disabled = false,
+  loading = false,
+  className = "",
+  onClick,
+  type = "button",
+  borderColor = "white", // "white" or "black"
+  borderWidth = 1,
+  borderStyle = "solid",
+  borderRadius = "md", // sm, md, lg, xl, full
+  ...rest
+}) => {
+  const sizeClasses = {
+    sm: "h-8 px-3 text-sm",
+    md: "h-10 px-4 text-sm",
+    lg: "h-12 px-5 text-base",
+    xl: "h-14 px-6 text-lg",
+  };
 
-    const baseStyles = {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        border: 'none',
-        borderRadius: '6px',
-        fontFamily: 'inherit',
-        fontWeight: '500',
-        cursor: disabled || loading ? 'not-allowed' : 'pointer',
-        transition: 'all 0.15s ease-in-out',
-        opacity: disabled || loading ? 0.6 : 1,
-        transform: isActive ? 'scale(0.95)' : 'scale(1)', // 👈 shrink effect
-    };
+  const radiusClasses = {
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    full: "rounded-full",
+  };
 
-    const variantStyles = {
-        primary: { backgroundColor: '#3b82f6', color: 'white' },
-        secondary: { backgroundColor: '#f8fafc', color: '#374151', border: '1px solid #d1d5db' },
-        destructive: { backgroundColor: '#dc2626', color: 'white' },
-        outline: { backgroundColor: 'transparent', border: '1px solid #d1d5db', color: '#374151' },
-        ghost: { backgroundColor: 'transparent', color: '#374151' },
-    };
+  const borderClasses = clsx(
+    `border-${borderWidth}`,
+    borderStyle !== "solid" && `border-${borderStyle}`,
+    borderColor === "white" ? "border-white" : "border-black"
+  );
 
-    const sizeStyles = {
-        sm: { height: '32px', padding: '0 12px', fontSize: '14px' },
-        md: { height: '40px', padding: '0 16px', fontSize: '14px' },
-        lg: { height: '44px', padding: '0 24px', fontSize: '16px' },
-        xl: { height: '52px', padding: '0 32px', fontSize: '16px' },
-    };
+  const buttonClasses = clsx(
+    "inline-flex items-center justify-center font-medium",
+    "transition-transform duration-150 ease-in-out", // smooth animation
+    "active:scale-95", // 👈 shrink when clicked
+    borderClasses,
+    radiusClasses[borderRadius],
+    sizeClasses[size],
+    disabled || loading ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
+    className
+  );
 
-    const buttonStyles = {
-        ...baseStyles,
-        ...variantStyles[variant],
-        ...sizeStyles[size],
-    };
-
-    const handleClick = (e) => {
-        if (disabled || loading) {
-            e.preventDefault();
-            return;
-        }
-        setIsActive(true);
-        setTimeout(() => setIsActive(false), 150); // reset after animation
-        if (onClick) onClick(e);
-    };
-
-    return (
-        <button
-            type={type}
-            disabled={disabled || loading}
-            onClick={handleClick}
-            className={className}
-            style={buttonStyles}
-            aria-disabled={disabled || loading}
-            aria-busy={loading}
-            {...rest}
-        >
-            {loading ? 'Loading...' : children}
-        </button>
-    );
+  return (
+    <button
+      type={type}
+      disabled={disabled || loading}
+      onClick={onClick}
+      className={buttonClasses}
+      {...rest}
+    >
+      {loading ? (
+        <span className="flex items-center gap-2">
+          <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+          Loading...
+        </span>
+      ) : (
+        children
+      )}
+    </button>
+  );
 };
 
 Button.propTypes = {
-    children: PropTypes.node,
-    variant: PropTypes.oneOf(['primary', 'secondary', 'destructive', 'outline', 'ghost']),
-    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
-    disabled: PropTypes.bool,
-    loading: PropTypes.bool,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  children: PropTypes.node,
+  size: PropTypes.oneOf(["sm", "md", "lg", "xl"]),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  type: PropTypes.oneOf(["button", "submit", "reset"]),
+  borderColor: PropTypes.oneOf(["black", "white"]),
+  borderWidth: PropTypes.number,
+  borderStyle: PropTypes.oneOf(["solid", "dashed", "dotted", "double"]),
+  borderRadius: PropTypes.oneOf(["sm", "md", "lg", "xl", "full"]),
 };
 
 export default Button;

package/templates/button/index.js

@@ -1,2 +1,6 @@
-export { default } from './component';
-export { default as Button } from './component';
+/**
+ * Button component barrel export
+ * This file allows importing the Button component cleanly
+ */
+export { default } from "./component";
+export { default as Button } from "./component";

package/templates/button/meta.json

@@ -1,28 +1,152 @@
 {
   "name": "Button",
-  "description": "A customizable button component with multiple variants, sizes, and states.",
+  "description": "A customizable button component with size, border, radius, and click animation. Fully compatible with Tailwind CSS for background and text colors.",
   "category": "form",
-  "tags": ["button", "interactive", "form", "cta"],
+  "tags": [
+    "button",
+    "interactive",
+    "form",
+    "cta",
+    "action",
+    "tailwind"
+  ],
   "version": "1.0.0",
+  "author": "@rajdeep",
+  "created": "2025-08-28",
   "dependencies": {
-    "npm": [],
-    "peer": ["react", "prop-types"]
+    "npm": [
+      "clsx"
+    ],
+    "peer": [
+      "react",
+      "prop-types"
+    ]
   },
   "props": [
-    { "name": "children", "type": "React.ReactNode", "description": "Content inside the button" },
-    { "name": "variant", "type": "string", "default": "primary", "options": ["primary","secondary","destructive","outline","ghost"] },
-    { "name": "size", "type": "string", "default": "md", "options": ["sm","md","lg","xl"] },
-    { "name": "disabled", "type": "boolean", "default": false, "description": "Disable button" },
-    { "name": "loading", "type": "boolean", "default": false, "description": "Loading state" },
-    { "name": "className", "type": "string", "description": "Extra CSS classes" },
-    { "name": "onClick", "type": "function", "description": "Click handler" },
-    { "name": "type", "type": "string", "default": "button", "options": ["button","submit","reset"] }
+    {
+      "name": "children",
+      "type": "React.ReactNode",
+      "required": false,
+      "default": "undefined",
+      "description": "The content to display inside the button"
+    },
+    {
+      "name": "size",
+      "type": "string",
+      "required": false,
+      "default": "sm",
+      "description": "The size of the button",
+      "options": [
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ]
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "default": "false",
+      "description": "Whether the button is disabled and non-interactive"
+    },
+    {
+      "name": "loading",
+      "type": "boolean",
+      "required": false,
+      "default": "false",
+      "description": "Whether the button is in a loading state with spinner"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "default": "''",
+      "description": "Tailwind or custom classes to style background, text, hover, etc."
+    },
+    {
+      "name": "onClick",
+      "type": "function",
+      "required": false,
+      "default": "undefined",
+      "description": "Function to call when the button is clicked"
+    },
+    {
+      "name": "type",
+      "type": "string",
+      "required": false,
+      "default": "button",
+      "description": "The HTML button type attribute",
+      "options": [
+        "button",
+        "submit",
+        "reset"
+      ]
+    },
+    {
+      "name": "borderColor",
+      "type": "string",
+      "required": false,
+      "default": "white",
+      "description": "Border color of the button",
+      "options": [
+        "black",
+        "white"
+      ]
+    },
+    {
+      "name": "borderWidth",
+      "type": "number",
+      "required": false,
+      "default": "1",
+      "description": "Border thickness of the button"
+    },
+    {
+      "name": "borderStyle",
+      "type": "string",
+      "required": false,
+      "default": "solid",
+      "description": "Border style of the button",
+      "options": [
+        "solid",
+        "dashed",
+        "dotted",
+        "double"
+      ]
+    },
+    {
+      "name": "borderRadius",
+      "type": "string",
+      "required": false,
+      "default": "md",
+      "description": "Border radius for rounded corners",
+      "options": [
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "full"
+      ]
+    }
   ],
-  "examples": [
-    { "name": "Basic", "code": "<Button>Click Me</Button>" },
-    { "name": "Variants", "code": "<><Button variant='primary'>Primary</Button><Button variant='secondary'>Secondary</Button></>" },
-    { "name": "Sizes", "code": "<><Button size='sm'>Small</Button><Button size='lg'>Large</Button></>" },
-    { "name": "Loading", "code": "<Button loading>Loading...</Button>" }
+  "files": [
+    "component.jsx",
+    "index.js",
+    "meta.json"
   ],
-  "files": ["component.jsx", "index.js"]
+  "customization": {
+    "css_variables": [
+      "--button-border-radius",
+      "--button-transition"
+    ],
+    "styling_notes": "Background and text colors are meant to be customized using Tailwind classes via className. Borders and radius are controlled via props."
+  },
+  "accessibility": {
+    "features": [
+      "Keyboard navigation support",
+      "Screen reader friendly with aria-disabled and aria-busy",
+      "Focus visible outline",
+      "Semantic <button> element"
+    ]
+  }
 }