@popovandrii/ui-elements 0.0.1

package/LICENSE

@@ -0,0 +1,9 @@
+
+
+Copyright 2025  Andrii Popov autoxarkov@gmail.com
+
+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,29 @@
+# UI elements
+
+TypeScript-based NPM plugin.
+The plugin includes interface elements with specific properties. 
+Currently implemented:
+- Spin-Box This is a field with two buttons. Provides increment and decrement of numbers
+
+# Information for Developers
+```sh
+git clone git@gitlab.com:AndreyPopov/ui-elements.git && cd ui-elements
+```
+
+```sh
+docker compose up -d --build
+```
+
+```sh
+docker compose exec vite-dev sh
+```
+
+```sh
+$ npm install
+$ npm run build # Compile the project into the ./dist folder.
+$ npm run dev # Work on the project 
+$ npm run lint  
+$ npm run format
+```
+
+The './playground' folder for viewing in a browser

package/dist/SpinBox.d.ts

@@ -0,0 +1,11 @@
+interface SelectorMap {
+    main: string;
+    disabledBtn: string;
+}
+export declare class SpinBox {
+    #private;
+    private selectors;
+    private spinBoxes;
+    constructor(selectors?: Partial<SelectorMap>);
+}
+export {};

package/dist/SpinBox.js

