@andespindola/ui-core 0.1.1 → 0.3.0

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

@@ -0,0 +1,93 @@
+:host {
+  display: block;
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 2.75rem;
+  padding: 0 0.875rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-panel);
+  backdrop-filter: blur(22px);
+  transition: all var(--ui-duration) var(--ui-ease);
+  box-sizing: border-box;
+}
+
+.field:hover {
+  border-color: var(--ui-border-strong);
+}
+
+.field:focus-within {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--ui-text-faint);
+}
+
+.list {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+  font-family: var(--ui-font-sans);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-panel-strong);
+  box-shadow: var(--ui-shadow-lg);
+  backdrop-filter: blur(22px);
+  border-radius: var(--ui-radius);
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--ui-duration) var(--ui-ease),
+    visibility var(--ui-duration) var(--ui-ease);
+}
+
+.list.is-open {
+  visibility: visible;
+  opacity: 1;
+}
+
+.option {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-foreground);
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+  transition: background var(--ui-duration) var(--ui-ease);
+}
+
+.option.active {
+  background: var(--ui-chip);
+}
+
+.option.selected {
+  color: var(--ui-accent);
+}
+
+.empty {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-text-faint);
+}

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

@@ -0,0 +1,248 @@
+import { h, Host, } from "@stencil/core";
+import { computePosition, autoUpdate, offset, flip, shift, size, } from "@floating-ui/dom";
+export class UiCombobox {
+    constructor() {
+        /** Opções disponíveis para autocomplete. */
+        this.options = [];
+        /** Valor selecionado. */
+        this.value = "";
+        /** Placeholder do campo. */
+        this.placeholder = "";
+        /** Texto digitado no campo. */
+        this.query = "";
+        /** Indica se a lista flutuante está aberta. */
+        this.open = false;
+        /** Índice da opção destacada. */
+        this.activeIndex = -1;
+        this.listId = `ui-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
+        this.onInput = (event) => {
+            this.query = event.target.value;
+            this.activeIndex = -1;
+            this.setOpen(true);
+        };
+        this.onFocus = () => {
+            this.setOpen(true);
+        };
+        this.onKeydown = (event) => {
+            const items = this.filtered;
+            switch (event.key) {
+                case "ArrowDown":
+                    event.preventDefault();
+                    if (!this.open) {
+                        this.setOpen(true);
+                        return;
+                    }
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex = (this.activeIndex + 1) % items.length;
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex =
+                        (this.activeIndex - 1 + items.length) % items.length;
+                    break;
+                case "Enter":
+                    if (this.open && this.activeIndex >= 0 && items[this.activeIndex]) {
+                        event.preventDefault();
+                        this.select(items[this.activeIndex]);
+                    }
+                    break;
+                case "Escape":
+                    if (this.open) {
+                        event.preventDefault();
+                        this.setOpen(false);
+                    }
+                    break;
+            }
+        };
+        this.onDocumentClick = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.host))
+                return;
+            this.setOpen(false);
+        };
+    }
+    componentWillLoad() {
+        const selected = this.options.find((option) => option.value === this.value);
+        if (selected)
+            this.query = selected.label;
+    }
+    disconnectedCallback() {
+        this.stop();
+        document.removeEventListener("click", this.onDocumentClick);
+    }
+    get filtered() {
+        const term = this.query.toLowerCase();
+        return this.options.filter((option) => option.label.toLowerCase().includes(term));
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        if (value) {
+            requestAnimationFrame(() => this.start());
+            document.addEventListener("click", this.onDocumentClick);
+        }
+        else {
+            this.stop();
+            this.activeIndex = -1;
+            document.removeEventListener("click", this.onDocumentClick);
+        }
+    }
+    start() {
+        if (!this.inputEl || !this.listEl)
+            return;
+        this.stop();
+        this.cleanup = autoUpdate(this.inputEl, this.listEl, () => {
+            if (!this.inputEl || !this.listEl)
+                return;
+            computePosition(this.inputEl, this.listEl, {
+                placement: "bottom-start",
+                middleware: [
+                    offset(6),
+                    flip(),
+                    shift({ padding: 8 }),
+                    size({
+                        apply: ({ rects, elements }) => {
+                            Object.assign(elements.floating.style, {
+                                width: `${rects.reference.width}px`,
+                            });
+                        },
+                    }),
+                ],
+            }).then(({ x, y }) => {
+                Object.assign(this.listEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    select(option) {
+        this.value = option.value;
+        this.query = option.label;
+        this.setOpen(false);
+        this.uiChange.emit(option.value);
+    }
+    render() {
+        const items = this.filtered;
+        return (h(Host, { key: '64d332f96d0cb39e1889eb56dbf448f67e5ed240' }, h("div", { key: '30f829b5eff180aa97a2bbb2f90a4e289768df71', class: "field" }, h("input", { key: 'f6df95047db674d2e49d34fed6057cffc86eab49', class: "input", type: "text", role: "combobox", value: this.query, placeholder: this.placeholder, autocomplete: "off", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.listId, "aria-autocomplete": "list", ref: (el) => (this.inputEl = el), onInput: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown })), h("div", { key: 'de55c7ad59dfa3e35aeac8799366e3ee849d1398', id: this.listId, class: { list: true, "is-open": this.open }, role: "listbox", ref: (el) => (this.listEl = el) }, items.length === 0 ? (h("div", { class: "empty" }, "Nenhum resultado")) : (items.map((option, index) => (h("div", { class: {
+                option: true,
+                active: index === this.activeIndex,
+                selected: option.value === this.value,
+            }, role: "option", "aria-selected": option.value === this.value ? "true" : "false", onMouseEnter: () => (this.activeIndex = index), onMouseDown: (event) => {
+                event.preventDefault();
+                this.select(option);
+            } }, option.label)))))));
+    }
+    static get is() { return "ui-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-combobox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiComboboxOption[]",
+                    "resolved": "UiComboboxOption[]",
+                    "references": {
+                        "UiComboboxOption": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-combobox/ui-combobox.tsx",
+                            "id": "src/components/ui-combobox/ui-combobox.tsx::UiComboboxOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Op\u00E7\u00F5es dispon\u00EDveis para autocomplete."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder do campo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "open": {},
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao selecionar uma op\u00E7\u00E3o."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.container {
+  margin-inline: auto;
+  width: 100%;
+  font-family: var(--ui-font-sans);
+}
+
+/* Tamanhos */
+.size-sm {
+  max-width: 40rem;
+}
+.size-md {
+  max-width: 48rem;
+}
+.size-lg {
+  max-width: 64rem;
+}
+.size-xl {
+  max-width: 80rem;
+}
+.size-full {
+  max-width: none;
+}
+
+/* Padding lateral responsivo */
+.padded {
+  padding-inline: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  .padded {
+    padding-inline: 2rem;
+  }
+}

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

@@ -0,0 +1,79 @@
+import { h, Host } from "@stencil/core";
+export class UiContainer {
+    constructor() {
+        /** Largura máxima do container. */
+        this.size = "lg";
+        /** Aplica padding lateral responsivo. */
+        this.padded = true;
+    }
+    render() {
+        const classes = {
+            container: true,
+            [`size-${this.size}`]: true,
+            padded: this.padded,
+        };
+        return (h(Host, { key: 'd9f407cdd15aa38d7e21898f4088d58846e38f22' }, h("div", { key: '7c7596a79dedc3daf94ac5440447c4608e037854', class: classes }, h("slot", { key: '5005378ea1514e2d96fa0cdba219055161ee6688' }))));
+    }
+    static get is() { return "ui-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiContainerSize",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "UiContainerSize": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-container/ui-container.tsx",
+                            "id": "src/components/ui-container/ui-container.tsx::UiContainerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura m\u00E1xima do container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"lg\""
+            },
+            "padded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aplica padding lateral responsivo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padded",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/components/ui-date-picker/ui-date-picker.css

@@ -0,0 +1,176 @@
+:host {
+  display: inline-block;
+  font-family: var(--ui-font-sans);
+}
+
+.field {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 12rem;
+  height: 2.75rem;
+  padding: 0 0.875rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-panel);
+  color: var(--ui-foreground);
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  backdrop-filter: blur(22px);
+  transition: all var(--ui-duration) var(--ui-ease);
+  box-sizing: border-box;
+}
+
+.field:hover {
+  border-color: var(--ui-border-strong);
+}
+
+.field:focus-visible {
+  outline: none;
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ui-foreground);
+}
+
+.label.placeholder {
+  color: var(--ui-text-faint);
+}
+
+.icon {
+  flex: none;
+  color: var(--ui-text-muted);
+}
+
+.calendar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  width: 17rem;
+  max-width: calc(100vw - 1rem);
+  padding: 1rem;
+  font-family: var(--ui-font-sans);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-panel-strong);
+  box-shadow: var(--ui-shadow-lg);
+  backdrop-filter: blur(22px);
+  border-radius: var(--ui-radius);
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    opacity var(--ui-duration) var(--ui-ease),
+    transform var(--ui-duration) var(--ui-ease);
+}
+
+.calendar.is-open {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.month-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--ui-foreground);
+}
+
+.nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: var(--ui-text-soft);
+  cursor: pointer;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.nav:hover {
+  background: var(--ui-chip);
+  color: var(--ui-foreground);
+}
+
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 0.25rem;
+}
+
+.weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  font-size: 0.7rem;
+  color: var(--ui-text-faint);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.125rem;
+  justify-items: center;
+}
+
+.day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font-sans);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.day.empty {
+  cursor: default;
+  pointer-events: none;
+}
+
+.day:hover:not(.empty):not(.selected) {
+  background: var(--ui-chip);
+}
+
+.day.today {
+  border-color: var(--ui-accent);
+}
+
+.day.selected {
+  background: var(--ui-accent);
+  color: var(--ui-accent-contrast);
+  border-color: transparent;
+}