@frontend-kasplo/kasplo-ui-components/dist/index.cjs.js

UI Components Library

"use strict";var e=require("react/jsx-runtime"),r=require("react");exports.Button=({label:r,variant:t="primary",size:l="medium",disabled:s=!1,onClick:a,className:o=""})=>{const i=s?"opacity-50 cursor-not-allowed":"cursor-pointer";return e.jsx("button",{className:`rounded-md font-semibold transition-colors duration-200 ${{primary:"bg-blue-600 text-white hover:bg-blue-700",secondary:"bg-gray-200 text-gray-800 hover:bg-gray-300"}[t]} ${{small:"px-3 py-1 text-sm",medium:"px-4 py-2 text-base",large:"px-6 py-3 text-lg"}[l]} ${i} ${o}`,disabled:s,onClick:a,children:r})},exports.Chip=({label:r,backgroundColor:t="#E5E7EB",textColor:l="#111827",borderColor:s,className:a=""})=>{const o=s?`border border-solid border-[${s}]`:"";return e.jsx("div",{className:`inline-flex items-center px-10 py-[11px] h-10 gap-2.5 rounded-full ${o} ${a}`,style:{backgroundColor:t,color:l},children:e.jsx("span",{className:"text-sm font-medium",children:r})})},exports.Counter=({initialValue:t=0,min:l=Number.MIN_SAFE_INTEGER,max:s=Number.MAX_SAFE_INTEGER,step:a=1,label:o="Counter",className:i=""})=>{const[n,d]=r.useState(t),c="px-4 py-2 rounded-md font-semibold transition-colors duration-200",m="bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed";return e.jsxs("div",{className:`flex flex-col items-center gap-4 ${i}`,children:[e.jsx("label",{className:"text-lg font-medium",children:o}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("button",{className:`${c} ${m}`,onClick:()=>{d((e=>Math.max(e-a,l)))},disabled:n<=l,children:"-"}),e.jsx("span",{className:"text-2xl font-bold min-w-[3rem] text-center",children:n}),e.jsx("button",{className:`${c} ${m}`,onClick:()=>{d((e=>Math.min(e+a,s)))},disabled:n>=s,children:"+"})]}),e.jsx("button",{className:`${c} bg-gray-200 text-gray-800 hover:bg-gray-300`,onClick:()=>{d(t)},disabled:n===t,children:"Reset"})]})};
//# sourceMappingURL=index.cjs.js.map