@luster-ui/ui 1.0.0

package/dist/collection/components/luster-input/luster-input.js

@@ -0,0 +1,332 @@
+import { h } from "@stencil/core";
+export class DcInput {
+    constructor() {
+        this.label = '';
+        this.placeholder = '';
+        this.value = '';
+        this.type = 'text';
+        this.error = false;
+        this.errorMessage = '';
+        this.helperText = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.name = '';
+        this.focused = false;
+        this.innerValue = '';
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.innerValue = target.value;
+            this.dcInput.emit(target.value);
+        };
+        this.handleChange = (e) => {
+            const target = e.target;
+            this.dcChange.emit(target.value);
+        };
+        this.handleFocus = () => {
+            this.focused = true;
+            this.dcFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.focused = false;
+            this.dcBlur.emit();
+        };
+    }
+    componentWillLoad() {
+        this.innerValue = this.value;
+    }
+    render() {
+        const hasError = this.error;
+        const wrapperClass = [
+            'input-wrapper',
+            hasError ? 'input-wrapper--error' : '',
+            this.focused ? 'input-wrapper--focused' : '',
+            this.disabled ? 'input-wrapper--disabled' : '',
+        ].filter(Boolean).join(' ');
+        return (h("div", { key: '9973fc5e101503b63bc060f0e0c5f3eba3367543', class: wrapperClass }, this.label && (h("label", { key: '0fcf79b73c6a04ecd40b2d0f1cc85f87cc5fd6ac', class: "input__label" }, this.label)), h("div", { key: '135a4b38ddcaf1a09e968cc629ee3cf59a2261af', class: "input__field-box" }, h("input", { key: '9aa11ddc2c5808ee174f5279b8d5544a3392f389', class: "input__field", type: this.type, placeholder: this.placeholder, value: this.innerValue, disabled: this.disabled, readonly: this.readonly, name: this.name, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && this.errorMessage && (h("span", { key: 'eafa6c55b09c8b8fbcd5cd1f2350993cf7c9199f', class: "input__message input__message--error" }, h("svg", { key: '619cef649ef4e5b82df131844e336a06f3881ad1', width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: '23c0e89e4c895e2884ff99031c0f282fa8435e96', cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "2" }), h("line", { key: '377ffaea6f80ee4806ad824fd0de312d94fd0f52', x1: "12", y1: "8", x2: "12", y2: "12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("line", { key: 'd1d67467a4f4f4a97b4da3822d536031ad63112a', x1: "12", y1: "16", x2: "12.01", y2: "16", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })), this.errorMessage)), !hasError && this.helperText && (h("span", { key: 'ac62c67973896a90db17efd5c0029695a1a7fe79', class: "input__message" }, this.helperText))));
+    }
+    static get is() { return "luster-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "innerValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dcChange",
+                "name": "dcChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dcInput",
+                "name": "dcInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dcFocus",
+                "name": "dcFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dcBlur",
+                "name": "dcBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/luster-input/luster-input.stories.js

@@ -0,0 +1,106 @@
+import { html } from "lit";
+const meta = {
+    title: 'Foundations/Input',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Campo de texto com suporte a label, placeholder, mensagem de erro e helper text. Props: `label`, `placeholder`, `value`, `type`, `error`, `error-message`, `helper-text`, `disabled`, `readonly`.',
+            },
+        },
+    },
+    argTypes: {
+        label: { control: 'text', description: 'Label do campo' },
+        placeholder: { control: 'text', description: 'Placeholder' },
+        value: { control: 'text', description: 'Valor inicial' },
+        type: {
+            control: 'select',
+            options: ['text', 'email', 'password', 'number', 'search'],
+            description: 'Tipo do input',
+            table: { defaultValue: { summary: 'text' } },
+        },
+        error: {
+            control: 'boolean',
+            description: 'Estado de erro',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        errorMessage: { control: 'text', description: 'Mensagem de erro' },
+        helperText: { control: 'text', description: 'Texto de ajuda' },
+        disabled: {
+            control: 'boolean',
+            description: 'Desabilita o campo',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Somente leitura',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    args: {
+        label: 'Email',
+        placeholder: 'you@example.com',
+        value: '',
+        type: 'text',
+        error: false,
+        errorMessage: '',
+        helperText: '',
+        disabled: false,
+        readonly: false,
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-input
+    label="${args.label}"
+    placeholder="${args.placeholder}"
+    value="${args.value}"
+    type="${args.type}"
+    ?error="${args.error}"
+    error-message="${args.errorMessage}"
+    helper-text="${args.helperText}"
+    ?disabled="${args.disabled}"
+    ?readonly="${args.readonly}"
+  ></luster-input>
+`;
+export const Default = {
+    args: { label: 'Username', placeholder: 'Enter your username' },
+    render,
+};
+export const WithHelperText = {
+    args: {
+        label: 'Email',
+        placeholder: 'you@example.com',
+        helperText: 'We will never share your email.',
+    },
+    render,
+};
+export const WithError = {
+    args: {
+        label: 'Password',
+        placeholder: '••••••••',
+        type: 'password',
+        error: true,
+        errorMessage: 'Password must be at least 8 characters.',
+    },
+    render,
+};
+export const Disabled = {
+    args: {
+        label: 'Read-only field',
+        value: 'Cannot edit this',
+        disabled: true,
+    },
+    render,
+};
+export const AllStates = {
+    name: 'All States',
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:1.5rem;width:320px;">
+      <luster-input label="Default" placeholder="Enter text..."></luster-input>
+      <luster-input label="With helper" placeholder="Enter email" helper-text="We will never share your email."></luster-input>
+      <luster-input label="Error state" placeholder="Enter value" ?error="${true}" error-message="This field is required."></luster-input>
+      <luster-input label="Disabled" value="Disabled value" ?disabled="${true}"></luster-input>
+    </div>
+  `,
+};

package/dist/collection/components/luster-modal/luster-modal.css

@@ -0,0 +1,103 @@
+:host { display: block; }
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--dc-overlay-modal);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--dc-space-6);
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal {
+  background: var(--dc-surface-container-highest);
+  border-radius: var(--dc-round-5);
+  box-shadow: var(--dc-shadow-xl);
+  border: 1px solid var(--dc-border-default);
+  display: flex;
+  flex-direction: column;
+  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+  max-height: 90vh;
+}
+
+.modal--sm { width: 380px; }
+.modal--md { width: 520px; }
+.modal--lg { width: 680px; }
+
+.modal__header {
+  padding: var(--dc-space-6);
+  padding-bottom: var(--dc-space-4);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-space-2);
+}
+
+.modal__title {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-headline-sm);
+  font-weight: 700;
+  color: var(--dc-on-surface);
+  letter-spacing: var(--dc-tracking-tight);
+  margin: 0;
+  padding-right: var(--dc-space-8);
+}
+
+.modal__subtitle {
+  font-size: var(--dc-body-sm);
+  color: var(--dc-on-surface-variant);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.modal__close {
+  position: absolute;
+  top: var(--dc-space-5);
+  right: var(--dc-space-5);
+  width: 32px;
+  height: 32px;
+  background: var(--dc-close-bg);
+  border: none;
+  border-radius: var(--dc-round-full);
+  color: var(--dc-on-surface-variant);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--dc-transition-fast);
+}
+
+.modal__close:hover {
+  background: var(--dc-close-hover);
+  color: var(--dc-on-surface);
+}
+
+.modal__body {
+  padding: var(--dc-space-4) var(--dc-space-6);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.modal__footer {
+  padding: var(--dc-space-4) var(--dc-space-6) var(--dc-space-6);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dc-space-3);
+  border-top: 1px solid var(--dc-border-faint);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.94) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}