atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/color-controller/color-controller.js

@@ -1,224 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class ColorController {
-    /** Current color as a hex string */
-    value = '#10b981';
-    /** Label for the entire group */
-    label = '';
-    /** Emitted when any color channel changes */
-    colorChange;
-    r = 16;
-    g = 185;
-    b = 129;
-    h = 159;
-    s = 91;
-    v = 73;
-    hex = '10B981';
-    handleValueUpdate(newValue) {
-        this.updateAllFromHex(newValue);
-    }
-    componentWillLoad() {
-        this.updateAllFromHex(this.value);
-    }
-    updateAllFromHex(hex) {
-        if (!hex)
-            return;
-        const clean = hex.startsWith('#') ? hex.slice(1) : hex;
-        this.hex = clean.toUpperCase();
-        const bigInt = parseInt(clean, 16);
-        this.r = (bigInt >> 16) & 255;
-        this.g = (bigInt >> 8) & 255;
-        this.b = bigInt & 255;
-        const r = this.r / 255;
-        const g = this.g / 255;
-        const b = this.b / 255;
-        const max = Math.max(r, g, b);
-        const min = Math.min(r, g, b);
-        const d = max - min;
-        let h = 0;
-        if (d === 0)
-            h = 0;
-        else if (max === r)
-            h = ((g - b) / d) % 6;
-        else if (max === g)
-            h = (b - r) / d + 2;
-        else if (max === b)
-            h = (r - g) / d + 4;
-        h = Math.round(h * 60);
-        if (h < 0)
-            h += 360;
-        const s = max === 0 ? 0 : d / max;
-        const v = max;
-        this.h = h;
-        this.s = Math.round(s * 100);
-        this.v = Math.round(v * 100);
-    }
-    emitChange() {
-        this.value = `#${this.hex}`;
-        this.colorChange.emit(this.value);
-    }
-    handleHexInput = (e) => {
-        const val = e.detail.value || '';
-        if (val.length === 6 || val.length === 3) {
-            if (/^[0-9A-Fa-f]+$/.test(val)) {
-                this.hex = val.toUpperCase();
-                this.updateAllFromHex(this.hex);
-                this.emitChange();
-            }
-        }
-    };
-    handleRgbChange(channel, val) {
-        if (isNaN(val))
-            return;
-        this[channel] = Math.max(0, Math.min(255, val));
-        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
-        this.updateAllFromHex(this.hex);
-        this.emitChange();
-    }
-    handleHsvChange(channel, val) {
-        if (isNaN(val))
-            return;
-        if (channel === 'h')
-            this.h = Math.max(0, Math.min(360, val));
-        if (channel === 's')
-            this.s = Math.max(0, Math.min(100, val));
-        if (channel === 'v')
-            this.v = Math.max(0, Math.min(100, val));
-        // HSV to RGB
-        const h = this.h;
-        const s = this.s / 100;
-        const v = this.v / 100;
-        const c = v * s;
-        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
-        const m = v - c;
-        let r = 0, g = 0, b = 0;
-        if (h < 60) {
-            r = c;
-            g = x;
-            b = 0;
-        }
-        else if (h < 120) {
-            r = x;
-            g = c;
-            b = 0;
-        }
-        else if (h < 180) {
-            r = 0;
-            g = c;
-            b = x;
-        }
-        else if (h < 240) {
-            r = 0;
-            g = x;
-            b = c;
-        }
-        else if (h < 300) {
-            r = x;
-            g = 0;
-            b = c;
-        }
-        else {
-            r = c;
-            g = 0;
-            b = x;
-        }
-        this.r = Math.round((r + m) * 255);
-        this.g = Math.round((g + m) * 255);
-        this.b = Math.round((b + m) * 255);
-        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
-        this.emitChange();
-    }
-    render() {
-        return (h(Host, { key: '8a799159e4f7d80bbe881ba3a93d1a6faed5a54e' }, this.label && h("div", { key: 'd32e7f8bcf4ab190437317d2697a86486e84d264', class: "col-ctrl-label" }, this.label), h("div", { key: '75cc18672f23ef572569ac2cc9d125373264c962', class: "col-ctrl-grid" }, h("div", { key: 'af936f413bb4b7aeff0dd9752deadc0ce1dfcb03', class: "col-ctrl-row" }, h("span", { key: '71c0d3c44062a67c1402d2e2b92f81c3ce8878dc', class: "col-ctrl-key" }, "H"), h("div", { key: '08c832583ca9f956c3fc761fa32b712d208d853d', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '283a471f4bf8af83f37b7ac201a81d25e6803dba', class: "col-ctrl-input", type: "number", value: this.h, onInputChange: (v) => this.handleHsvChange('h', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'ef039c70dbc01252f0129f95f7eca4f6302f9049', class: "col-ctrl-unit" }, "\u00B0"))), h("div", { key: '68c91d46d38583bd8a8158452033088811453d1c', class: "col-ctrl-row" }, h("span", { key: '3dfb8b3a1f1053080d6ca3c3b03027fa46cc33bd', class: "col-ctrl-key" }, "S"), h("div", { key: '929558e93d27bc799a2401b0f01f358222c24c24', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'a2fcdc19f32f5348848347319c134d94d8963ca5', class: "col-ctrl-input", type: "number", value: this.s, onInputChange: (v) => this.handleHsvChange('s', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'de5d00b3264b1284fe23ca13f9611e5046c444d6', class: "col-ctrl-unit" }, "%"))), h("div", { key: '4e744c31accbcdbe6505a160e693926e6001ac9c', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '9feef4b4fe6459e34f6ac36a42c90d24413da27b', class: "col-ctrl-key" }, "V"), h("div", { key: '9d1821a375ab9473de477c7ab38cea6cd0cf9c57', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '259bb011612129fd3589fcb7febf15bdd0e7ce13', class: "col-ctrl-input", type: "number", value: this.v, onInputChange: (v) => this.handleHsvChange('v', parseInt(v.detail)), variant: "plain" }), h("span", { key: '3646c32d18517429f758cfef21d34df5d9ec407e', class: "col-ctrl-unit" }, "%"))), h("div", { key: '4f0dae6cce89af626b9d545dda0971ab2f041bca', class: "col-ctrl-row" }, h("span", { key: '6995401c0f6cabba13eb35c596e039769dc33c0a', class: "col-ctrl-key" }, "R"), h("div", { key: 'cc802f297a286f745957b613b37f3ab5ea12fa4e', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '633391de1afcd81d7ce6f68656569f858a673d62', class: "col-ctrl-input", type: "number", value: this.r, onInputChange: (v) => this.handleRgbChange('r', parseInt(v.detail)), variant: "plain" }))), h("div", { key: 'f4dce90ceb3f0849cb17101c07229b384739d5f1', class: "col-ctrl-row" }, h("span", { key: 'c3891f220f1fccf54fd84ded9674bad3100c530f', class: "col-ctrl-key" }, "G"), h("div", { key: '187f474a516c7a1bd35cce0e03e9aeb3c8d3b6b8', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '60be98aaf3e10a67b43bb2206e767d60e7bc1e04', class: "col-ctrl-input", type: "number", value: this.g, onInputChange: (v) => this.handleRgbChange('g', parseInt(v.detail)), variant: "plain" }))), h("div", { key: 'a844765b839bfa715a150932d1b3b80c44899d11', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '548be88547a50add11eb34c6f837e6fca6d9fbfd', class: "col-ctrl-key" }, "B"), h("div", { key: 'eaab04459f36946161d9165d917cff488b27a841', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '7a3b67f4b98a20e920c8c6537a48354a891d76e5', class: "col-ctrl-input", type: "number", value: this.b, onInputChange: (v) => this.handleRgbChange('b', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '97a6584e32baa09c44a1c3dc80e93c45ea8b1282', class: "col-ctrl-row hex-row" }, h("span", { key: 'aed2ff62dd29ada3896212ede2c24cbf679591ca', class: "col-ctrl-key" }, "#"), h("div", { key: 'b75b8984f2e9dfca0c01022c45a2b1a6e23ba925', class: "col-ctrl-input-wrapper hex-wrapper" }, h("ui-input", { key: '1e051860e57dd8f10298ac939509173bebaca5e3', class: "col-ctrl-input hex-input", value: this.hex, onInputChange: (v) => this.handleHexInput({ detail: { value: v.detail } }), variant: "plain" }))))));
-    }
-    static get is() { return "ui-color-controller"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["color-controller.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["color-controller.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Current color as a hex string"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "'#10b981'"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the entire group"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "r": {},
-            "g": {},
-            "b": {},
-            "h": {},
-            "s": {},
-            "v": {},
-            "hex": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "colorChange",
-                "name": "colorChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when any color channel changes"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "handleValueUpdate"
-            }];
-    }
-}

