kaff-components 1.0.4 → 1.0.6

package/README.md

@@ -1,11 +1,69 @@
-# Kaff Components - Modern UI Library
+🎨 Tema 
+VisualMinimalis & Konsisten: Berfokus pada kejelasan antarmuka dengan penerapan prinsip styled design pada warna, spacing, dan typography untuk menciptakan UI yang bersih dan modern.
 
-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].
+📦 Instalasi
+Gunakan npm untuk menginstal library ini ke dalam proyek Anda:Bashnpm install kaff-components@latest
 
-## 🎨 Tema Visual
-[cite_start]**Minimalis & Konsisten**: Berfokus pada kejelasan antarmuka dengan penerapan prinsip *styled design* pada warna, spacing, dan typography[cite: 18, 28, 31].
+🚀 Penggunaan (Usage)
+Library ini mengembalikan objek HTML asli (HTMLElement). Untuk menggunakannya di framework modern seperti React, gunakan useRef dan appendChild untuk merender komponen ke dalam DOM.1. Implementasi Layout & NavigasiBerikut adalah contoh penggunaan komponen Navbar, Sidebar, dan Button dalam satu dashboard interaktif:JavaScript
 
-## 📦 Instalasi
-Gunakan npm untuk menginstal library ini ke dalam proyek Anda:
-```bash
-npm install kaff-components
+import { useEffect, useRef, useState } from 'react';
+import { Navbar, Sidebar, Button } from 'kaff-components';
+
+function App() {
+  const [active, setActive] = useState('dashboard');
+  const navRef = useRef(null);
+  const sideRef = useRef(null);
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    // Render Navbar dengan Kustomisasi
+    if (navRef.current) {
+      navRef.current.innerHTML = '';
+      navRef.current.appendChild(Navbar({ 
+        brand: 'Kaff Design System', 
+        backgroundColor: '#007bff', 
+        links: [] 
+      }));
+    }
+
+    // Render Sidebar & Logika Navigasi
+    if (sideRef.current) {
+      sideRef.current.innerHTML = '';
+      const sidebarElement = Sidebar({ 
+        items: ['Button', 'Input', 'Card'],
+        activeColor: '#333'
+      });
+      sideRef.current.appendChild(sidebarElement);
+
+      // Event Listener untuk Navigasi Antar Komponen
+      sidebarElement.querySelectorAll('div').forEach(item => {
+        item.onclick = () => setActive(item.innerText.toLowerCase());
+      });
+    }
+  }, []);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+      <div ref={navRef}></div>
+      <div style={{ display: 'flex', flex: 1 }}>
+        <div ref={sideRef}></div>
+        <main style={{ flex: 1, padding: '20px', background: '#121212', color: 'white' }}>
+           <h1>Preview: {active.toUpperCase()}</h1>
+           <div ref={contentRef}></div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+🛠️ Komponen Tersedia (API)
+Library ini mendukung kustomisasi penuh melalui props pada setiap komponennya:KomponenProperti / ParameterFungsiNavbarbrand, links, backgroundColor, textColorNavigasi bar bagian atas dengan dukungan tautan.Sidebaritems, width, activeColorNavigasi samping dengan efek hover kustom.Containerchildren, maxWidth, paddingPembungkus tata letak agar konten tetap simetris di tengah.Buttontext, colorTombol aksi utama dengan berbagai varian warna.Badgelabel, colorLabel penanda status atau informasi versi.
+
+🛡️ Keamanan & DistribusiTwo-Factor Authentication (2FA): 
+Setiap proses publikasi ke registry npm diverifikasi menggunakan Security Key/Passkey (PIN atau Biometrik perangkat Windows) untuk menjamin keamanan kode.Semantic Versioning: Mengikuti standar penomoran versi (Major.Minor.Patch) untuk menjaga stabilitas ketergantungan antar proyek.
+
+🏗️ Struktur Folder Proyeksrc/components/: 
+Berisi logika utama komponen yang ditulis dalam TypeScript.dist/: Berisi file hasil kompilasi yang siap digunakan di lingkungan produksi (.js, .mjs, .d.ts).
+
+Dibuat oleh Fillah - STIKOM PGRI Banyuwangi.

package/dist/index.d.mts

@@ -30,18 +30,27 @@ declare const Badge: ({ label, color }: BadgeProps) => HTMLSpanElement;
 
 interface NavbarProps {
     brand: string;
-    links: {
-        label: string;
-        href: string;
+    backgroundColor?: string;
+    textColor?: string;
+    links?: {
+        name: string;
+        url: string;
     }[];
 }
-declare const Navbar: ({ brand, links }: NavbarProps) => HTMLElement;
+declare const Navbar: ({ brand, backgroundColor, textColor }: NavbarProps) => HTMLElement;
 
 interface SidebarProps {
     items: string[];
+    width?: string;
+    activeColor?: string;
 }
-declare const Sidebar: ({ items }: SidebarProps) => HTMLElement;
+declare const Sidebar: ({ items, width, activeColor }: SidebarProps) => HTMLElement;
 
-declare const Container: (children: HTMLElement) => HTMLDivElement;
+interface ContainerProps {
+    children: HTMLElement;
+    maxWidth?: string;
+    padding?: string;
+}
+declare const Container: ({ children, maxWidth, padding }: ContainerProps) => HTMLDivElement;
 
 export { Alert, Badge, Button, Card, Container, Input, Navbar, Sidebar };

package/dist/index.d.ts

@@ -30,18 +30,27 @@ declare const Badge: ({ label, color }: BadgeProps) => HTMLSpanElement;
 
 interface NavbarProps {
     brand: string;
-    links: {
-        label: string;
-        href: string;
+    backgroundColor?: string;
+    textColor?: string;
+    links?: {
+        name: string;
+        url: string;
     }[];
 }
-declare const Navbar: ({ brand, links }: NavbarProps) => HTMLElement;
+declare const Navbar: ({ brand, backgroundColor, textColor }: NavbarProps) => HTMLElement;
 
 interface SidebarProps {
     items: string[];
+    width?: string;
+    activeColor?: string;
 }
-declare const Sidebar: ({ items }: SidebarProps) => HTMLElement;
+declare const Sidebar: ({ items, width, activeColor }: SidebarProps) => HTMLElement;
 
-declare const Container: (children: HTMLElement) => HTMLDivElement;
+interface ContainerProps {
+    children: HTMLElement;
+    maxWidth?: string;
+    padding?: string;
+}
+declare const Container: ({ children, maxWidth, padding }: ContainerProps) => HTMLDivElement;
 
 export { Alert, Badge, Button, Card, Container, Input, Navbar, Sidebar };

package/dist/index.js

@@ -1,14 +1,8 @@
-"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("")}
+"use strict";var i=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var p=(o,r)=>{for(var e in r)i(o,e,{get:r[e],enumerable:!0})},l=(o,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of d(r))!c.call(o,n)&&n!==e&&i(o,n,{get:()=>r[n],enumerable:!(t=a(r,n))||t.enumerable});return o};var u=o=>l(i({},"__esModule",{value:!0}),o);var v={};p(v,{Alert:()=>m,Badge:()=>f,Button:()=>x,Card:()=>b,Container:()=>C,Input:()=>g,Navbar:()=>h,Sidebar:()=>y});module.exports=u(v);var x=({text:o,color:r="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:r==="blue"?"#007bff":r,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 g=({placeholder:o="Type here...",type:r="text"})=>{let e=document.createElement("div"),t=document.createElement("input");return t.type=r,t.placeholder=o,Object.assign(t.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"}),t.onfocus=()=>t.style.borderColor="#007bff",t.onblur=()=>t.style.borderColor="#444",e.appendChild(t),e};var b=({title:o,content:r})=>{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;">${r}</p>
+  `,e};var m=({message:o,type:r="success"})=>{let e=document.createElement("div");return Object.assign(e.style,{padding:"12px 20px",borderRadius:"8px",fontSize:"14px",fontWeight:"500",color:"white",backgroundColor:r==="success"?"#28a745":"#dc3545",borderLeft:`5px solid ${r==="success"?"#1e7e34":"#bd2130"}`,marginBottom:"10px"}),e.innerText=o,e};var f=({label:o,color:r="#6c757d"})=>{let e=document.createElement("span");return Object.assign(e.style,{padding:"4px 10px",borderRadius:"20px",fontSize:"12px",fontWeight:"bold",color:"white",backgroundColor:r,display:"inline-block"}),e.innerText=o,e};var h=({brand:o,backgroundColor:r="#333",textColor:e="white"})=>{let t=document.createElement("nav");return Object.assign(t.style,{display:"flex",padding:"1rem 2rem",backgroundColor:r,color:e,boxShadow:"0 2px 4px rgba(0,0,0,0.1)"}),t.innerHTML=`<div style="font-weight: bold; font-size: 1.5rem;">${o}</div>`,t};var y=({items:o,width:r="250px",activeColor:e="#444"})=>{let t=document.createElement("aside");return Object.assign(t.style,{width:r,height:"100vh",backgroundColor:"#222",color:"white",padding:"2rem 1rem"}),t.innerHTML=o.map(s=>`
+    <div class="menu-item" style="padding: 10px; cursor: pointer; border-radius: 4px; transition: 0.3s;">
+      ${s}
     </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});
+  `).join(""),t.querySelectorAll(".menu-item").forEach(s=>{s.onmouseover=()=>s.style.backgroundColor=e,s.onmouseout=()=>s.style.backgroundColor="transparent"}),t};var C=({children:o,maxWidth:r="1200px",padding:e="2rem"})=>{let t=document.createElement("div");return Object.assign(t.style,{maxWidth:r,margin:"0 auto",padding:e,width:"100%"}),t.appendChild(o),t};0&&(module.exports={Alert,Badge,Button,Card,Container,Input,Navbar,Sidebar});

