@andespindola/ui-core 0.1.0

package/dist/collection/components/ui-select/ui-select.js

@@ -0,0 +1,153 @@
+import { h, Host } from "@stencil/core";
+export class UiSelect {
+    constructor() {
+        /** Desabilita o controle. */
+        this.disabled = false;
+        /** Opções disponíveis. */
+        this.options = [];
+        this.onChange = (event) => {
+            const value = event.target.value;
+            this.value = value;
+            this.uiChange.emit(value);
+        };
+    }
+    render() {
+        const hasValue = this.value !== undefined && this.value !== "";
+        return (h(Host, { key: '1ebd6a8472a116ad071e9504ab0756daddb27824' }, h("div", { key: '5d2d00f41b8f74202156d0af7c150b89d79dc1a4', class: "wrapper" }, h("select", { key: '7b370433247f03a126ce13005a3697ba5b04845f', class: "select", name: this.name, disabled: this.disabled, onChange: this.onChange }, this.placeholder && (h("option", { key: '9e482642eebeab0b1b1c5b56a6730fb5ecbd9617', value: "", disabled: true, selected: !hasValue }, this.placeholder)), this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))), h("svg", { key: '7d66788b8d8b51169ae28e5e5c5a31c0b637e377', class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: 'aaa00671ba95ebd20f81174fc27bf218b16dfc64', points: "6 9 12 15 18 9" })))));
+    }
+    static get is() { return "ui-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o controle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do campo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiSelectOption[]",
+                    "resolved": "UiSelectOption[]",
+                    "references": {
+                        "UiSelectOption": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-select/ui-select.tsx",
+                            "id": "src/components/ui-select/ui-select.tsx::UiSelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Op\u00E7\u00F5es dispon\u00EDveis."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder exibido como op\u00E7\u00E3o desabilitada inicial."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando a sele\u00E7\u00E3o muda."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/ui-separator/ui-separator.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  background: var(--ui-border);
+}
+
+:host(.orientation-horizontal) {
+  width: 100%;
+  height: 1px;
+}
+
+:host(.orientation-vertical) {
+  display: inline-block;
+  width: 1px;
+  height: 100%;
+}

package/dist/collection/components/ui-separator/ui-separator.js

@@ -0,0 +1,52 @@
+import { h, Host } from "@stencil/core";
+export class UiSeparator {
+    constructor() {
+        /** Orientação da linha. */
+        this.orientation = "horizontal";
+    }
+    render() {
+        return (h(Host, { key: '212e4b763ad309ef74ba2e21592a0d4091fb0fcf', role: "separator", "aria-orientation": this.orientation, class: `orientation-${this.orientation}` }));
+    }
+    static get is() { return "ui-separator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-separator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-separator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiSeparatorOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "UiSeparatorOrientation": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-separator/ui-separator.tsx",
+                            "id": "src/components/ui-separator/ui-separator.tsx::UiSeparatorOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orienta\u00E7\u00E3o da linha."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "\"horizontal\""
+            }
+        };
+    }
+}

package/dist/collection/components/ui-skeleton/ui-skeleton.css

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+.skeleton {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--ui-radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--ui-chip),
+    var(--ui-panel),
+    var(--ui-chip)
+  );
+  background-size: 200% 100%;
+  animation: ui-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes ui-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

package/dist/collection/components/ui-skeleton/ui-skeleton.js

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+export class UiSkeleton {
+    render() {
+        return (h(Host, { key: '19b59c75e9ff1607c731227bd344a0d082de5366' }, h("span", { key: '6eb968b5bd87768818381db897a090a2783ad938', class: "skeleton" })));
+    }
+    static get is() { return "ui-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-skeleton.css"]
+        };
+    }
+}