@@ -0,0 +1,195 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _SpinBox_instances, _SpinBox_state, _SpinBox_event;
+export class SpinBox {
+    constructor(selectors = {}) {
+        _SpinBox_instances.add(this);
+        Object.defineProperty(this, "selectors", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "spinBoxes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        _SpinBox_state.set(this, (inputNumber, down, up, min = 0, max = 0) => {
+            if (inputNumber == min || inputNumber < min) {
+                down.classList.add(this.selectors.disabledBtn);
+                down.disabled = true;
+            }
+            else {
+                down.classList.remove(this.selectors.disabledBtn);
+                down.disabled = false;
+            }
+            if (inputNumber == max || inputNumber > max) {
+                up.classList.add(this.selectors.disabledBtn);
+                up.disabled = true;
+            }
+            else {
+                up.classList.remove(this.selectors.disabledBtn);
+                up.disabled = false;
+            }
+        });
+        const defaultSelectors = {
+            main: "spin-box",
+            disabledBtn: "disabled",
+        };
+        this.selectors = { ...defaultSelectors, ...selectors };
+        this.spinBoxes = document.querySelectorAll(`.${this.selectors.main}`);
+        __classPrivateFieldGet(this, _SpinBox_instances, "m", _SpinBox_event).call(this);
+    }
+}
+_SpinBox_state = new WeakMap(), _SpinBox_instances = new WeakSet(), _SpinBox_event = function _SpinBox_event() {
+    this.spinBoxes.forEach((e) => {
+        const btnDown = e.firstElementChild;
+        const input = e.querySelector("input");
+        const btnUp = e.lastElementChild;
+        const step = Number(e.dataset.step);
+        const min = Number(e.dataset.min);
+        const max = Number(e.dataset.max);
+        const updateAria = (val) => {
+            input.setAttribute("aria-valuenow", String(val));
+            input.setAttribute("aria-valuetext", `${val} items`);
+        };
+        if (Number(input.value) <= min)
+            input.value = min.toFixed(step);
+        if (Number(input.value) >= max)
+            input.value = max.toFixed(step);
+        if (min)
+            input.setAttribute("aria-valuemin", min.toFixed(step));
+        if (max)
+            input.setAttribute("aria-valuemax", max.toFixed(step));
+        __classPrivateFieldGet(this, _SpinBox_state, "f").call(this, Number(input.value), btnDown, btnUp, min, max);
+        updateAria(min);
+        let timerId = null;
+        const increment = (speed = 1) => {
+            input.value = String(Math.abs(Number(input.value)));
+            let val = parseFloat(input.value) || 0;
+            val = val + (1 * speed) / Math.pow(10, step);
+            if (val > max)
+                val = max;
+            input.value = val.toFixed(step);
+            __classPrivateFieldGet(this, _SpinBox_state, "f").call(this, Number(input.value), btnDown, btnUp, min, max);
+            updateAria(val);
+        };
+        const decrement = (speed = 1) => {
+            input.value = String(Math.abs(Number(input.value)));
+            let val = parseFloat(input.value) || 0;
+            val = val - (1 * speed) / Math.pow(10, step);
+            if (val < min)
+                val = min;
+            input.value = val.toFixed(step);
+            __classPrivateFieldGet(this, _SpinBox_state, "f").call(this, Number(input.value), btnDown, btnUp, min, max);
+            updateAria(val);
+        };
+        const startTimer = (action, ms = 150) => {
+            if (timerId !== null)
+                return;
+            timerId = window.setInterval(action, ms);
+        };
+        const stopTimer = () => {
+            if (timerId !== null) {
+                clearInterval(timerId);
+                timerId = null;
+            }
+        };
+        // hold
+        btnUp.addEventListener("mousedown", (e) => {
+            const speed = e.shiftKey ? 3 : 1;
+            startTimer(() => increment(speed));
+        });
+        btnUp.addEventListener("touchstart", () => startTimer(increment));
+        // lost
+        ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach((event) => {
+            btnUp.addEventListener(event, stopTimer);
+        });
+        // once click
+        btnUp.addEventListener("click", (e) => {
+            const speed = e.shiftKey ? 3 : 1;
+            // block when holding
+            if (timerId === null)
+                increment(speed);
+        });
+        btnDown.addEventListener("click", (e) => {
+            const speed = e.shiftKey ? 3 : 1;
+            if (timerId === null)
+                decrement(speed);
+        });
+        btnDown.addEventListener("mousedown", (e) => {
+            const speed = e.shiftKey ? 3 : 1;
+            startTimer(() => decrement(speed), 100);
+        });
+        btnDown.addEventListener("touchstart", () => startTimer(decrement, 100));
+        ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach((event) => {
+            btnDown.addEventListener(event, stopTimer);
+        });
+        input.addEventListener("keydown", (e) => {
+            const key = e.key;
+            const speed = e.shiftKey ? 3 : 1;
+            const allowedKeys = [
+                "Backspace",
+                "Delete",
+                "ArrowLeft",
+                "ArrowRight",
+                "Tab",
+                "Enter",
+                "Home",
+                "End",
+            ];
+            if (allowedKeys.includes(key) ||
+                ((e.ctrlKey || e.metaKey) &&
+                    ["a", "c", "v", "x"].includes(key.toLowerCase()))) {
+                return;
+            }
+            if (["e", "+", "-"].includes(key)) {
+                e.preventDefault();
+                return;
+            }
+            if (key === "ArrowUp" || key === "ArrowDown") {
+                e.preventDefault();
+                const val = parseFloat(input.value) || 0;
+                const stepSize = (1 * speed) / Math.pow(10, step);
+                let newVal = key === "ArrowUp" ? val + stepSize : val - stepSize;
+                if (newVal < min)
+                    newVal = min;
+                input.value = newVal.toFixed(step);
+                if (Number(input.value) < min)
+                    input.value = min.toFixed(step);
+                if (Number(input.value) > max)
+                    input.value = max.toFixed(step);
+                __classPrivateFieldGet(this, _SpinBox_state, "f").call(this, Number(input.value), btnDown, btnUp, min, max);
+                return;
+            }
+            const normalizedKey = key === "," ? "." : key;
+            const isNumeric = /^[0-9]$/.test(normalizedKey);
+            const isDot = normalizedKey === ".";
+            const alreadyHasDot = input.value.includes(".");
+            if ((step === 0 && !isNumeric) ||
+                (step > 0 && !(isNumeric || isDot)) ||
+                (isDot && alreadyHasDot)) {
+                e.preventDefault();
+            }
+        });
+        input.addEventListener("keyup", () => {
+            if (Number(input.value) < min)
+                input.value = min.toFixed(step);
+            if (Number(input.value) > max)
+                input.value = max.toFixed(step);
+            __classPrivateFieldGet(this, _SpinBox_state, "f").call(this, Number(input.value), btnDown, btnUp, min, max);
+        });
+        input.addEventListener("change", () => {
+            if (Number(input.value) < min)
+                input.value = min.toFixed(step);
+            if (Number(input.value) > max)
+                input.value = max.toFixed(step);
+            __classPrivateFieldGet(this, _SpinBox_state, "f").call(this, Number(input.value), btnDown, btnUp, min, max);
+        });
+    });
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { SpinBox } from "./SpinBox";
+import "./scss/style.scss";

package/dist/index.es.js

@@ -0,0 +1,102 @@
+var C = Object.defineProperty;
+var K = (r) => {
+  throw TypeError(r);
+};
+var I = (r, t, a) => t in r ? C(r, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : r[t] = a;
+var E = (r, t, a) => I(r, typeof t != "symbol" ? t + "" : t, a), D = (r, t, a) => t.has(r) || K("Cannot " + a);
+var v = (r, t, a) => (D(r, t, "read from private field"), a ? a.call(r) : t.get(r)), w = (r, t, a) => t.has(r) ? K("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, a);
+var S = (r, t, a) => (D(r, t, "access private method"), a);
+var d, f, k;
+class $ {
+  constructor(t = {}) {
+    w(this, f);
+    E(this, "selectors");
+    E(this, "spinBoxes");
+    w(this, d, (t, a, e, u = 0, l = 0) => {
+      t == u || t < u ? (a.classList.add(this.selectors.disabledBtn), a.disabled = !0) : (a.classList.remove(this.selectors.disabledBtn), a.disabled = !1), t == l || t > l ? (e.classList.add(this.selectors.disabledBtn), e.disabled = !0) : (e.classList.remove(this.selectors.disabledBtn), e.disabled = !1);
+    });
+    const a = {
+      main: "spin-box",
+      disabledBtn: "disabled"
+    };
+    this.selectors = { ...a, ...t }, this.spinBoxes = document.querySelectorAll(
+      `.${this.selectors.main}`
+    ), S(this, f, k).call(this);
+  }
+}
+d = new WeakMap(), f = new WeakSet(), k = function() {
+  this.spinBoxes.forEach((t) => {
+    const a = t.firstElementChild, e = t.querySelector("input"), u = t.lastElementChild, l = Number(t.dataset.step), n = Number(t.dataset.min), o = Number(t.dataset.max), h = (i) => {
+      e.setAttribute("aria-valuenow", String(i)), e.setAttribute("aria-valuetext", `${i} items`);
+    };
+    Number(e.value) <= n && (e.value = n.toFixed(l)), Number(e.value) >= o && (e.value = o.toFixed(l)), n && e.setAttribute("aria-valuemin", n.toFixed(l)), o && e.setAttribute("aria-valuemax", o.toFixed(l)), v(this, d).call(this, Number(e.value), a, u, n, o), h(n);
+    let c = null;
+    const b = (i = 1) => {
+      e.value = String(Math.abs(Number(e.value)));
+      let s = parseFloat(e.value) || 0;
+      s = s + 1 * i / Math.pow(10, l), s > o && (s = o), e.value = s.toFixed(l), v(this, d).call(this, Number(e.value), a, u, n, o), h(s);
+    }, p = (i = 1) => {
+      e.value = String(Math.abs(Number(e.value)));
+      let s = parseFloat(e.value) || 0;
+      s = s - 1 * i / Math.pow(10, l), s < n && (s = n), e.value = s.toFixed(l), v(this, d).call(this, Number(e.value), a, u, n, o), h(s);
+    }, m = (i, s = 150) => {
+      c === null && (c = window.setInterval(i, s));
+    }, y = () => {
+      c !== null && (clearInterval(c), c = null);
+    };
+    u.addEventListener("mousedown", (i) => {
+      const s = i.shiftKey ? 3 : 1;
+      m(() => b(s));
+    }), u.addEventListener("touchstart", () => m(b)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (i) => {
+        u.addEventListener(i, y);
+      }
+    ), u.addEventListener("click", (i) => {
+      const s = i.shiftKey ? 3 : 1;
+      c === null && b(s);
+    }), a.addEventListener("click", (i) => {
+      const s = i.shiftKey ? 3 : 1;
+      c === null && p(s);
+    }), a.addEventListener("mousedown", (i) => {
+      const s = i.shiftKey ? 3 : 1;
+      m(() => p(s), 100);
+    }), a.addEventListener("touchstart", () => m(p, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (i) => {
+        a.addEventListener(i, y);
+      }
+    ), e.addEventListener("keydown", (i) => {
+      const s = i.key, g = i.shiftKey ? 3 : 1;
+      if ([
+        "Backspace",
+        "Delete",
+        "ArrowLeft",
+        "ArrowRight",
+        "Tab",
+        "Enter",
+        "Home",
+        "End"
+      ].includes(s) || (i.ctrlKey || i.metaKey) && ["a", "c", "v", "x"].includes(s.toLowerCase()))
+        return;
+      if (["e", "+", "-"].includes(s)) {
+        i.preventDefault();
+        return;
+      }
+      if (s === "ArrowUp" || s === "ArrowDown") {
+        i.preventDefault();
+        const A = parseFloat(e.value) || 0, B = 1 * g / Math.pow(10, l);
+        let x = s === "ArrowUp" ? A + B : A - B;
+        x < n && (x = n), e.value = x.toFixed(l), Number(e.value) < n && (e.value = n.toFixed(l)), Number(e.value) > o && (e.value = o.toFixed(l)), v(this, d).call(this, Number(e.value), a, u, n, o);
+        return;
+      }
+      const L = s === "," ? "." : s, N = /^[0-9]$/.test(L), F = L === ".", M = e.value.includes(".");
+      (l === 0 && !N || l > 0 && !(N || F) || F && M) && i.preventDefault();
+    }), e.addEventListener("keyup", () => {
+      Number(e.value) < n && (e.value = n.toFixed(l)), Number(e.value) > o && (e.value = o.toFixed(l)), v(this, d).call(this, Number(e.value), a, u, n, o);
+    }), e.addEventListener("change", () => {
+      Number(e.value) < n && (e.value = n.toFixed(l)), Number(e.value) > o && (e.value = o.toFixed(l)), v(this, d).call(this, Number(e.value), a, u, n, o);
+    });
+  });
+};
+export {
+  $ as SpinBox
+};

package/dist/index.js

@@ -0,0 +1,2 @@
+export { SpinBox } from "./SpinBox";
+import "./scss/style.scss";

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i["Ui Elements"]={}))})(this,function(i){"use strict";var U=Object.defineProperty;var K=i=>{throw TypeError(i)};var C=(i,a,l)=>a in i?U(i,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):i[a]=l;var E=(i,a,l)=>C(i,typeof a!="symbol"?a+"":a,l),D=(i,a,l)=>a.has(i)||K("Cannot "+l);var f=(i,a,l)=>(D(i,a,"read from private field"),l?l.call(i):a.get(i)),w=(i,a,l)=>a.has(i)?K("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(i):a.set(i,l);var g=(i,a,l)=>(D(i,a,"access private method"),l);var l,m,k;class a{constructor(d={}){w(this,m);E(this,"selectors");E(this,"spinBoxes");w(this,l,(d,r,e,c=0,n=0)=>{d==c||d<c?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1),d==n||d>n?(e.classList.add(this.selectors.disabledBtn),e.disabled=!0):(e.classList.remove(this.selectors.disabledBtn),e.disabled=!1)});const r={main:"spin-box",disabledBtn:"disabled"};this.selectors={...r,...d},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),g(this,m,k).call(this)}}l=new WeakMap,m=new WeakSet,k=function(){this.spinBoxes.forEach(d=>{const r=d.firstElementChild,e=d.querySelector("input"),c=d.lastElementChild,n=Number(d.dataset.step),o=Number(d.dataset.min),u=Number(d.dataset.max),b=s=>{e.setAttribute("aria-valuenow",String(s)),e.setAttribute("aria-valuetext",`${s} items`)};Number(e.value)<=o&&(e.value=o.toFixed(n)),Number(e.value)>=u&&(e.value=u.toFixed(n)),o&&e.setAttribute("aria-valuemin",o.toFixed(n)),u&&e.setAttribute("aria-valuemax",u.toFixed(n)),f(this,l).call(this,Number(e.value),r,c,o,u),b(o);let v=null;const p=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t+1*s/Math.pow(10,n),t>u&&(t=u),e.value=t.toFixed(n),f(this,l).call(this,Number(e.value),r,c,o,u),b(t)},x=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t-1*s/Math.pow(10,n),t<o&&(t=o),e.value=t.toFixed(n),f(this,l).call(this,Number(e.value),r,c,o,u),b(t)},h=(s,t=150)=>{v===null&&(v=window.setInterval(s,t))},L=()=>{v!==null&&(clearInterval(v),v=null)};c.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;h(()=>p(t))}),c.addEventListener("touchstart",()=>h(p)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{c.addEventListener(s,L)}),c.addEventListener("click",s=>{const t=s.shiftKey?3:1;v===null&&p(t)}),r.addEventListener("click",s=>{const t=s.shiftKey?3:1;v===null&&x(t)}),r.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;h(()=>x(t),100)}),r.addEventListener("touchstart",()=>h(x,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{r.addEventListener(s,L)}),e.addEventListener("keydown",s=>{const t=s.key,M=s.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(t)||(s.ctrlKey||s.metaKey)&&["a","c","v","x"].includes(t.toLowerCase()))return;if(["e","+","-"].includes(t)){s.preventDefault();return}if(t==="ArrowUp"||t==="ArrowDown"){s.preventDefault();const B=parseFloat(e.value)||0,S=1*M/Math.pow(10,n);let y=t==="ArrowUp"?B+S:B-S;y<o&&(y=o),e.value=y.toFixed(n),Number(e.value)<o&&(e.value=o.toFixed(n)),Number(e.value)>u&&(e.value=u.toFixed(n)),f(this,l).call(this,Number(e.value),r,c,o,u);return}const N=t===","?".":t,F=/^[0-9]$/.test(N),A=N===".",T=e.value.includes(".");(n===0&&!F||n>0&&!(F||A)||A&&T)&&s.preventDefault()}),e.addEventListener("keyup",()=>{Number(e.value)<o&&(e.value=o.toFixed(n)),Number(e.value)>u&&(e.value=u.toFixed(n)),f(this,l).call(this,Number(e.value),r,c,o,u)}),e.addEventListener("change",()=>{Number(e.value)<o&&(e.value=o.toFixed(n)),Number(e.value)>u&&(e.value=u.toFixed(n)),f(this,l).call(this,Number(e.value),r,c,o,u)})})},i.SpinBox=a,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+.spin-box{position:relative;display:grid;grid-template-columns:min-content 1fr min-content;align-items:center;width:13rem;height:2.5rem;-webkit-user-select:none;user-select:none;border:1px solid var(--c-g-500);border-radius:.5rem;background-color:var(--c-g-500)}.spin-box>input{border:none;height:100%;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0}.spin-box>input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.spin-box__txt{font-weight:400}.spin-box>button{color:var(--c-g-900);display:flex;align-items:center;justify-content:center;border:none;height:100%;background-color:var(--c-g-300);cursor:pointer;font-size:2rem;width:3rem}.spin-box>button:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.spin-box>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.spin-box>button:first-child{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.spin-box button:last-child{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.spin-box.radius-none{border-radius:0}.spin-box.radius-none>button{border-radius:0}.spin-box.sm{height:2rem;width:10rem}.spin-box.sm>input,.spin-box.sm>button{font-size:1rem}.spin-box.sm>button{width:2rem}.spin-box.lg{height:3.5rem;width:16rem}.spin-box.lg>input,.spin-box.lg>button{font-size:2rem}.spin-box.lg>button{width:3.5rem}.spin-box.danger{background-color:var(--c-d-500);border-color:var(--c-d-500)}.spin-box.danger>input{background-color:var(--c-d-50);color:var(--c-d-700)}.spin-box.danger>input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.spin-box.danger>button{color:var(--c-d-500);background-color:var(--c-d-300);border-color:var(--c-d-500)}.spin-box.danger>button:hover{color:var(--c-d-300);background-color:var(--c-d-500)}.spin-box.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-300)}.spin-box.info{background-color:var(--c-i-500);border-color:var(--c-i-500)}.spin-box.info>input{background-color:var(--c-i-50);color:var(--c-i-700)}.spin-box.info>input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.spin-box.info>button{color:var(--c-i-500);background-color:var(--c-i-300);border-color:var(--c-i-500)}.spin-box.info>button:hover{color:var(--c-i-300);background-color:var(--c-i-500)}.spin-box.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-300)}.spin-box.primary{background-color:var(--c-p-500);border-color:var(--c-p-500)}.spin-box.primary>input{background-color:var(--c-p-50);color:var(--c-p-700)}.spin-box.primary>input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.spin-box.primary>button{color:var(--c-p-500);background-color:var(--c-p-300);border-color:var(--c-p-500)}.spin-box.primary>button:hover{color:var(--c-p-300);background-color:var(--c-p-500)}.spin-box.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-300)}.spin-box.success{background-color:var(--c-s-500);border-color:var(--c-s-500)}.spin-box.success>input{background-color:var(--c-s-50);color:var(--c-s-700)}.spin-box.success>input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.spin-box.success>button{color:var(--c-s-500);background-color:var(--c-s-300);border-color:var(--c-s-500)}.spin-box.success>button:hover{color:var(--c-s-300);background-color:var(--c-s-500)}.spin-box.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-300)}.spin-box.warning{background-color:var(--c-w-500);border-color:var(--c-w-500)}.spin-box.warning>input{background-color:var(--c-w-50);color:var(--c-w-700)}.spin-box.warning>input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.spin-box.warning>button{color:var(--c-w-500);background-color:var(--c-w-300);border-color:var(--c-w-500)}.spin-box.warning>button:hover{color:var(--c-w-300);background-color:var(--c-w-500)}.spin-box.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-300)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(354, 76%, 95%);--d-100: hsl(354, 76%, 90%);--d-300: hsl(354, 76%, 70%);--d-500: hsl(354, 76%, 50%);--d-700: hsl(354, 76%, 30%);--d-900: hsl(354, 76%, 10%);--d-950: hsl(354, 76%, 5%);--i-50: hsl(190, 90%, 95%);--i-100: hsl(190, 90%, 90%);--i-300: hsl(190, 90%, 70%);--i-500: hsl(190, 90%, 50%);--i-700: hsl(190, 90%, 30%);--i-900: hsl(190, 90%, 10%);--i-950: hsl(190, 90%, 5%);--p-50: hsl(216, 98%, 95%);--p-100: hsl(216, 98%, 90%);--p-300: hsl(216, 98%, 70%);--p-500: hsl(216, 98%, 50%);--p-700: hsl(216, 98%, 30%);--p-900: hsl(216, 98%, 10%);--p-950: hsl(216, 98%, 5%);--s-50: hsl(152, 81%, 95%);--s-100: hsl(152, 81%, 90%);--s-300: hsl(152, 81%, 70%);--s-500: hsl(152, 81%, 50%);--s-700: hsl(152, 81%, 30%);--s-900: hsl(152, 81%, 10%);--s-950: hsl(152, 81%, 5%);--w-50: hsl(45, 100%, 95%);--w-100: hsl(45, 100%, 90%);--w-300: hsl(45, 100%, 70%);--w-500: hsl(45, 100%, 50%);--w-700: hsl(45, 100%, 30%);--w-900: hsl(45, 100%, 10%);--w-950: hsl(45, 100%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "author": "Andrii Popov",
+  "name": "@popovandrii/ui-elements",
+  "version": "0.0.1",
+  "license": "MIT",
+  "keywords": [
+    "spinbox",
+    "input",
+    "ui",
+    "theme"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/AndreyPopov/ui-elements"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "scripts": {
+    "dev": "vite --config playground/vite.config.js",
+    "build": "vite build && tsc",
+    "preview": "vite preview",
+    "lint": "eslint src --ext .ts,.tsx",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\""
+  },
+  "devDependencies": {
+    "sass": "^1.89.2",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.0",
+    "prettier": "^3.5.3",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0"
+  }
+}