purvex-ui 0.1.2 → 0.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "purvex-ui",
-  "version": "0.1.2",
-  "description": "React component generator with Tailwind CSS v4 & Purple Elegant theme - Built by Al Zaki Ibra Ramadani",
+  "version": "0.1.6",
+  "description": "React component generator with Tailwind CSS v4 & Purple Elegant theme",
   "main": "src/index.js",
   "bin": {
     "purvex-ui": "src/index.js"
@@ -9,7 +9,8 @@
   "files": [
     "src/",
     "templates/",
-    "registry/"
+    "registry/",
+    "README.md"
   ],
   "scripts": {
     "test": "echo \"No tests yet\"",

package/registry/components.json

@@ -0,0 +1,30 @@
+{
+  "version": "0.1.0",
+  "lastUpdated": "2025-12-28",
+  "components": [
+    {
+      "name": "button",
+      "displayName": "Button",
+      "description": "Tombol dengan berbagai variant dan ukuran",
+      "category": "basic",
+      "files": ["button.jsx"],
+      "dependencies": []
+    },
+    {
+      "name": "card",
+      "displayName": "Card",
+      "description": "Komponen card untuk konten",
+      "category": "layout",
+      "files": ["card.jsx"],
+      "dependencies": []
+    },
+    {
+      "name": "avatar",
+      "displayName": "Avatar",
+      "description": "Komponen avatar untuk menampilkan gambar profil",
+      "category": "layout",
+      "files": ["avatar.jsx"],
+      "dependencies": []
+    }
+  ]
+}

package/templates/avatar.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef(function Avatar({
+  src,
+  alt = "avatar",
+  size = 72,
+  border = true,
+  variant = "circle", // circle, square, star, heart, triangle, abstract
+  className,
+  ...props
+}, ref) {
+  // Variants shapes dengan clip-path yang benar
+  const shapeStyles = {
+    star: { 
+      clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)' 
+    },
+    heart: { 
+      clipPath: 'polygon(50% 93%, 5% 40%, 25% 10%, 50% 30%, 75% 10%, 95% 40%)' 
+    },
+    triangle: { 
+      clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)' 
+    },
+    abstract: { 
+      clipPath: 'polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%)' 
+    },
+  };
+
+  // Kelas Tailwind untuk shape biasa
+  const shapeClasses = {
+    circle: "rounded-full",
+    square: "rounded-md",
+    star: "",
+    heart: "",
+    triangle: "",
+    abstract: "",
+  };
+
+  // Apakah perlu inline style untuk clip-path?
+  const needsClipPath = ['star', 'heart', 'triangle', 'abstract'].includes(variant);
+  const inlineStyle = needsClipPath ? shapeStyles[variant] : {};
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative overflow-hidden shrink-0",
+        border && "before:absolute before:inset-0 before:border-2 before:border-border/20",
+        shapeClasses[variant],
+        className
+      )}
+      style={{
+        ...inlineStyle,
+        width: `${size}px`,
+        height: `${size}px`,
+      }}
+      {...props}
+    >
+      <img 
+        src={src} 
+        alt={alt} 
+        className="w-full h-full object-cover" 
+      />
+    </div>
+  );
+});
+
+Avatar.displayName = "Avatar";
+
+export { Avatar };