package/dist/index.mjs

@@ -1,14 +1,8 @@
-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>
+var i=({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 d=({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 p=({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 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("")}
+  `,e};var u=({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 g=({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};var m=({brand:o,backgroundColor:t="#333",textColor:e="white"})=>{let r=document.createElement("nav");return Object.assign(r.style,{display:"flex",padding:"1rem 2rem",backgroundColor:t,color:e,boxShadow:"0 2px 4px rgba(0,0,0,0.1)"}),r.innerHTML=`<div style="font-weight: bold; font-size: 1.5rem;">${o}</div>`,r};var h=({items:o,width:t="250px",activeColor:e="#444"})=>{let r=document.createElement("aside");return Object.assign(r.style,{width:t,height:"100vh",backgroundColor:"#222",color:"white",padding:"2rem 1rem"}),r.innerHTML=o.map(n=>`
+    <div class="menu-item" style="padding: 10px; cursor: pointer; border-radius: 4px; transition: 0.3s;">
+      ${n}
     </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};
+  `).join(""),r.querySelectorAll(".menu-item").forEach(n=>{n.onmouseover=()=>n.style.backgroundColor=e,n.onmouseout=()=>n.style.backgroundColor="transparent"}),r};var C=({children:o,maxWidth:t="1200px",padding:e="2rem"})=>{let r=document.createElement("div");return Object.assign(r.style,{maxWidth:t,margin:"0 auto",padding:e,width:"100%"}),r.appendChild(o),r};export{u as Alert,g as Badge,i as Button,p as Card,C as Container,d as Input,m as Navbar,h as Sidebar};

package/package.json

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