@sliderzz/daz-ui/dist/index.js

This is component lib

!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["React"],n):"object"==typeof exports?exports.myComponentLibrary=n(require("react")):e.myComponentLibrary=n(e.React)}(this,(e=>(()=>{"use strict";var n={9:(e,n,t)=>{t.d(n,{A:()=>c});var r=t(601),o=t.n(r),a=t(314),i=t.n(a)()(o());i.push([e.id,'.card {\n  width: 190px;\n  background: white;\n  padding: .4em;\n  border-radius: 6px;\n  overflow: hidden; /* Ensure no overflow from the card */\n}\n\n.card-image {\n  background-color: rgb(236, 236, 236);\n  width: 100%;\n  height: 130px;\n  border-radius: 6px 6px 0 0;\n  overflow: hidden; /* Hide any overflow */\n}\n\n.card-image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover; /* Ensure image covers the container */\n  display: block; /* Remove default inline spacing */\n}\n\n.card-image:hover {\n  transform: scale(0.98);\n}\n\n.title {\n  text-transform: uppercase;\n  font-size: 0.7em;\n  font-weight: 600;\n  color: rgb(63, 121, 230);\n  padding: 10px 7px 0;\n}\n\n.title:hover {\n  cursor: pointer;\n}\n\n.desc {\n  font-weight: 600;\n  color: rgb(88, 87, 87);\n  padding: 7px;\n}\n\n.desc:hover {\n  cursor: pointer;\n}\n\n.name {\n  font-weight: 600;\n}\n\n.name:hover {\n  cursor: pointer;\n}\n\nbutton {\n  --color: rgba(129, 140, 248);\n  background-color: var(--color);\n  font-family: inherit;\n  display: inline-block;\n  width: 200px;\n  height: 40px;\n  margin-top: 10px;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--color);\n  transition: color .5s;\n  line-height: 0;\n  padding: 2px;\n  z-index: 1;\n  font-size: 15px;\n  border-radius: 6px;\n  font-weight: 500;\n  color: #fff;\n}\n\nbutton:before {\n  content: "";\n  position: absolute;\n  z-index: -1;\n  background: white;\n  height: 150px;\n  width: 200px;\n  border-radius: 50%;\n}\n\nbutton:hover {\n  color: var(--color);\n}\n\nbutton:before {\n  top: 100%;\n  right: 100%;\n  transition: all .7s;\n}\n\nbutton:hover:before {\n  top: -30px;\n  right: -20px;\n}\n\nbutton:active:before {\n  background: #e9ecef;\n  transition: background 0s;\n}',""]);const c=i},844:(e,n,t)=>{t.d(n,{A:()=>c});var r=t(601),o=t.n(r),a=t(314),i=t.n(a)()(o());i.push([e.id,'.form{\n    width: auto;\n    padding: 5%;\n    height: auto;\n    background-color: #e8e8e8;\n}\n\nbutton {\n  --color: rgba(129, 140, 248);\n  background-color: var(--color);\n  font-family: inherit;\n  display: inline-block;\n  width: 200px;\n  height: 40px;\n  margin-top: 10px;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--color);\n  transition: color .5s;\n  line-height: 0;\n  padding: 2px;\n  z-index: 1;\n  font-size: 15px;\n  border-radius: 6px;\n  font-weight: 500;\n  color: #fff;\n}\n\nbutton:before {\n  content: "";\n  position: absolute;\n  z-index: -1;\n  background: white;\n  height: 150px;\n  width: 200px;\n  border-radius: 50%;\n}\n\nbutton:hover {\n  color: var(--color);\n}\n\nbutton:before {\n  top: 100%;\n  right: 100%;\n  transition: all .7s;\n}\n\nbutton:hover:before {\n  top: -30px;\n  right: -20px;\n}\n\nbutton:active:before {\n  background: #e9ecef;\n  transition: background 0s;\n}',""]);const c=i},638:(e,n,t)=>{t.d(n,{A:()=>c});var r=t(601),o=t.n(r),a=t(314),i=t.n(a)()(o());i.push([e.id,".group {\n    display: flex;\n    line-height: 30px;\n    align-items: center;\n    position: relative;\n    max-width: 100%;\n    padding: 0 1rem;\n    box-sizing: border-box;\n    margin: 4%;\n  }\n  \n  .input {\n    width: 100%;\n    height: 45px;\n    line-height: 30px;\n    padding: 0 5rem;\n    padding-left: 3rem;\n    border: 2px solid transparent;\n    border-radius: 10px;\n    outline: none;\n    background-color: #f8fafc;\n    color: #0d0c22;\n    transition: .5s ease;\n  }\n  \n  .input::placeholder {\n    color: #94a3b8;\n  }\n  \n  .input:focus,\n  .input:hover {\n    outline: none;\n    border-color: rgba(129, 140, 248);\n    background-color: #fff;\n    box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);\n  }\n  \n  .icon {\n    position: absolute;\n    margin-left: 4%;\n    fill: rgba(129, 140, 248);\n    width: 1.3rem;\n    height: 1.3rem;\n  }\n  \n  /* Responsive adjustments */\n  @media (max-width: 768px) {\n    .input {\n      height: 40px;\n      padding: 0 4rem;\n      padding-left: 2.5rem;\n    }\n  \n    .icon {\n      margin-left: 4%;\n      fill: rgba(129, 140, 248);\n      width: 1.25rem;\n      height: 1rem;\n    }\n  }\n  \n  @media (max-width: 480px) {\n    .input {\n      height: 35px;\n      padding: 0 3rem;\n      padding-left: 2rem;\n    }\n  \n    .icon {\n      margin-left: 4%;\n      fill: rgba(129, 140, 248);\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n  ",""]);const c=i},314:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c<this.length;c++){var l=this[c][0];null!=l&&(i[l]=!0)}for(var s=0;s<e.length;s++){var d=[].concat(e[s]);r&&i[d[0]]||(void 0!==a&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),t&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=t):d[2]=t),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),n.push(d))}},n}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var n=[];function t(e){for(var t=-1,r=0;r<n.length;r++)if(n[r].identifier===e){t=r;break}return t}function r(e,r){for(var a={},i=[],c=0;c<e.length;c++){var l=e[c],s=r.base?l[0]+r.base:l[0],d=a[s]||0,u="".concat(s," ").concat(d);a[s]=d+1;var p=t(u),f={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==p)n[p].references++,n[p].updater(f);else{var m=o(f,r);r.byIndex=c,n.splice(c,0,{identifier:u,updater:m,references:1})}i.push(u)}return i}function o(e,n){var t=n.domAPI(n);return t.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=t(a[i]);n[c].references--}for(var l=r(e,o),s=0;s<a.length;s++){var d=t(a[s]);0===n[d].references&&(n[d].updater(),n.splice(d,1))}a=l}}},659:e=>{var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},540:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},56:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},113:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function r(e){var o=t[e];if(void 0!==o)return o.exports;var a=t[e]={id:e,exports:{}};return n[e](a,a.exports,r),a.exports}r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};r.r(o),r.d(o,{DazForm:()=>L,DazInput:()=>F,Dazcard:()=>w});var a=r(156),i=r.n(a),c=r(72),l=r.n(c),s=r(825),d=r.n(s),u=r(659),p=r.n(u),f=r(56),m=r.n(f),h=r(540),v=r.n(h),b=r(113),g=r.n(b),y=r(9),x={};x.styleTagTransform=g(),x.setAttributes=m(),x.insert=p().bind(null,"head"),x.domAPI=d(),x.insertStyleElement=v(),l()(y.A,x),y.A&&y.A.locals&&y.A.locals;const w=e=>{let{title:n,desc:t,src:r,imageAltText:o,id:a,buttonText:c,handleOnClick:l}=e;return i().createElement("div",{className:"card",id:a},i().createElement("div",{className:"card-image"},i().createElement("img",{src:r,alt:o})),i().createElement("div",{className:"title"},n),i().createElement("div",{className:"desc"},t),c&&i().createElement("div",{className:"card-button"},i().createElement("button",{onClick:l},c)))};var E={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},O=a.createContext&&a.createContext(E),j=["attr","size","title"];function k(){return k=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},k.apply(this,arguments)}function A(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function C(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?A(Object(t),!0).forEach((function(n){var r,o,a,i;r=e,o=n,a=t[n],(o="symbol"==typeof(i=function(e){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var t=n.call(e,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o))?i:i+"")in r?Object.defineProperty(r,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[o]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function S(e){return e&&e.map(((e,n)=>a.createElement(e.tag,C({key:n},e.attr),S(e.child))))}function P(e){return n=>a.createElement(z,k({attr:C({},e.attr)},n),S(e.child))}function z(e){var n=n=>{var t,{attr:r,size:o,title:i}=e,c=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){if(n.indexOf(r)>=0)continue;t[r]=e[r]}return t}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(e,j),l=o||n.size||"1em";return n.className&&(t=n.className),e.className&&(t=(t?t+" ":"")+e.className),a.createElement("svg",k({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},n.attr,r,c,{className:t,style:C(C({color:e.color||n.color},n.style),e.style),height:l,width:l,xmlns:"http://www.w3.org/2000/svg"}),i&&a.createElement("title",null,i),e.children)};return void 0!==O?a.createElement(O.Consumer,null,(e=>n(e))):n(E)}function N(e){return P({tag:"svg",attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"},child:[]}]})(e)}function T(e){return P({tag:"svg",attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"},child:[]}]})(e)}function M(e){return P({tag:"svg",attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"},child:[]}]})(e)}var I=r(638),D={};D.styleTagTransform=g(),D.setAttributes=m(),D.insert=p().bind(null,"head"),D.domAPI=d(),D.insertStyleElement=v(),l()(I.A,D),I.A&&I.A.locals&&I.A.locals;const F=e=>{let{inputField:n,id:t,value:r,onChange:o}=e,a="",c="text",l=M;switch(n){case"name":a="Enter your name",l=M;break;case"email":a="Enter your email",c="email",l=N;break;case"password":a="Enter your password",c="password",l=T;break;default:a="Enter text"}return i().createElement("div",{className:"group"},i().createElement(l,{className:"icon"}),i().createElement("input",{className:"input",id:t,type:c,placeholder:a,name:n,value:r,onChange:o}))};var H=r(844),R={};R.styleTagTransform=g(),R.setAttributes=m(),R.insert=p().bind(null,"head"),R.domAPI=d(),R.insertStyleElement=v(),l()(H.A,R),H.A&&H.A.locals&&H.A.locals;const L=e=>{let{onSubmit:n,submitButtonText:t}=e;const[r,o]=(0,a.useState)({name:"",email:"",password:""}),c=e=>{const{name:n,value:t}=e.target;o((e=>({...e,[n]:t})))};return i().createElement("form",{className:"form",onSubmit:e=>{e.preventDefault(),n(r)}},i().createElement(F,{inputField:"name",id:"name",value:r.name,onChange:c}),i().createElement(F,{inputField:"email",id:"email",value:r.email,onChange:c}),i().createElement(F,{inputField:"password",id:"password",value:r.password,onChange:c}),i().createElement("button",{type:"submit"},t))};return o})()));