kaff-components 1.0.0 → 1.0.3

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,47 @@
-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 };
+interface NavbarProps {
+    brand: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+declare const Navbar: ({ brand, links }: NavbarProps) => HTMLElement;
+
+interface SidebarProps {
+    items: string[];
+}
+declare const Sidebar: ({ items }: SidebarProps) => HTMLElement;
+
+declare const Container: (children: HTMLElement) => HTMLDivElement;
+
+export { Alert, Badge, Button, Card, Container, Input, Navbar, Sidebar };

package/dist/index.d.ts

@@ -1,11 +1,47 @@
-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 };
+interface NavbarProps {
+    brand: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+declare const Navbar: ({ brand, links }: NavbarProps) => HTMLElement;
+
+interface SidebarProps {
+    items: string[];
+}
+declare const Sidebar: ({ items }: SidebarProps) => HTMLElement;
+
+declare const Container: (children: HTMLElement) => HTMLDivElement;
+
+export { Alert, Badge, Button, Card, Container, Input, Navbar, Sidebar };

package/dist/index.js

@@ -1 +1,14 @@
-"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 i=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,t)=>{for(var e in t)s(r,e,{get:t[e],enumerable:!0})},c=(r,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of a(t))!d.call(r,n)&&n!==e&&s(r,n,{get:()=>t[n],enumerable:!(o=i(t,n))||o.enumerable});return r};var l=r=>c(s({},"__esModule",{value:!0}),r);var v={};p(v,{Alert:()=>g,Badge:()=>m,Button:()=>x,Card:()=>u,Container:()=>y,Input:()=>b,Navbar:()=>f,Sidebar:()=>h});module.exports=l(v);var x=({text:r,color:t="blue"})=>{let e=document.createElement("button");return e.innerText=r,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 b=({placeholder:r="Type here...",type:t="text"})=>{let e=document.createElement("div"),o=document.createElement("input");return o.type=t,o.placeholder=r,Object.assign(o.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"}),o.onfocus=()=>o.style.borderColor="#007bff",o.onblur=()=>o.style.borderColor="#444",e.appendChild(o),e};var u=({title:r,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;">${r}</h4>
+    <p style="margin: 0; font-size: 14px; color: #ccc;">${t}</p>
+  `,e};var g=({message:r,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=r,e};var m=({label:r,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=r,e};var f=({brand:r,links:t})=>{let e=document.createElement("nav");return Object.assign(e.style,{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"1rem 2rem",backgroundColor:"#333",color:"white",boxShadow:"0 2px 4px rgba(0,0,0,0.1)"}),e.innerHTML=`
+    <div style="font-weight: bold; font-size: 1.5rem;">${r}</div>
+    <div style="display: flex; gap: 1.5rem;">
+      ${t.map(o=>`<a href="${o.href}" style="color: white; text-decoration: none; font-size: 0.9rem;">${o.label}</a>`).join("")}
+    </div>
+  `,e};var h=({items:r})=>{let t=document.createElement("aside");return Object.assign(t.style,{width:"250px",height:"100vh",backgroundColor:"#222",color:"white",padding:"2rem 1rem",display:"flex",flexDirection:"column",gap:"1rem"}),t.innerHTML=r.map(e=>`
+    <div style="padding: 0.75rem 1rem; border-radius: 4px; cursor: pointer; transition: background 0.3s;" 
+         onmouseover="this.style.background='#444'" onmouseout="this.style.background='transparent'">
+      ${e}
+    </div>
+  `).join(""),t};var y=r=>{let t=document.createElement("div");return Object.assign(t.style,{maxWidth:"1200px",margin:"0 auto",padding:"2rem",width:"100%"}),t.appendChild(r),t};0&&(module.exports={Alert,Badge,Button,Card,Container,Input,Navbar,Sidebar});

package/dist/index.mjs

@@ -1 +1,14 @@
-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:r,color:t="blue"})=>{let e=document.createElement("button");return e.innerText=r,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 i=({placeholder:r="Type here...",type:t="text"})=>{let e=document.createElement("div"),o=document.createElement("input");return o.type=t,o.placeholder=r,Object.assign(o.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"}),o.onfocus=()=>o.style.borderColor="#007bff",o.onblur=()=>o.style.borderColor="#444",e.appendChild(o),e};var d=({title:r,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;">${r}</h4>
+    <p style="margin: 0; font-size: 14px; color: #ccc;">${t}</p>
+  `,e};var c=({message:r,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=r,e};var x=({label:r,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=r,e};var u=({brand:r,links:t})=>{let e=document.createElement("nav");return Object.assign(e.style,{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"1rem 2rem",backgroundColor:"#333",color:"white",boxShadow:"0 2px 4px rgba(0,0,0,0.1)"}),e.innerHTML=`
+    <div style="font-weight: bold; font-size: 1.5rem;">${r}</div>
+    <div style="display: flex; gap: 1.5rem;">
+      ${t.map(o=>`<a href="${o.href}" style="color: white; text-decoration: none; font-size: 0.9rem;">${o.label}</a>`).join("")}
+    </div>
+  `,e};var m=({items:r})=>{let t=document.createElement("aside");return Object.assign(t.style,{width:"250px",height:"100vh",backgroundColor:"#222",color:"white",padding:"2rem 1rem",display:"flex",flexDirection:"column",gap:"1rem"}),t.innerHTML=r.map(e=>`
+    <div style="padding: 0.75rem 1rem; border-radius: 4px; cursor: pointer; transition: background 0.3s;" 
+         onmouseover="this.style.background='#444'" onmouseout="this.style.background='transparent'">
+      ${e}
+    </div>
+  `).join(""),t};var h=r=>{let t=document.createElement("div");return Object.assign(t.style,{maxWidth:"1200px",margin:"0 auto",padding:"2rem",width:"100%"}),t.appendChild(r),t};export{c as Alert,x as Badge,n as Button,d as Card,h as Container,i as Input,u as Navbar,m as Sidebar};

package/package.json

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