package/templates/button.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+const Button = React.forwardRef(function Button(
+  { className, variant = "default", size = "default", children, ...props },
+  ref
+) {
+  const baseClasses = cn(
+    // Base styles
+    "inline-flex items-center justify-center break-words rounded-md text-sm font-bold",
+    "ring-offset-background transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50 hover:cursor-pointer hover:scale-102 transition-all",
+
+    // Variants flat
+    variant === "default" &&
+      "bg-primary text-primary-foreground hover:bg-primary/90",
+    variant === "primary-outline" &&
+      "bg-blue-100 text-blue-600 hover:bg-blue-200",
+    variant === "destructive" &&
+      "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+    variant === "outline" &&
+      "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+    variant === "secondary" &&
+      "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+    variant === "ghost" && "hover:bg-accent hover:text-accent-foreground",
+    variant === "link" && "text-primary underline-offset-4 hover:underline",
+    variant === "success" && "bg-green-600 text-white hover:bg-green-700",
+    variant === "warning" && "bg-yellow-500 text-black hover:bg-yellow-600",
+    variant === "info" && "bg-blue-500 text-white hover:bg-blue-600",
+    variant === "dark" && "bg-gray-800 text-white hover:bg-gray-900",
+
+    // Gradient variants
+    variant === "primary-gradient" &&
+      "bg-linear-to-bl from-purple-500 via-purple-600 to-purple-700 text-white hover:from-purple-600 hover:via-purple-700 hover:to-purple-800",
+    variant === "destructive-gradient" &&
+      "bg-linear-to-bl from-red-500 via-red-600 to-red-700 text-white hover:from-red-600 hover:via-red-700 hover:to-red-800",
+    variant === "success-gradient" &&
+      "bg-linear-to-br from-green-500 via-green-600 to-green-700 text-white hover:from-green-600 hover:via-green-700 hover:to-green-800",
+    variant === "warning-gradient" &&
+      "bg-linear-to-br from-yellow-400 via-yellow-500 to-yellow-600 text-black hover:from-yellow-500 hover:via-yellow-600 hover:to-yellow-700",
+    variant === "info-gradient" &&
+      "bg-linear-to-bl from-blue-400 via-blue-500 to-blue-600 text-white hover:from-blue-500 hover:via-blue-600 hover:to-blue-700",
+    variant === "secondary-gradient" &&
+      "bg-linear-to-bl from-gray-200 via-gray-300 to-gray-400 text-gray-800 hover:from-gray-300 hover:via-gray-400 hover:to-gray-500",
+    variant === "dark-gradient" &&
+      "bg-linear-to-bl from-gray-700 via-gray-800 to-gray-900 text-white hover:from-gray-800 hover:via-gray-900 hover:to-black",
+
+    // Pasangan / light / outline
+    variant === "primary-light" &&
+      "bg-primary/20 text-primary hover:bg-primary/30",
+    variant === "destructive-light" &&
+      "bg-destructive/20 text-destructive hover:bg-destructive/30",
+    variant === "success-light" &&
+      "bg-green-100 text-green-600 hover:bg-green-200",
+    variant === "warning-light" &&
+      "bg-yellow-100 text-yellow-600 hover:bg-yellow-200",
+    variant === "info-light" && "bg-blue-100 text-blue-600 hover:bg-blue-200",
+    variant === "secondary-light" &&
+      "bg-secondary/20 text-secondary hover:bg-secondary/30",
+    variant === "dark-light" &&
+      "bg-gray-700/30 text-gray-800 hover:bg-gray-700/50",
+
+    // Sizes
+    size === "default" && "min-h-10 rounded-lg px-5 py-2",
+    size === "sm" && "min-h-9 rounded-md px-3",
+    size === "lg" && "min-h-11 rounded-md px-8",
+    size === "icon" && "h-10 w-10",
+
+    // Custom classes dari user
+    className
+  );
+
+  return (
+    <button className={baseClasses} ref={ref} {...props}>
+      {children}
+    </button>
+  );
+});
+
+Button.displayName = "Button";
+
+export { Button };

package/templates/card.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef(function Card({ className, hover = false, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-2xl border bg-card text-card-foreground transition-all",
+        hover && "hover:shadow-md hover:scale-[1.02]",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef(function CardHeader({ className, ...props }, ref) {
+  return (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  );
+});
+
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef(function CardTitle({ className, ...props }, ref) {
+  return (
+    <h3
+      ref={ref}
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+});
+
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef(function CardDescription({ className, ...props }, ref) {
+  return (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  );
+});
+
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef(function CardContent({ className, ...props }, ref) {
+  return <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />;
+});
+
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef(function CardFooter({ className, ...props }, ref) {
+  return <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />;
+});
+
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/templates/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}