@luster-ui/ui 1.0.0

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

@@ -0,0 +1,121 @@
+:host {
+  display: inline-flex;
+}
+
+:host([full-width]) {
+  display: flex;
+  width: 100%;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dc-space-2);
+  border: none;
+  border-radius: var(--dc-round-2);
+  font-family: var(--dc-font-body);
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  transition: all var(--dc-transition-base);
+  letter-spacing: 0.01em;
+}
+
+.btn--full { width: 100%; }
+
+/* Sizes */
+.btn--sm { padding: var(--dc-space-1) var(--dc-space-3); font-size: var(--dc-label-md); height: 32px; }
+.btn--md { padding: var(--dc-space-2) var(--dc-space-5); font-size: var(--dc-body-md); height: 40px; }
+.btn--lg { padding: var(--dc-space-3) var(--dc-space-6); font-size: var(--dc-body-lg); height: 48px; }
+
+/* Primary - gradient "lit from within" */
+.btn--primary {
+  background: linear-gradient(135deg, var(--dc-primary) 0%, var(--dc-primary-dim) 100%);
+  color: var(--dc-on-primary);
+  box-shadow: var(--dc-btn-primary-shadow);
+}
+
+.btn--primary:hover:not(:disabled) {
+  background: var(--dc-btn-primary-gradient-hover);
+  box-shadow: var(--dc-btn-primary-shadow-hover);
+  transform: translateY(-1px);
+}
+
+.btn--primary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: var(--dc-btn-primary-shadow-press);
+}
+
+/* Secondary - ghost border */
+.btn--secondary {
+  background: transparent;
+  color: var(--dc-on-surface);
+  border: 1px solid var(--dc-border-strong);
+}
+
+.btn--secondary:hover:not(:disabled) {
+  background: var(--dc-hover-tint-icon);
+  border-color: var(--dc-border-hover);
+}
+
+/* Tertiary - text only */
+.btn--tertiary {
+  background: transparent;
+  color: var(--dc-primary);
+  padding-left: var(--dc-space-2);
+  padding-right: var(--dc-space-2);
+}
+
+.btn--tertiary:hover:not(:disabled) {
+  color: var(--dc-primary-fixed);
+  background: var(--dc-hover-tint-strong);
+}
+
+/* Destructive */
+.btn--destructive {
+  background: transparent;
+  color: var(--dc-error);
+  border: 1px solid var(--dc-error-border);
+}
+
+.btn--destructive:hover:not(:disabled) {
+  background: var(--dc-error-bg);
+  border-color: var(--dc-error-border-hover);
+}
+
+/* Disabled */
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Loading */
+.btn--loading {
+  cursor: wait;
+}
+
+.btn__spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--dc-spinner-border);
+  border-top-color: currentColor;
+  border-radius: var(--dc-round-full);
+  animation: spin 0.6s linear infinite;
+}
+
+.btn__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-space-2);
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,179 @@
+import { h } from "@stencil/core";
+export class DcButton {
+    constructor() {
+        this.variant = 'primary';
+        this.size = 'md';
+        this.disabled = false;
+        this.loading = false;
+        this.fullWidth = false;
+        this.type = 'button';
+        this.handleClick = () => {
+            if (!this.disabled && !this.loading) {
+                this.dcClick.emit();
+            }
+        };
+    }
+    render() {
+        return (h("button", { key: 'b1f275431288cf48cdcd77fd0ff0ce94ed6c7471', class: [
+                'btn',
+                `btn--${this.variant}`,
+                `btn--${this.size}`,
+                this.loading ? 'btn--loading' : '',
+                this.fullWidth ? 'btn--full' : '',
+            ].filter(Boolean).join(' '), disabled: this.disabled || this.loading, type: this.type, onClick: this.handleClick }, this.loading && (h("span", { key: '024a89db11699ec8f4a2606cf550ad060cf9981a', class: "btn__spinner", "aria-hidden": "true" })), h("span", { key: '8586524c1551bdf8dc6d5c597f5fc5ecebd54054', class: "btn__content" }, h("slot", { key: '5f8ace974b28574208c5f4fc146573d0bdb100c3' }))));
+    }
+    static get is() { return "luster-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'destructive'",
+                    "resolved": "\"destructive\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "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"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dcClick",
+                "name": "dcClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,103 @@
+import { html } from "lit";
+const meta = {
+    title: 'Foundations/Button',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Botão multi-variante. Suporta gradiente primary, ghost secondary, text tertiary e destructive. Props: `variant`, `size`, `loading`, `disabled`, `full-width`.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary', 'destructive'],
+            description: 'Estilo visual do botão',
+            table: { defaultValue: { summary: 'primary' } },
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Tamanho',
+            table: { defaultValue: { summary: 'md' } },
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Estado de carregamento — exibe spinner',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Desabilita interação',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        label: {
+            control: 'text',
+            description: 'Texto do botão (slot)',
+        },
+    },
+    args: {
+        variant: 'primary',
+        size: 'md',
+        loading: false,
+        disabled: false,
+        label: 'Click me',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-button
+    variant="${args.variant}"
+    size="${args.size}"
+    ?loading="${args.loading}"
+    ?disabled="${args.disabled}"
+  >
+    ${args.label}
+  </luster-button>
+`;
+export const Primary = {
+    args: { variant: 'primary', label: 'Primary Action' },
+    render,
+};
+export const Secondary = {
+    args: { variant: 'secondary', label: 'Secondary Style' },
+    render,
+};
+export const Tertiary = {
+    args: { variant: 'tertiary', label: 'Show Link' },
+    render,
+};
+export const Destructive = {
+    args: { variant: 'destructive', label: 'Delete Item' },
+    render,
+};
+export const Loading = {
+    args: { variant: 'primary', loading: true, label: 'Processing' },
+    render,
+};
+export const Disabled = {
+    args: { variant: 'primary', disabled: true, label: 'Unavailable' },
+    render,
+};
+export const SmallSize = {
+    args: { variant: 'primary', size: 'sm', label: 'Small' },
+    render,
+};
+export const LargeSize = {
+    args: { variant: 'primary', size: 'lg', label: 'Large Action' },
+    render,
+};
+export const AllVariants = {
+    name: 'All Variants',
+    render: () => html `
+    <div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:center;">
+      <luster-button variant="primary">Primary</luster-button>
+      <luster-button variant="secondary">Secondary</luster-button>
+      <luster-button variant="tertiary">Tertiary</luster-button>
+      <luster-button variant="destructive">Destructive</luster-button>
+      <luster-button variant="primary" ?loading="${true}">Loading</luster-button>
+      <luster-button variant="primary" ?disabled="${true}">Disabled</luster-button>
+    </div>
+  `,
+};

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

@@ -0,0 +1,29 @@
+:host { display: block; }
+
+.card {
+  border-radius: var(--dc-round-4);
+  overflow: hidden;
+  transition: background var(--dc-transition-base), box-shadow var(--dc-transition-base);
+}
+
+/* Padding */
+.card--pad-none { padding: 0; }
+.card--pad-sm   { padding: var(--dc-space-4); }
+.card--pad-md   { padding: var(--dc-space-6); }
+.card--pad-lg   { padding: var(--dc-space-8); }
+
+/* Variants */
+.card--default  { background: var(--dc-surface-container-high); }
+.card--elevated { background: var(--dc-surface-container-highest); box-shadow: var(--dc-shadow-md); }
+.card--feature  { background: var(--dc-surface-container-high); border: 1px solid var(--dc-border-default); }
+
+.card--glass {
+  background: var(--dc-glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--dc-border-default);
+}
+
+/* Hoverable */
+.card--hoverable { cursor: pointer; }
+.card--hoverable:hover { background: var(--dc-surface-bright); box-shadow: var(--dc-shadow-lg); }

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

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+export class DcCard {
+    constructor() {
+        this.variant = 'default';
+        this.padding = 'md';
+        this.hoverable = false;
+    }
+    render() {
+        return (h("div", { key: 'b49300a94d3ec06822794698af4a1d8da248d319', class: [
+                'card',
+                `card--${this.variant}`,
+                `card--pad-${this.padding}`,
+                this.hoverable ? 'card--hoverable' : '',
+            ].filter(Boolean).join(' ') }, h("slot", { key: '05c26e4626e0610588ab6694355f315b0adc9327' })));
+    }
+    static get is() { return "luster-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'elevated' | 'glass' | 'feature'",
+                    "resolved": "\"default\" | \"elevated\" | \"feature\" | \"glass\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'none'",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'md'"
+            },
+            "hoverable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hoverable",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,67 @@
+import { html } from "lit";
+const meta = {
+    title: 'Foundations/Card',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Contêiner de conteúdo com variantes visuais. Props: `variant`, `padding`, `hoverable`.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'elevated', 'glass', 'feature'],
+            description: 'Estilo visual',
+            table: { defaultValue: { summary: 'default' } },
+        },
+        padding: {
+            control: 'select',
+            options: ['none', 'sm', 'md', 'lg'],
+            description: 'Espaçamento interno',
+            table: { defaultValue: { summary: 'md' } },
+        },
+        hoverable: {
+            control: 'boolean',
+            description: 'Efeito ao passar o mouse',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    args: {
+        variant: 'default',
+        padding: 'md',
+        hoverable: false,
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-card variant="${args.variant}" padding="${args.padding}" ?hoverable="${args.hoverable}">
+    <div style="color:var(--dc-on-surface);">
+      <strong>Card heading</strong>
+      <p style="margin:0.5rem 0 0;color:var(--dc-on-surface-variant);font-size:0.875rem;">
+        Some content inside the card goes here.
+      </p>
+    </div>
+  </luster-card>
+`;
+export const Default = { args: { variant: 'default' }, render };
+export const Elevated = { args: { variant: 'elevated' }, render };
+export const Glass = { args: { variant: 'glass' }, render };
+export const Feature = { args: { variant: 'feature' }, render };
+export const Hoverable = { args: { variant: 'elevated', hoverable: true }, render };
+export const AllVariants = {
+    name: 'All Variants',
+    render: () => html `
+    <div style="display:flex;gap:1rem;flex-wrap:wrap;">
+      ${['default', 'elevated', 'glass', 'feature'].map((v) => html `
+          <luster-card variant="${v}" padding="md">
+            <div style="color:var(--dc-on-surface);min-width:140px;">
+              <strong style="font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;">${v}</strong>
+              <p style="margin:0.5rem 0 0;color:var(--dc-on-surface-variant);font-size:0.8rem;">Sample content</p>
+            </div>
+          </luster-card>
+        `)}
+    </div>
+  `,
+};

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

@@ -0,0 +1,42 @@
+:host { display: inline-flex; }
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox--disabled { opacity: 0.4; cursor: not-allowed; }
+
+.checkbox__box {
+  width: 18px;
+  height: 18px;
+  border-radius: var(--dc-round-1);
+  border: 1.5px solid var(--dc-border-strong);
+  background: var(--dc-surface-container-lowest);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all var(--dc-transition-fast);
+  color: var(--dc-on-primary);
+}
+
+.checkbox__box--checked,
+.checkbox__box--indeterminate {
+  background: var(--dc-primary);
+  border-color: var(--dc-primary);
+}
+
+.checkbox:hover .checkbox__box:not(.checkbox__box--checked) {
+  border-color: var(--dc-primary);
+  background: var(--dc-hover-tint-strong);
+}
+
+.checkbox__label {
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-body-md);
+  color: var(--dc-on-surface);
+}