kaff-components 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,11 @@
+# Kaff Components - Modern UI Library
+
+Kaff Components adalah sebuah Design System Library berbasis JavaScript yang dibangun menggunakan **Tsup** sebagai build tool dan didistribusikan melalui **npm**. [cite_start]Proyek ini dikembangkan untuk memenuhi tugas Design System di **STIKOM PGRI Banyuwangi**[cite: 11, 18, 40].
+
+## 🎨 Tema Visual
+[cite_start]**Minimalis & Konsisten**: Berfokus pada kejelasan antarmuka dengan penerapan prinsip *styled design* pada warna, spacing, dan typography[cite: 18, 28, 31].
+
+## 📦 Instalasi
+Gunakan npm untuk menginstal library ini ke dalam proyek Anda:
+```bash
+npm install kaff-components

package/dist/index.d.mts

@@ -1,11 +1,31 @@
-declare const Button: (label: string, variant?: "primary" | "danger") => HTMLButtonElement;
+interface ButtonProps {
+    text: string;
+    color?: string;
+}
+declare const Button: ({ text, color }: ButtonProps) => HTMLButtonElement;
 
-declare const Input: (placeholder: string) => HTMLInputElement;
+interface InputProps {
+    placeholder?: string;
+    type?: string;
+}
+declare const Input: ({ placeholder, type }: InputProps) => HTMLDivElement;
 
-declare const Card: (title: string, content: string) => HTMLDivElement;
+interface CardProps {
+    title: string;
+    content: string;
+}
+declare const Card: ({ title, content }: CardProps) => HTMLDivElement;
 
-declare const Alert: (message: string) => HTMLDivElement;
+interface AlertProps {
+    message: string;
+    type?: 'success' | 'error';
+}
+declare const Alert: ({ message, type }: AlertProps) => HTMLDivElement;
 
-declare const Badge: (text: string) => HTMLSpanElement;
+interface BadgeProps {
+    label: string;
+    color?: string;
+}
+declare const Badge: ({ label, color }: BadgeProps) => HTMLSpanElement;
 
 export { Alert, Badge, Button, Card, Input };

package/dist/index.d.ts

@@ -1,11 +1,31 @@
-declare const Button: (label: string, variant?: "primary" | "danger") => HTMLButtonElement;
+interface ButtonProps {
+    text: string;
+    color?: string;
+}
+declare const Button: ({ text, color }: ButtonProps) => HTMLButtonElement;
 
-declare const Input: (placeholder: string) => HTMLInputElement;
+interface InputProps {
+    placeholder?: string;
+    type?: string;
+}
+declare const Input: ({ placeholder, type }: InputProps) => HTMLDivElement;
 
-declare const Card: (title: string, content: string) => HTMLDivElement;
+interface CardProps {
+    title: string;
+    content: string;
+}
+declare const Card: ({ title, content }: CardProps) => HTMLDivElement;
 
-declare const Alert: (message: string) => HTMLDivElement;
+interface AlertProps {
+    message: string;
+    type?: 'success' | 'error';
+}
+declare const Alert: ({ message, type }: AlertProps) => HTMLDivElement;
 
-declare const Badge: (text: string) => HTMLSpanElement;
+interface BadgeProps {
+    label: string;
+    color?: string;
+}
+declare const Badge: ({ label, color }: BadgeProps) => HTMLSpanElement;
 
 export { Alert, Badge, Button, Card, Input };

package/dist/index.js

@@ -1 +1,4 @@
-"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var i=(r,e)=>{for(var t in e)n(r,t,{get:e[t],enumerable:!0})},c=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!l.call(r,o)&&o!==t&&n(r,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return r};var x=r=>c(n({},"__esModule",{value:!0}),r);var m={};i(m,{Alert:()=>b,Badge:()=>g,Button:()=>a,Card:()=>u,Input:()=>y});module.exports=x(m);var a=(r,e="primary")=>{let t=document.createElement("button");return t.innerText=r,t.style.padding="10px 20px",t.style.borderRadius="8px",t.style.border="none",t.style.cursor="pointer",t.style.fontWeight="600",t.style.backgroundColor=e==="primary"?"#007bff":"#dc3545",t.style.color="white",t};var y=r=>{let e=document.createElement("input");return e.placeholder=r,e.style.padding="10px",e.style.border="1px solid #ccc",e.style.borderRadius="5px",e.style.width="100%",e};var u=(r,e)=>{let t=document.createElement("div");return t.style.padding="20px",t.style.border="1px solid #eee",t.style.borderRadius="12px",t.style.boxShadow="0 4px 6px rgba(0,0,0,0.1)",t.innerHTML=`<h3>${r}</h3><p>${e}</p>`,t};var b=r=>{let e=document.createElement("div");return e.innerText=r,e.style.padding="15px",e.style.backgroundColor="#fff3cd",e.style.color="#856404",e.style.border="1px solid #ffeeba",e.style.borderRadius="4px",e};var g=r=>{let e=document.createElement("span");return e.innerText=r,e.style.padding="4px 8px",e.style.backgroundColor="#e2e3e5",e.style.fontSize="12px",e.style.borderRadius="20px",e};0&&(module.exports={Alert,Badge,Button,Card,Input});
+"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(o,t)=>{for(var e in t)s(o,e,{get:t[e],enumerable:!0})},d=(o,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of i(t))!a.call(o,n)&&n!==e&&s(o,n,{get:()=>t[n],enumerable:!(r=p(t,n))||r.enumerable});return o};var l=o=>d(s({},"__esModule",{value:!0}),o);var m={};c(m,{Alert:()=>g,Badge:()=>f,Button:()=>x,Card:()=>b,Input:()=>u});module.exports=l(m);var x=({text:o,color:t="blue"})=>{let e=document.createElement("button");return e.innerText=o,Object.assign(e.style,{padding:"12px 24px",borderRadius:"8px",border:"none",cursor:"pointer",fontWeight:"bold",fontSize:"14px",color:"white",backgroundColor:t==="blue"?"#007bff":t,transition:"all 0.3s ease",boxShadow:"0 4px 6px rgba(0,0,0,0.1)"}),e.onmouseover=()=>e.style.transform="translateY(-2px)",e.onmouseout=()=>e.style.transform="translateY(0)",e};var u=({placeholder:o="Type here...",type:t="text"})=>{let e=document.createElement("div"),r=document.createElement("input");return r.type=t,r.placeholder=o,Object.assign(r.style,{width:"100%",padding:"10px 15px",borderRadius:"6px",border:"1px solid #444",backgroundColor:"#333",color:"white",fontSize:"14px",outline:"none",transition:"border-color 0.3s"}),r.onfocus=()=>r.style.borderColor="#007bff",r.onblur=()=>r.style.borderColor="#444",e.appendChild(r),e};var b=({title:o,content:t})=>{let e=document.createElement("div");return Object.assign(e.style,{padding:"20px",borderRadius:"12px",backgroundColor:"#2a2a2a",border:"1px solid #333",boxShadow:"0 4px 12px rgba(0,0,0,0.2)",color:"white",maxWidth:"300px"}),e.innerHTML=`
+    <h4 style="margin: 0 0 10px 0; color: #007bff;">${o}</h4>
+    <p style="margin: 0; font-size: 14px; color: #ccc;">${t}</p>
+  `,e};var g=({message:o,type:t="success"})=>{let e=document.createElement("div");return Object.assign(e.style,{padding:"12px 20px",borderRadius:"8px",fontSize:"14px",fontWeight:"500",color:"white",backgroundColor:t==="success"?"#28a745":"#dc3545",borderLeft:`5px solid ${t==="success"?"#1e7e34":"#bd2130"}`,marginBottom:"10px"}),e.innerText=o,e};var f=({label:o,color:t="#6c757d"})=>{let e=document.createElement("span");return Object.assign(e.style,{padding:"4px 10px",borderRadius:"20px",fontSize:"12px",fontWeight:"bold",color:"white",backgroundColor:t,display:"inline-block"}),e.innerText=o,e};0&&(module.exports={Alert,Badge,Button,Card,Input});

package/dist/index.mjs

@@ -1 +1,4 @@
-var o=(r,e="primary")=>{let t=document.createElement("button");return t.innerText=r,t.style.padding="10px 20px",t.style.borderRadius="8px",t.style.border="none",t.style.cursor="pointer",t.style.fontWeight="600",t.style.backgroundColor=e==="primary"?"#007bff":"#dc3545",t.style.color="white",t};var s=r=>{let e=document.createElement("input");return e.placeholder=r,e.style.padding="10px",e.style.border="1px solid #ccc",e.style.borderRadius="5px",e.style.width="100%",e};var p=(r,e)=>{let t=document.createElement("div");return t.style.padding="20px",t.style.border="1px solid #eee",t.style.borderRadius="12px",t.style.boxShadow="0 4px 6px rgba(0,0,0,0.1)",t.innerHTML=`<h3>${r}</h3><p>${e}</p>`,t};var i=r=>{let e=document.createElement("div");return e.innerText=r,e.style.padding="15px",e.style.backgroundColor="#fff3cd",e.style.color="#856404",e.style.border="1px solid #ffeeba",e.style.borderRadius="4px",e};var x=r=>{let e=document.createElement("span");return e.innerText=r,e.style.padding="4px 8px",e.style.backgroundColor="#e2e3e5",e.style.fontSize="12px",e.style.borderRadius="20px",e};export{i as Alert,x as Badge,o as Button,p as Card,s as Input};
+var n=({text:o,color:t="blue"})=>{let e=document.createElement("button");return e.innerText=o,Object.assign(e.style,{padding:"12px 24px",borderRadius:"8px",border:"none",cursor:"pointer",fontWeight:"bold",fontSize:"14px",color:"white",backgroundColor:t==="blue"?"#007bff":t,transition:"all 0.3s ease",boxShadow:"0 4px 6px rgba(0,0,0,0.1)"}),e.onmouseover=()=>e.style.transform="translateY(-2px)",e.onmouseout=()=>e.style.transform="translateY(0)",e};var p=({placeholder:o="Type here...",type:t="text"})=>{let e=document.createElement("div"),r=document.createElement("input");return r.type=t,r.placeholder=o,Object.assign(r.style,{width:"100%",padding:"10px 15px",borderRadius:"6px",border:"1px solid #444",backgroundColor:"#333",color:"white",fontSize:"14px",outline:"none",transition:"border-color 0.3s"}),r.onfocus=()=>r.style.borderColor="#007bff",r.onblur=()=>r.style.borderColor="#444",e.appendChild(r),e};var a=({title:o,content:t})=>{let e=document.createElement("div");return Object.assign(e.style,{padding:"20px",borderRadius:"12px",backgroundColor:"#2a2a2a",border:"1px solid #333",boxShadow:"0 4px 12px rgba(0,0,0,0.2)",color:"white",maxWidth:"300px"}),e.innerHTML=`
+    <h4 style="margin: 0 0 10px 0; color: #007bff;">${o}</h4>
+    <p style="margin: 0; font-size: 14px; color: #ccc;">${t}</p>
+  `,e};var d=({message:o,type:t="success"})=>{let e=document.createElement("div");return Object.assign(e.style,{padding:"12px 20px",borderRadius:"8px",fontSize:"14px",fontWeight:"500",color:"white",backgroundColor:t==="success"?"#28a745":"#dc3545",borderLeft:`5px solid ${t==="success"?"#1e7e34":"#bd2130"}`,marginBottom:"10px"}),e.innerText=o,e};var x=({label:o,color:t="#6c757d"})=>{let e=document.createElement("span");return Object.assign(e.style,{padding:"4px 10px",borderRadius:"20px",fontSize:"12px",fontWeight:"bold",color:"white",backgroundColor:t,display:"inline-block"}),e.innerText=o,e};export{d as Alert,x as Badge,n as Button,a as Card,p as Input};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaff-components", 
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Design System Library berbasis JavaScript menggunakan Tsup",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",