zcomponents-ui 1.5.2 → 1.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{index-CBt_MKFC.js → index-ClebZQNA.js} +22 -10
- package/dist/{index-CBt_MKFC.js.map → index-ClebZQNA.js.map} +1 -1
- package/dist/{index-DNfVEtvR.js → index-bOHTuJXL.js} +22 -10
- package/dist/{index-DNfVEtvR.js.map → index-bOHTuJXL.js.map} +1 -1
- package/dist/index.cjs.js +23 -11
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +24 -12
- package/dist/index.esm.js.map +1 -1
- package/dist/react-hook-form.cjs.js +1 -1
- package/dist/react-hook-form.esm.js +1 -1
- package/dist/zcomponents-ui.css +1 -1
- package/dist/zcomponents-ui.css.map +1 -1
- package/dist/zdrop.css +1 -1
- package/dist/zdrop.css.map +1 -1
- package/dist/zdropbutton.css +1 -1
- package/dist/zdropbutton.css.map +1 -1
- package/dist/zrange.css +1 -1
- package/dist/zrange.css.map +1 -1
- package/package.json +1 -1
package/dist/zrange.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--zd-color-primary:#676767;--zd-color-primary-transp:#67676775;--zd-color-secondary:#0079bd;--zd-color-secondary-transp:#0079bd50;--zd-color-disabled:#ddd;--zd-color-error:#ff4d4f;--zd-color-error-transp:#ffe6e6;--zd-color-background-transp:#ffffffdd;--zd-font-family:Helvetica,Arial,sans-serif;--zd-font-size:14px;--zd-radius:3px;--zd-border:1px solid var(--zd-color-primary);--zd-focus-ring:0 0 0 0.2rem var(--zd-color-secondary-transp)}.zr{margin-top:20px}.zr,.zr__container{position:relative}.input-label__wrapper{pointer-events:none;touch-action:none}.zr__label{background:transparent}:where(.zr__label){color:var(--zd-color-primary);font-size:var(--zd-font-size);font-weight:500}.zr__value-indicator{border-radius:4px;display:none;font-size:var(--zd-font-size);font-weight:500;left:50%;margin-bottom:5px;min-height:-moz-fit-content;min-height:fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:2px 8px;position:absolute;transform:translateX(-50%);z-index:6}@media (max-width:599px){.zr__value-indicator{padding:2px 4px}}:where(.zr__value-indicator){background-color:var(--zd-color-primary);font-size:var(--zd-font-size);white-space:nowrap;width:-moz-fit-content;width:fit-content}@media (max-width:599px){:where(.zr__value-indicator){font-size:var(--zd-font-size)}}.zr__value-indicator:before{border-style:solid;border-width:5px 5px 0;content:"";display:block;height:0;left:50%;position:absolute;top:100%;transform:translateX(-50%);width:0}:where(.zr__value-indicator):before{border-color:var(--zd-color-primary) transparent transparent transparent}.zr__value-indicator--active{align-items:center;display:flex;justify-content:space-around}:where(.zr__value-indicator-icon){align-items:center;display:flex;height:40px;justify-content:center;width:40px}:where(.zr__value-indicator-icon) img{height:100%;width:100%}.zr__inputs-wrapper{max-width:100%;position:relative;width:100%}.zr__input,.zr__input::-webkit-slider-thumb{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;padding:0}.zr__input{background:transparent;border:0;box-sizing:border-box;height:0;margin:0;outline:none;padding:0;position:absolute;touch-action:none;transition:.2s ease-in-out;width:100%}.zr__input-first{z-index:3}.zr__input-second{z-index:4}.zr__input--active{pointer-events:all;z-index:5}:where(.zr__input--active)::-webkit-slider-thumb{outline:2px solid var(--zd-color-secondary)}.zr__input::-webkit-slider-runnable-track{background:transparent;border:0;cursor:pointer;height:var(--track-height);margin:auto 0;width:100%}.zr__input::-mozr-track{background:transparent;border:0;height:var(--track-height);width:100%}.zr__input::-moz-focus-outer{border:0}.zr__input::-webkit-slider-thumb{cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);pointer-events:all;width:var(--thumb-size)}:where(.zr__input)::-webkit-slider-thumb{background-color:var(--zd-color-primary);border-radius:4px;box-shadow:0 0 4px 0 #000;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.zr__input::-mozr-thumb{cursor:pointer;height:var(--thumb-size);pointer-events:all;width:var(--thumb-size)}:where(.zr__input::-mozr-thumb){background-color:var(--zd-color-primary);border-radius:4px;box-shadow:0 0 4px 0 #000;transition:.2s ease-in-out}.zr__slider{overflow:hidden;position:relative}.zr__slider,.zr__slider-track{height:var(--track-height);width:100%}.zr__slider-track{position:absolute;top:0}:where(.zr__slider-track){background-color:var(--zd-color-primary);border-radius:2px}.zr__slider-track-selected-range{height:var(--track-height);pointer-events:none;position:relative}:where(.zr__slider-track-selected-range){background-color:var(--zd-color-secondary);border-radius:2px}.zr__slider-values-wrapper{align-items:center;display:flex;justify-content:space-between;padding:15px 0 10px}:where(.zr__slider-value){font-weight:500}:where(.zr__slider-first-value),:where(.zr__slider-second-value){color:var(--zd-color-primary);font-size:var(--zd-font-size)}:where(.zr__error-message){background:var(--zd-color-error-transp);border:1px solid var(--zd-color-error);border-radius:var(--zd-radius);color:var(--zd-color-error);margin-top:5px;padding:8px}
|
|
1
|
+
:root{--zd-color-primary:#676767;--zd-color-primary-transp:#67676775;--zd-color-secondary:#0079bd;--zd-color-secondary-transp:#0079bd50;--zd-color-disabled:#ddd;--zd-color-error:#ff4d4f;--zd-color-error-transp:#ffe6e6;--zd-color-background-transp:#ffffffdd;--zd-font-family:Helvetica,Arial,sans-serif;--zd-font-size:14px;--zd-radius:3px;--zd-border:1px solid var(--zd-color-primary);--zd-focus-ring:0 0 0 0.2rem var(--zd-color-secondary-transp);--thumb-size:8px;--track-height:4px}.zr{margin-top:20px}.zr,.zr__container{position:relative}.input-label__wrapper{pointer-events:none;touch-action:none}.zr__label{background:transparent}:where(.zr__label){color:var(--zd-color-primary);font-size:var(--zd-font-size);font-weight:500}.zr__value-indicator{border-radius:4px;display:none;font-size:var(--zd-font-size);font-weight:500;left:50%;margin-bottom:5px;min-height:-moz-fit-content;min-height:fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:2px 8px;position:absolute;transform:translateX(-50%);z-index:6}@media (max-width:599px){.zr__value-indicator{padding:2px 4px}}:where(.zr__value-indicator){background-color:var(--zd-color-primary);font-size:var(--zd-font-size);white-space:nowrap;width:-moz-fit-content;width:fit-content}@media (max-width:599px){:where(.zr__value-indicator){font-size:var(--zd-font-size)}}.zr__value-indicator:before{border-style:solid;border-width:5px 5px 0;content:"";display:block;height:0;left:50%;position:absolute;top:100%;transform:translateX(-50%);width:0}:where(.zr__value-indicator):before{border-color:var(--zd-color-primary) transparent transparent transparent}.zr__value-indicator--active{align-items:center;display:flex;justify-content:space-around}:where(.zr__value-indicator-icon){align-items:center;display:flex;height:40px;justify-content:center;width:40px}:where(.zr__value-indicator-icon) img{height:100%;width:100%}.zr__inputs-wrapper{max-width:100%;position:relative;width:100%}.zr__input,.zr__input::-webkit-slider-thumb{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;padding:0}.zr__input{background:transparent;border:0;box-sizing:border-box;height:0;margin:0;outline:none;padding:0;position:absolute;touch-action:none;transition:.2s ease-in-out;width:100%}.zr__input-first{z-index:3}.zr__input-second{z-index:4}.zr__input--active{pointer-events:all;z-index:5}:where(.zr__input--active)::-webkit-slider-thumb{outline:2px solid var(--zd-color-secondary)}.zr__input::-webkit-slider-runnable-track{background:transparent;border:0;cursor:pointer;height:var(--track-height);margin:auto 0;width:100%}.zr__input::-mozr-track{background:transparent;border:0;height:var(--track-height);width:100%}.zr__input::-moz-focus-outer{border:0}.zr__input::-webkit-slider-thumb{cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);pointer-events:all;width:var(--thumb-size)}:where(.zr__input)::-webkit-slider-thumb{background-color:var(--zd-color-primary);border-radius:4px;box-shadow:0 0 4px 0 #000;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.zr__input::-mozr-thumb{cursor:pointer;height:var(--thumb-size);pointer-events:all;width:var(--thumb-size)}:where(.zr__input::-mozr-thumb){background-color:var(--zd-color-primary);border-radius:4px;box-shadow:0 0 4px 0 #000;transition:.2s ease-in-out}.zr__slider{overflow:hidden;position:relative}.zr__slider,.zr__slider-track{height:var(--track-height);width:100%}.zr__slider-track{position:absolute;top:0}:where(.zr__slider-track){background-color:var(--zd-color-primary);border-radius:2px}.zr__slider-track-selected-range{height:var(--track-height);pointer-events:none;position:relative}:where(.zr__slider-track-selected-range){background-color:var(--zd-color-secondary);border-radius:2px}.zr__slider-values-wrapper{align-items:center;display:flex;justify-content:space-between;padding:15px 0 10px}:where(.zr__slider-value){font-weight:500}:where(.zr__slider-first-value),:where(.zr__slider-second-value){color:var(--zd-color-primary);font-size:var(--zd-font-size)}:where(.zr__error-message){background:var(--zd-color-error-transp);border:1px solid var(--zd-color-error);border-radius:var(--zd-radius);color:var(--zd-color-error);margin-top:5px;padding:8px}
|
|
2
2
|
/*# sourceMappingURL=zrange.css.map */
|
package/dist/zrange.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ZRange.module.scss"],"names":[],"mappings":"AAEA,MACE,0BAA2B,CAC3B,mCAAoC,CACpC,4BAA6B,CAC7B,qCAAsC,CACtC,wBAAyB,CACzB,wBAAyB,CACzB,+BAAgC,CAChC,sCAAuC,CACvC,2CAA8C,CAC9C,mBAAoB,CACpB,eAAgB,CAChB,6CAA8C,CAC9C,
|
|
1
|
+
{"version":3,"sources":["ZRange.module.scss"],"names":[],"mappings":"AAEA,MACE,0BAA2B,CAC3B,mCAAoC,CACpC,4BAA6B,CAC7B,qCAAsC,CACtC,wBAAyB,CACzB,wBAAyB,CACzB,+BAAgC,CAChC,sCAAuC,CACvC,2CAA8C,CAC9C,mBAAoB,CACpB,eAAgB,CAChB,6CAA8C,CAC9C,6DAA8D,CAC9D,gBAAiB,CACjB,kBACF,CAEA,IAEE,eACF,CAEA,mBAJE,iBAMF,CAEA,sBACE,mBAAoB,CACpB,iBACF,CAEA,WACE,sBACF,CAEA,mBAGE,6BAA8B,CAD9B,6BAA8B,CAD9B,eAGF,CAEA,qBAUE,iBAAkB,CATlB,YAAa,CAUb,6BAA8B,CAC9B,eAAgB,CARhB,QAAS,CAIT,iBAAkB,CADlB,2BAAuB,CAAvB,sBAAuB,CADvB,0BAAsB,CAAtB,qBAAsB,CAGtB,eAAgB,CAPhB,iBAAkB,CAGlB,0BAA2B,CAF3B,SAUF,CACA,yBACE,qBACE,eACF,CACF,CAEA,6BAGE,wCAAyC,CACzC,6BAA8B,CAF9B,kBAAmB,CADnB,sBAAkB,CAAlB,iBAIF,CACA,yBACE,6BACE,6BACF,CACF,CAEA,4BASE,kBAAmB,CACnB,sBAA2B,CAT3B,UAAW,CACX,aAAc,CAMd,QAAS,CAHT,QAAS,CAFT,iBAAkB,CAClB,QAAS,CAET,0BAA2B,CAC3B,OAIF,CAEA,oCACE,wEACF,CAEA,6BAEE,kBAAmB,CADnB,YAAa,CAEb,4BACF,CAEA,kCAEE,kBAAmB,CADnB,YAAa,CAIb,WAAY,CAFZ,sBAAuB,CACvB,UAEF,CACA,sCAEE,WAAY,CADZ,UAEF,CAEA,oBAGE,cAAe,CAFf,iBAAkB,CAClB,UAEF,CAEA,4CAIE,uCAAwC,CAFxC,eAAgB,CAChB,uBAAwB,CAExB,SACF,CAEA,WAOE,sBAAuB,CADvB,QAAS,CAET,qBAAsB,CALtB,QAAS,CACT,QAAS,CAKT,YAAa,CAJb,SAAU,CAJV,iBAAkB,CAUlB,iBAAkB,CADlB,0BAA4B,CAR5B,UAUF,CAEA,iBACE,SACF,CAEA,kBACE,SACF,CAEA,mBAEE,kBAAmB,CADnB,SAEF,CAEA,iDACE,2CACF,CAEA,0CAGE,sBAAuB,CACvB,QAAS,CAET,cAAe,CAJf,0BAA2B,CAG3B,aAAc,CAJd,UAMF,CAEA,wBAGE,sBAAuB,CACvB,QAAS,CAFT,0BAA2B,CAD3B,UAIF,CAEA,6BACE,QACF,CAEA,iCAKE,cAAe,CAHf,wBAAyB,CACzB,4DAA+D,CAC/D,kBAAmB,CAHnB,uBAKF,CAEA,yCAGE,wCAAyC,CAFzC,iBAAkB,CAClB,yBAAkC,CAElC,kCAA4B,CAA5B,0BACF,CAEA,wBAIE,cAAe,CAFf,wBAAyB,CACzB,kBAAmB,CAFnB,uBAIF,CAEA,gCAGE,wCAAyC,CAFzC,iBAAkB,CAClB,yBAAkC,CAElC,0BACF,CAEA,YAIE,eAAgB,CAHhB,iBAIF,CAEA,8BAJE,0BAA2B,CAD3B,UAUF,CALA,kBACE,iBAAkB,CAClB,KAGF,CAEA,0BAEE,wCAAyC,CADzC,iBAEF,CAEA,iCAEE,0BAA2B,CAC3B,mBAAoB,CAFpB,iBAGF,CAEA,yCAEE,0CAA2C,CAD3C,iBAEF,CAEA,2BAEE,kBAAmB,CADnB,YAAa,CAEb,6BAA8B,CAC9B,mBACF,CAEA,0BACE,eACF,CAEA,iEAEE,6BAA8B,CAC9B,6BACF,CAEA,2BAME,uCAAwC,CAFxC,sCAAuC,CACvC,8BAA+B,CAF/B,2BAA4B,CAF5B,cAAe,CACf,WAKF","file":"zrange.css","sourcesContent":["@charset \"UTF-8\";\n/* ZDrop.module.scss — override-friendly (fixed) */\n:global(:root) {\n --zd-color-primary: #676767;\n --zd-color-primary-transp: #67676775;\n --zd-color-secondary: #0079bd;\n --zd-color-secondary-transp: #0079bd50;\n --zd-color-disabled: #ddd;\n --zd-color-error: #ff4d4f;\n --zd-color-error-transp: #ffe6e6;\n --zd-color-background-transp: #ffffffdd;\n --zd-font-family: Helvetica, Arial, sans-serif;\n --zd-font-size: 14px;\n --zd-radius: 3px;\n --zd-border: 1px solid var(--zd-color-primary);\n --zd-focus-ring: 0 0 0 0.2rem var(--zd-color-secondary-transp);\n --thumb-size: 8px;\n --track-height: 4px;\n}\n\n.zr {\n position: relative;\n margin-top: 20px;\n}\n\n.zr__container {\n position: relative;\n}\n\n.input-label__wrapper {\n pointer-events: none;\n touch-action: none;\n}\n\n.zr__label {\n background: transparent;\n}\n\n:where(.zr__label) {\n font-weight: 500;\n font-size: var(--zd-font-size);\n color: var(--zd-color-primary);\n}\n\n.zr__value-indicator {\n display: none;\n position: absolute;\n z-index: 6;\n left: 50%;\n transform: translateX(-50%);\n min-width: fit-content;\n min-height: fit-content;\n margin-bottom: 5px;\n padding: 2px 8px;\n border-radius: 4px;\n font-size: var(--zd-font-size);\n font-weight: 500;\n}\n@media (max-width: 599px) {\n .zr__value-indicator {\n padding: 2px 4px;\n }\n}\n\n:where(.zr__value-indicator) {\n width: fit-content;\n white-space: nowrap;\n background-color: var(--zd-color-primary);\n font-size: var(--zd-font-size);\n}\n@media (max-width: 599px) {\n :where(.zr__value-indicator) {\n font-size: var(--zd-font-size);\n }\n}\n\n.zr__value-indicator::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 5px 5px 0 5px;\n}\n\n:where(.zr__value-indicator)::before {\n border-color: var(--zd-color-primary) transparent transparent transparent;\n}\n\n.zr__value-indicator--active {\n display: flex;\n align-items: center;\n justify-content: space-around;\n}\n\n:where(.zr__value-indicator-icon) {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n}\n:where(.zr__value-indicator-icon) img {\n width: 100%;\n height: 100%;\n}\n\n.zr__inputs-wrapper {\n position: relative;\n width: 100%;\n max-width: 100%;\n}\n\n.zr__input,\n.zr__input::-webkit-slider-thumb {\n appearance: none;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n padding: 0;\n}\n\n.zr__input {\n position: absolute;\n width: 100%;\n height: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n box-sizing: border-box;\n outline: none;\n transition: 0.2s ease-in-out;\n touch-action: none;\n}\n\n.zr__input-first {\n z-index: 3;\n}\n\n.zr__input-second {\n z-index: 4;\n}\n\n.zr__input--active {\n z-index: 5;\n pointer-events: all;\n}\n\n:where(.zr__input--active)::-webkit-slider-thumb {\n outline: 2px solid var(--zd-color-secondary);\n}\n\n.zr__input::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--track-height);\n background: transparent;\n border: 0;\n margin: auto 0;\n cursor: pointer;\n}\n\n.zr__input::-mozr-track {\n width: 100%;\n height: var(--track-height);\n background: transparent;\n border: 0;\n}\n\n.zr__input::-moz-focus-outer {\n border: 0;\n}\n\n.zr__input::-webkit-slider-thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);\n pointer-events: all;\n cursor: pointer;\n}\n\n:where(.zr__input)::-webkit-slider-thumb {\n border-radius: 4px;\n box-shadow: 0 0 4px 0 rgb(0, 0, 0);\n background-color: var(--zd-color-primary);\n transition: 0.2s ease-in-out;\n}\n\n.zr__input::-mozr-thumb {\n width: var(--thumb-size);\n height: var(--thumb-size);\n pointer-events: all;\n cursor: pointer;\n}\n\n:where(.zr__input::-mozr-thumb) {\n border-radius: 4px;\n box-shadow: 0 0 4px 0 rgb(0, 0, 0);\n background-color: var(--zd-color-primary);\n transition: 0.2s ease-in-out;\n}\n\n.zr__slider {\n position: relative;\n width: 100%;\n height: var(--track-height);\n overflow: hidden;\n}\n\n.zr__slider-track {\n position: absolute;\n top: 0;\n width: 100%;\n height: var(--track-height);\n}\n\n:where(.zr__slider-track) {\n border-radius: 2px;\n background-color: var(--zd-color-primary);\n}\n\n.zr__slider-track-selected-range {\n position: relative;\n height: var(--track-height);\n pointer-events: none;\n}\n\n:where(.zr__slider-track-selected-range) {\n border-radius: 2px;\n background-color: var(--zd-color-secondary);\n}\n\n.zr__slider-values-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 15px 0 10px 0;\n}\n\n:where(.zr__slider-value) {\n font-weight: 500;\n}\n\n:where(.zr__slider-first-value),\n:where(.zr__slider-second-value) {\n color: var(--zd-color-primary);\n font-size: var(--zd-font-size);\n}\n\n:where(.zr__error-message) {\n margin-top: 5px;\n padding: 8px;\n color: var(--zd-color-error);\n border: 1px solid var(--zd-color-error);\n border-radius: var(--zd-radius);\n background: var(--zd-color-error-transp);\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zcomponents-ui",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.4",
|
|
4
4
|
"description": "Zero-dependency React UI components library with dropdowns and a dual-thumb range slider. Written in TypeScript, styled with SCSS, fully customizable and React Hook Form ready.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|