package/dist/collection/components/smart-location-dropdown/smart-location-dropdown.css

@@ -1,357 +0,0 @@
-.sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border-width: 0 !important;
-}
-
-.a11y-sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border-width: 0 !important;
-}
-
-:host {
-  display: block;
-  width: 100%;
-  --sld-border: #cfd8e3;
-  --sld-border-strong: #b4c1d1;
-  --sld-focus: #2563eb;
-  --sld-text: #10213a;
-  --sld-muted: #62748a;
-  --sld-bg: #ffffff;
-  --sld-panel: rgba(255, 255, 255, 0.98);
-  --sld-panel-solid: #ffffff;
-  --sld-hover: #f3f8ff;
-  --sld-selected: #e8f1ff;
-  --sld-chip: #edf4ff;
-  --sld-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
-}
-
-.location-dropdown {
-  position: relative;
-  width: 100%;
-  font-family: "Segoe UI", Roboto, sans-serif;
-}
-
-.location-trigger {
-  border: 1px solid var(--sld-border);
-  border-radius: 14px;
-  min-height: 48px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 11px 14px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
-  color: var(--sld-text);
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
-}
-
-.location-trigger:hover {
-  border-color: var(--sld-border-strong);
-  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
-}
-
-.location-trigger:focus,
-.location-dropdown.open .location-trigger {
-  border-color: var(--sld-focus);
-  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 16px 32px rgba(37, 99, 235, 0.14);
-  outline: none;
-}
-
-.location-dropdown.disabled .location-trigger {
-  opacity: 0.72;
-  cursor: not-allowed;
-}
-
-.trigger-text {
-  flex: 1;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.35;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.trigger-text.placeholder {
-  color: #91a0b4;
-}
-
-.trigger-icons {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.arrow {
-  transition: transform 0.18s ease;
-  color: var(--sld-muted);
-}
-
-.arrow.open {
-  transform: rotate(180deg);
-}
-
-.clear-btn,
-.fav-btn,
-.chip-remove {
-  border: none;
-  background: transparent;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--sld-muted);
-  padding: 0;
-}
-
-.clear-btn:hover,
-.fav-btn:hover,
-.chip-remove:hover {
-  color: var(--sld-text);
-}
-
-.clear-btn {
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
-  background: #eef4fb;
-}
-
-.clear-btn:hover {
-  background: #e2ecf8;
-}
-
-.fav-btn.active {
-  color: #d97706;
-}
-
-.selected-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 10px;
-}
-
-.selected-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 10px;
-  border-radius: 999px;
-  border: 1px solid #d7e7ff;
-  background: var(--sld-chip);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  max-width: 100%;
-}
-
-.chip-label {
-  font-size: 12px;
-  color: #1c3657;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.selected-more {
-  font-size: 12px;
-  color: #37557b;
-  align-self: center;
-}
-
-.menu {
-  border: 1px solid rgba(180, 193, 209, 0.72);
-  border-radius: 18px;
-  background: var(--sld-panel-solid);
-  background-color: var(--sld-panel-solid);
-  backdrop-filter: blur(18px);
-  box-shadow: var(--sld-shadow);
-  overflow: hidden;
-  isolation: isolate;
-}
-
-.search-row {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding: 12px;
-  border-bottom: 1px solid #edf2f7;
-  background: var(--sld-panel);
-}
-
-.search-input {
-  width: 100%;
-  border: 1px solid #d4deea;
-  border-radius: 12px;
-  padding: 11px 13px;
-  font-size: 14px;
-  outline: none;
-  background: #f9fbfe;
-  color: var(--sld-text);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
-}
-
-.search-input:focus {
-  border-color: var(--sld-focus);
-  background: #ffffff;
-  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
-}
-
-.options-list {
-  padding: 8px;
-  overflow-y: auto;
-  max-height: inherit;
-  background: var(--sld-panel-solid);
-}
-
-.location-option {
-  padding: 11px 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 14px;
-  background: var(--sld-panel-solid);
-  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
-}
-
-.location-option:hover,
-.location-option-highlighted {
-  background: var(--sld-hover);
-  border-color: #d7e7ff;
-  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
-  transform: translateY(-1px);
-}
-
-.location-option-selected {
-  background: var(--sld-selected);
-  border-color: #b9d4ff;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
-}
-
-.location-option-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.location-option-main {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-}
-
-.location-option-text {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.location-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--sld-text);
-  white-space: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.location-code {
-  font-size: 11px;
-  color: var(--sld-muted);
-}
-
-.location-option-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.location-type {
-  font-size: 10px;
-  border: 1px solid #d8e5f3;
-  border-radius: 999px;
-  padding: 4px 8px;
-  color: #55708f;
-  background: #f7fbff;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-weight: 700;
-}
-
-.fav-btn {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
-  background: #f6f9fc;
-}
-
-.fav-btn:hover {
-  background: #ebf2f8;
-}
-
-.status {
-  padding: 14px;
-  font-size: 13px;
-  background: var(--sld-panel-solid);
-}
-
-.status.loading,
-.status.empty {
-  color: var(--sld-muted);
-}
-
-.status.error {
-  color: #b91c1c;
-  background: #fef2f2;
-}
-
-.create-btn {
-  width: 100%;
-  border: none;
-  border-top: 1px solid #edf2f7;
-  background: #f7fbff;
-  color: var(--sld-text);
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 13px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.create-btn:hover {
-  background: #eef6ff;
-}
-
-.footer-meta {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  border-top: 1px solid #edf2f7;
-  padding: 10px 12px 12px;
-  font-size: 11px;
-  color: var(--sld-muted);
-  background: var(--sld-panel);
-}