package/dist/collection/components/ui-slider/ui-slider.css

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+}
+
+.slider {
+  width: 100%;
+  height: 1.25rem;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.slider:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Trilho - WebKit */
+.slider::-webkit-slider-runnable-track {
+  height: 0.375rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+}
+
+/* Thumb - WebKit */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-top: -0.375rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-accent);
+  box-shadow: var(--ui-shadow-sm);
+  transition: transform var(--ui-duration) var(--ui-ease);
+}
+
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.slider:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+/* Trilho - Firefox */
+.slider::-moz-range-track {
+  height: 0.375rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+}
+
+/* Preenchimento - Firefox */
+.slider::-moz-range-progress {
+  height: 0.375rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-accent);
+}
+
+/* Thumb - Firefox */
+.slider::-moz-range-thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-accent);
+  box-shadow: var(--ui-shadow-sm);
+  transition: transform var(--ui-duration) var(--ui-ease);
+}
+
+.slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+
+.slider:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}

package/dist/collection/components/ui-slider/ui-slider.js

@@ -0,0 +1,175 @@
+import { h, Host } from "@stencil/core";
+export class UiSlider {
+    constructor() {
+        /** Valor atual. */
+        this.value = 50;
+        /** Valor mínimo. */
+        this.min = 0;
+        /** Valor máximo. */
+        this.max = 100;
+        /** Incremento. */
+        this.step = 1;
+        /** Desabilita o controle. */
+        this.disabled = false;
+        this.onInput = (event) => {
+            const value = Number(event.target.value);
+            this.value = value;
+            this.uiInput.emit(value);
+        };
+        this.onChange = (event) => {
+            this.uiChange.emit(Number(event.target.value));
+        };
+    }
+    render() {
+        return (h(Host, { key: 'dc7f810ebfdde28731d2e1c491596caf03c2476e' }, h("input", { key: 'cac37f559b5587d18fee732e11d6515d57d23466', class: "slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.onInput, onChange: this.onChange })));
+    }
+    static get is() { return "ui-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-slider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor atual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "50"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor m\u00EDnimo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor m\u00E1ximo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Incremento."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o controle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiInput",
+                "name": "uiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido a cada movimento."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao confirmar (change)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/ui-spinner/ui-spinner.css

@@ -0,0 +1,39 @@
+:host {
+  display: inline-flex;
+  color: var(--ui-accent);
+}
+
+.spinner {
+  display: inline-block;
+  border-radius: var(--ui-radius-full);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: ui-spinner-spin 0.7s linear infinite;
+}
+
+.size-sm {
+  width: 1rem;
+  height: 1rem;
+}
+.size-md {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.size-lg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+@keyframes ui-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/ui-spinner/ui-spinner.js

@@ -0,0 +1,52 @@
+import { h, Host } from "@stencil/core";
+export class UiSpinner {
+    constructor() {
+        /** Tamanho do spinner. */
+        this.size = "md";
+    }
+    render() {
+        return (h(Host, { key: 'cedf6e857d1f4e6561c78f3fd3076341c2d8ecdc', role: "status" }, h("span", { key: '7200580dccc32b30829725ad84e913c3b1afee60', class: { spinner: true, [`size-${this.size}`]: true } }), h("span", { key: '63d4cfee2e5cebabc3c7b3b6ed95a656daa65705', class: "sr-only" }, "Carregando")));
+    }
+    static get is() { return "ui-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-spinner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiSpinnerSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "UiSpinnerSize": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-spinner/ui-spinner.tsx",
+                            "id": "src/components/ui-spinner/ui-spinner.tsx::UiSpinnerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tamanho do spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"md\""
+            }
+        };
+    }
+}

package/dist/collection/components/ui-switch/ui-switch.css

@@ -0,0 +1,47 @@
+:host {
+  display: inline-flex;
+}
+
+.switch {
+  position: relative;
+  width: 2.75rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+  cursor: pointer;
+  outline: none;
+  transition: background var(--ui-duration) var(--ui-ease);
+}
+
+.switch:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.switch[aria-checked="true"] {
+  background: var(--ui-accent);
+  border-color: var(--ui-accent);
+}
+
+.switch:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  left: 0.125rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: var(--ui-on-status);
+  box-shadow: var(--ui-shadow-sm);
+  transform: translateY(-50%);
+  transition: transform var(--ui-duration) var(--ui-ease);
+}
+
+.switch[aria-checked="true"] .thumb {
+  transform: translate(1.25rem, -50%);
+}