zcomponents-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Piotr Nowosławski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+# 📘 zComponents — Growing React Component Library
+
+**Lightweight, typed, customizable UI building blocks for React.**
+
+![npm version](<https://img.shields.io/npm/v/zcomponents?color=rgb(25,150,90)&style=flat-square>)
+![npm downloads](https://img.shields.io/npm/dm/zcomponents?color=blue&style=flat-square)
+![license](https://img.shields.io/npm/l/zcomponents?style=flat-square)
+
+---
+
+# 🎯 ZDrop — Dropdown / Select Component
+
+### ✔ Flexible option model
+
+Support for `string`, `number`, and full `object` entries.
+
+### ✔ Full control over rendering
+
+Perfect for tagging systems, chips, advanced UI states.
+
+### ✔ Flexible behavior and layout adaptation
+
+Boundary detection, list height limit, smart direction switching.
+
+### ✔ Custom search logic
+
+Inject your own filter function with full access to options.
+
+---
+
+# 🚀 Installation
+
+```bash
+npm install zcomponents
+```
+
+---
+
+# 📦 Quick Usage
+
+```tsx
+import { ZDrop } from "zcomponents-ui";
+
+const options = ["Hiroshi", "Harper", "Karl"];
+
+export default () => (
+  <ZDrop
+    name="survivor"
+    options={options}
+    placeholder="Pick someone"
+    onChange={(val) => console.log(val)}
+  />
+);
+```
+
+---
+
+# 🔍 Search
+
+### Built-in search
+
+```tsx
+isSearchable;
+```
+
+### Custom search
+
+```tsx
+searchFilter={({ options, currentValue, labelKey }) =>
+  options.filter((o) =>
+    String(o[labelKey]).toLowerCase().includes(currentValue.toLowerCase())
+  )
+}
+```
+
+---
+
+# 🧠 Object Options Example
+
+```tsx
+<ZDrop
+  name="survivor"
+  options={[{ id: 1, name: "Hiroshi" }]}
+  valueKey="id" // default: "value"
+  labelKey="name" // default: "label"
+  shouldReturnObjectOnChange
+/>
+```
+
+---
+
+# 🎨 Customize Everything
+
+```tsx
+optionRenderer={(option, isSelected) => (
+  <div className={isSelected ? "selected" : ""}>{option}</div>
+)}
+```
+
+```tsx
+valueRenderer={({option, onRemove }) => (
+  <span onClick={onRemove} style={{ marginRight: 8 }}>
+    ❌ {option}
+  </span>
+)};
+```
+
+---
+
+# 📚 Props (Short)
+
+```ts
+valueKey?: string; // default: "value"
+labelKey?: string; // default: "label"
+isSearchable?: boolean;
+searchFilter?: SearchFilter;
+isMultiple?: boolean;
+listMaxHeightLimiter?: number;
+```
+
+---
+
+# 📄 License
+
+MIT © Piotr Nowosławski

package/dist/index.cjs.css

@@ -0,0 +1,2 @@
+:root{--zd-color-primary:#676767;--zd-color-primary-transp:#67676775;--zd-color-secondary:#0079bd;--zd-color-secondary-transp:#0079bd50;--zd-color-disabled:#ddd;--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)}:where(.ZDrop-module_container__FMb26) *{box-sizing:border-box;margin:0;padding:0}:where(.ZDrop-module_container__FMb26){font-family:var(--zd-font-family);font-size:var(--zd-font-size);height:-moz-fit-content;height:fit-content;max-height:-moz-fit-content;max-height:fit-content;max-width:500px;min-width:200px;position:relative;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_label__WDDr6){color:var(--zd-color-primary);display:block;margin:0 0 5px 10px}:where(.ZDrop-module_inputField__QPEyq){border:var(--zd-border);border-radius:var(--zd-radius);display:flex;min-height:35px;overflow-y:auto;padding-left:10px;position:relative;transition:border .15s ease-in-out,box-shadow .15s ease-in-out}:where(.ZDrop-module_inputField__QPEyq)>input{cursor:pointer}:where(.ZDrop-module_inputField__QPEyq):hover{border-color:var(--zd-color-secondary)}:where(.ZDrop-module_inputField__QPEyq):focus-within{border-color:var(--zd-color-secondary);box-shadow:var(--zd-focus-ring)}:where(.ZDrop-module_inputField__QPEyq):focus-within>input{cursor:text}:where(.ZDrop-module_inputField--multiple__ceTgA){padding-left:4px}:where(.ZDrop-module_inputField--disabled__Iocv1){background:var(--zd-color-disabled);cursor:default;pointer-events:none}:where(.ZDrop-module_input__k-MBA){background:transparent;border:none;border-radius:var(--zd-radius);color:var(--zd-color-primary);min-height:100%;padding-right:10px;width:100%}:where(.ZDrop-module_input__k-MBA):focus{outline:none}:where(.ZDrop-module_input__k-MBA):disabled{background:var(--zd-color-disabled)}:where(.ZDrop-module_input__k-MBA)::-moz-placeholder{color:var(--zd-color-primary-transp)}:where(.ZDrop-module_input__k-MBA)::placeholder{color:var(--zd-color-primary-transp)}:where(.ZDrop-module_inputSingle__zZmCf){align-items:center;display:flex;height:auto;max-width:100%;min-height:35px;overflow:hidden;white-space:nowrap}:where(.ZDrop-module_inputSingleValue__pV1vr){border:var(--zd-border);border-radius:var(--zd-radius);height:100%;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_inputSingleValueRenderer__hQSCH){align-items:center;display:flex}:where(.ZDrop-module_inputSingleSearch__oIk6K){align-items:center;background:transparent;border:none;color:var(--zd-color-primary);display:flex;flex:1;line-height:35px;max-width:100%;min-height:35px;overflow:hidden;white-space:nowrap}:where(.ZDrop-module_inputSingleSearch__oIk6K):focus{outline:none}:where(.ZDrop-module_inputMultiple__oF9wt){align-items:center;display:flex;flex-wrap:wrap;height:auto;list-style:none;margin-right:5px;max-width:calc(100% - 47px)}:where(.ZDrop-module_inputMultipleValue__lSYME){align-items:center;background:var(--zd-color-disabled);border-radius:var(--zd-radius);color:var(--zd-color-primary);cursor:pointer;display:flex;margin:2px;min-width:-moz-fit-content;min-width:fit-content;padding:3px 6px;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_inputMultipleValue__lSYME) span{display:flex;min-width:-moz-fit-content;min-width:fit-content;white-space:nowrap;width:-moz-fit-content;width:fit-content}:where(.ZDrop-module_inputMultipleValueRemoveBtn__gbFkS){align-items:center;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;margin-left:3px;min-width:10px;position:relative;width:10px}:where(.ZDrop-module_inputMultipleValueRemoveBtn__gbFkS):focus{outline:none}:where(.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS){align-items:center;display:flex;height:10px;justify-content:center;position:relative;width:10px}:where(.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS):after,:where(.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS):before{background-color:var(--zd-color-primary);content:"";height:10px;position:absolute;width:2px}:where(.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS):before{transform:rotate(45deg)}:where(.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS):after{transform:rotate(-45deg)}:where(.ZDrop-module_inputMultipleValueRemoveBtn__gbFkS):focus>.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS:after,:where(.ZDrop-module_inputMultipleValueRemoveBtn__gbFkS):focus>.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS:before,:where(.ZDrop-module_inputMultipleValueRemoveBtn__gbFkS):hover>.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS:after,:where(.ZDrop-module_inputMultipleValueRemoveBtn__gbFkS):hover>.ZDrop-module_inputMultipleValueRemoveBtnIcon__i4VBS:before{background-color:var(--zd-color-secondary)}:where(.ZDrop-module_inputMultipleSearchWrapper__vmS7x){flex:auto;min-width:100%}:where(.ZDrop-module_inputMultipleSearch__-lQrC){background:transparent;border:none;color:var(--zd-color-primary);min-width:40px;padding:3px;width:100%}:where(.ZDrop-module_inputMultipleSearch__-lQrC):focus{outline:none}:where(.ZDrop-module_inputMultiplePlaceholder__GbBo7){padding-left:6px}:where(.ZDrop-module_inputClearBtnWrapper__S3uiC){align-items:center;display:flex;justify-content:center;position:relative}:where(.ZDrop-module_inputClearBtn__JY5Gm){background:none;border:none;max-height:-moz-fit-content;max-height:fit-content}:where(.ZDrop-module_inputClearBtnIcon__PXRiJ){cursor:pointer;display:block;height:15px;max-width:14px;min-width:14px;position:relative}:where(.ZDrop-module_inputClearBtnIcon__PXRiJ):after,:where(.ZDrop-module_inputClearBtnIcon__PXRiJ):before{background:var(--zd-color-primary);content:"";height:15px;left:6px;position:absolute;width:2px}:where(.ZDrop-module_inputClearBtnIcon__PXRiJ):before{transform:rotate(45deg)}:where(.ZDrop-module_inputClearBtnIcon__PXRiJ):after{transform:rotate(-45deg)}:where(.ZDrop-module_inputClearBtnIcon__PXRiJ:hover):after,:where(.ZDrop-module_inputClearBtnIcon__PXRiJ:hover):before{background:var(--zd-color-secondary)}:where(.ZDrop-module_expandToggle__zJYI1){align-items:center;display:flex;min-width:-moz-fit-content;min-width:fit-content;padding:0 10px}:where(.ZDrop-module_expandToggleIcon__63Yog){border:solid var(--zd-color-primary);border-width:0 2px 2px 0;cursor:pointer;padding:4px;transform:rotate(135deg);transition:.3s}:where(.ZDrop-module_expandToggleIcon--active__h2I5u){color:var(--zd-color-secondary);transform:translateY(-30%) rotate(45deg)}:where(.ZDrop-module_expandToggleIcon__63Yog):hover{border-color:var(--zd-color-secondary)}:where(.ZDrop-module_listWrapper__FGHRj){min-width:100%}:where(.ZDrop-module_list__162r4){border:var(--zd-border);border-radius:var(--zd-radius);margin-top:5px;max-height:100%;overflow:auto;width:100%}:where(.ZDrop-module_option__ZfKFl,.ZDrop-module_noData__-70Uu){color:var(--zd-color-primary);list-style:none;padding:10px 8px}:where(.ZDrop-module_option__ZfKFl){cursor:pointer}:where(.ZDrop-module_option__ZfKFl):focus{background:var(--zd-color-secondary-transp);outline:none}:where(.ZDrop-module_option__ZfKFl):hover{font-weight:700}:where(.ZDrop-module_option--active__OXcv5){color:var(--zd-color-secondary)}
+/*# sourceMappingURL=index.cjs.css.map */

package/dist/index.cjs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ZDrop.module.scss"],"names":[],"mappings":"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","file":"index.cjs.css","sourcesContent":["@charset \"UTF-8\";\n/* ZDrop.module.scss — „override-friendly” */\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-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}\n\n:where(.container) * {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n:where(.container) {\n  position: relative;\n  width: fit-content;\n  max-width: 500px;\n  min-width: 200px;\n  height: fit-content;\n  max-height: fit-content;\n  font-family: var(--zd-font-family);\n  font-size: var(--zd-font-size);\n}\n\n:where(.label) {\n  display: block;\n  margin: 0 0 5px 10px;\n  color: var(--zd-color-primary);\n}\n\n:where(.inputField) {\n  position: relative;\n  display: flex;\n  min-height: 35px;\n  border: var(--zd-border);\n  border-radius: var(--zd-radius);\n  padding-left: 10px;\n  overflow-y: auto;\n  transition: border 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n:where(.inputField) > input {\n  cursor: pointer;\n}\n\n:where(.inputField):hover {\n  border-color: var(--zd-color-secondary);\n}\n\n:where(.inputField):focus-within {\n  border-color: var(--zd-color-secondary);\n  box-shadow: var(--zd-focus-ring);\n}\n\n:where(.inputField):focus-within > input {\n  cursor: text;\n}\n\n:where(.inputField--multiple) {\n  padding-left: 4px;\n}\n\n:where(.inputField--disabled) {\n  background: var(--zd-color-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n:where(.input) {\n  width: 100%;\n  min-height: 100%;\n  padding-right: 10px;\n  border: none;\n  border-radius: var(--zd-radius);\n  color: var(--zd-color-primary);\n  background: transparent;\n}\n\n:where(.input):focus {\n  outline: none;\n}\n\n:where(.input):disabled {\n  background: var(--zd-color-disabled);\n}\n\n:where(.input)::placeholder {\n  color: var(--zd-color-primary-transp);\n}\n\n:where(.inputSingle) {\n  display: flex;\n  align-items: center;\n  max-width: 100%;\n  min-height: 35px;\n  white-space: nowrap;\n  overflow: hidden;\n  height: auto;\n}\n\n:where(.inputSingleValue) {\n  width: fit-content;\n  height: 100%;\n  border: var(--zd-border);\n  border-radius: var(--zd-radius);\n}\n\n:where(.inputSingleValueRenderer) {\n  display: flex;\n  align-items: center;\n}\n\n:where(.inputSingleSearch) {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  max-width: 100%;\n  min-height: 35px;\n  line-height: 35px;\n  overflow: hidden;\n  white-space: nowrap;\n  color: var(--zd-color-primary);\n  border: none;\n  background: transparent;\n}\n\n:where(.inputSingleSearch):focus {\n  outline: none;\n}\n\n:where(.inputMultiple) {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: calc(100% - 47px);\n  align-items: center;\n  margin-right: 5px;\n  list-style: none;\n  height: auto;\n}\n\n:where(.inputMultipleValue) {\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  min-width: fit-content;\n  margin: 2px;\n  padding: 3px 6px;\n  color: var(--zd-color-primary);\n  border-radius: var(--zd-radius);\n  background: var(--zd-color-disabled);\n  cursor: pointer;\n}\n:where(.inputMultipleValue) span {\n  display: flex;\n  width: fit-content;\n  min-width: fit-content;\n  white-space: nowrap;\n}\n\n:where(.inputMultipleValueRemoveBtn) {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 10px;\n  min-width: 10px;\n  margin-left: 3px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n:where(.inputMultipleValueRemoveBtn):focus {\n  outline: none;\n}\n\n:where(.inputMultipleValueRemoveBtnIcon) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 10px;\n  height: 10px;\n}\n\n:where(.inputMultipleValueRemoveBtnIcon)::before,\n:where(.inputMultipleValueRemoveBtnIcon)::after {\n  position: absolute;\n  content: \"\";\n  height: 10px;\n  width: 2px;\n  background-color: var(--zd-color-primary);\n}\n\n:where(.inputMultipleValueRemoveBtnIcon)::before {\n  transform: rotate(45deg);\n}\n\n:where(.inputMultipleValueRemoveBtnIcon)::after {\n  transform: rotate(-45deg);\n}\n\n:where(.inputMultipleValueRemoveBtn):hover > .inputMultipleValueRemoveBtnIcon::before,\n:where(.inputMultipleValueRemoveBtn):hover > .inputMultipleValueRemoveBtnIcon::after,\n:where(.inputMultipleValueRemoveBtn):focus > .inputMultipleValueRemoveBtnIcon::after,\n:where(.inputMultipleValueRemoveBtn):focus > .inputMultipleValueRemoveBtnIcon::before {\n  background-color: var(--zd-color-secondary);\n}\n\n:where(.inputMultipleSearchWrapper) {\n  min-width: 100%;\n  flex: auto;\n}\n\n:where(.inputMultipleSearch) {\n  min-width: 40px;\n  width: 100%;\n  padding: 3px;\n  color: var(--zd-color-primary);\n  border: none;\n  background: transparent;\n}\n\n:where(.inputMultipleSearch):focus {\n  outline: none;\n}\n\n:where(.inputMultiplePlaceholder) {\n  padding-left: 6px;\n}\n\n:where(.inputClearBtnWrapper) {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:where(.inputClearBtn) {\n  max-height: fit-content;\n  background: none;\n  border: none;\n}\n\n:where(.inputClearBtnIcon) {\n  display: block;\n  position: relative;\n  min-width: 14px;\n  max-width: 14px;\n  height: 15px;\n  cursor: pointer;\n}\n\n:where(.inputClearBtnIcon)::before,\n:where(.inputClearBtnIcon)::after {\n  position: absolute;\n  left: 6px;\n  content: \"\";\n  height: 15px;\n  width: 2px;\n  background: var(--zd-color-primary);\n}\n\n:where(.inputClearBtnIcon)::before {\n  transform: rotate(45deg);\n}\n\n:where(.inputClearBtnIcon)::after {\n  transform: rotate(-45deg);\n}\n\n:where(.inputClearBtnIcon:hover)::before,\n:where(.inputClearBtnIcon:hover)::after {\n  background: var(--zd-color-secondary);\n}\n\n:where(.expandToggle) {\n  display: flex;\n  min-width: fit-content;\n  align-items: center;\n  padding: 0 10px;\n}\n\n:where(.expandToggleIcon) {\n  transform: rotate(135deg);\n  border: solid var(--zd-color-primary);\n  border-width: 0 2px 2px 0;\n  padding: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n\n:where(.expandToggleIcon--active) {\n  transform: translateY(-30%) rotate(45deg);\n  color: var(--zd-color-secondary);\n}\n\n:where(.expandToggleIcon):hover {\n  border-color: var(--zd-color-secondary);\n}\n\n:where(.listWrapper) {\n  min-width: 100%;\n}\n\n:where(.list) {\n  width: 100%;\n  max-height: 100%;\n  margin-top: 5px;\n  border-radius: var(--zd-radius);\n  border: var(--zd-border);\n  overflow: auto;\n}\n\n:where(.option, .noData) {\n  padding: 10px 8px;\n  color: var(--zd-color-primary);\n  list-style: none;\n}\n\n:where(.option) {\n  cursor: pointer;\n}\n\n:where(.option):focus {\n  outline: none;\n  background: var(--zd-color-secondary-transp);\n}\n\n:where(.option):hover {\n  font-weight: 700;\n}\n\n:where(.option--active) {\n  color: var(--zd-color-secondary);\n}"]}