create-bdpa-react-scaffold 1.8.7 → 1.8.8

package/create-ui-lib.js

@@ -650,7 +650,7 @@ export function cn(...inputs) {
 `);
 
 write("src/index.js", `
-export { default as Button } from "./components/ui/Button.jsx";
+export { Button } from "./components/ui/button.jsx";
 export { default as Card } from "./components/ui/Card.jsx";
 export { default as Input } from "./components/ui/Input.jsx";
 export { default as FormField } from "./components/ui/FormField.jsx";
@@ -786,7 +786,7 @@ function Dashboard() {
                 </FormField>
 
                 <div className="flex gap-2 pt-2">
-                  <Button variant="primary">Save</Button>
+                  <Button>Save</Button>
                   <Button variant="secondary">Cancel</Button>
                 </div>
               </div>
@@ -803,9 +803,9 @@ function Dashboard() {
           <Card>
             <h2 className="text-lg font-semibold mb-4">Button Variants</h2>
             <div className="flex flex-wrap gap-3">
-              <Button variant="primary">Primary</Button>
+              <Button>Primary</Button>
               <Button variant="secondary">Secondary</Button>
-              <Button variant="danger">Danger</Button>
+              <Button variant="destructive">Danger</Button>
               <Button variant="outline">Outline</Button>
             </div>
           </Card>
@@ -891,37 +891,8 @@ export default function App() {
 // UI Components
 // -------------------------------
 
-write("src/components/ui/Button.jsx", `
-export default function Button({
-  variant = "primary",
-  children,
-  className = "",
-  ...props
-}) {
-  const base =
-    "inline-flex items-center justify-center px-4 py-2 rounded-md font-semibold text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
-
-  const variants = {
-    primary:
-      "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
-    secondary:
-      "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400",
-    danger:
-      "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
-    outline:
-      "border border-gray-300 text-gray-800 hover:bg-gray-100 focus:ring-gray-400"
-  };
-
-  return (
-    <button
-      className={\`\${base} \${variants[variant]} \${className}\`}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}
-`);
+// Note: Button component is provided by shadcn/ui (src/components/ui/button.jsx)
+// Installed via: npx shadcn@latest add button
 
 write("src/components/ui/Card.jsx", `
 export default function Card({ children, className = "" }) {
@@ -1203,7 +1174,7 @@ export function ToastProvider({ children }) {
 // -------------------------------
 
 write("src/pages/auth/Login.jsx", `
-import Button from "../../components/ui/Button.jsx";
+import { Button } from "@/components/ui/button";
 import Input from "../../components/ui/Input.jsx";
 import Card from "../../components/ui/Card.jsx";
 
@@ -1232,7 +1203,7 @@ export default function Login({ onSubmit }) {
 }`);
 
 write("src/pages/auth/Register.jsx", `
-import Button from "../../components/ui/Button.jsx";
+import { Button } from "@/components/ui/button";
 import Input from "../../components/ui/Input.jsx";
 import Card from "../../components/ui/Card.jsx";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bdpa-react-scaffold",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Scaffold a React + Tailwind UI library demo via Vite.",
   "bin": {
     "create-bdpa-react-scaffold": "create-ui-lib.js"