@luster-ui/ui 1.0.0

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

@@ -0,0 +1,162 @@
+import { h } from "@stencil/core";
+export class DcCheckbox {
+    constructor() {
+        this.label = '';
+        this.checked = false;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.value = '';
+        this.innerChecked = false;
+        this.handleChange = () => {
+            if (!this.disabled) {
+                this.innerChecked = !this.innerChecked;
+                this.dcChange.emit(this.innerChecked);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.innerChecked = this.checked;
+    }
+    render() {
+        return (h("label", { key: '045e94d76f2ba6cc1ebbcbb3bfa82289fc761d31', class: `checkbox ${this.disabled ? 'checkbox--disabled' : ''}`, onClick: this.handleChange }, h("span", { key: '2ec03e604ef10657e8cdde93c9878b22525a3b35', class: `checkbox__box ${this.innerChecked ? 'checkbox__box--checked' : ''} ${this.indeterminate ? 'checkbox__box--indeterminate' : ''}` }, this.innerChecked && !this.indeterminate && (h("svg", { key: 'ab90b16c273244ca84f22ae31053f28c620480fd', width: "10", height: "8", viewBox: "0 0 10 8", fill: "none" }, h("path", { key: 'c333e014a043775ceddeebbefbac1e05441e942e', d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '919fbd28b4d3d69a799ee92ff8bce515a855a4c1', width: "10", height: "2", viewBox: "0 0 10 2", fill: "none" }, h("line", { key: '055debe6bfd40ed0a67c62553c1219e3d30a8d52', x1: "1", y1: "1", x2: "9", y2: "1", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round" })))), this.label && h("span", { key: '6e0a0ab1e3d2a61df2c97fa407761eabd927ef76', class: "checkbox__label" }, this.label)));
+    }
+    static get is() { return "luster-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-checkbox.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": "''"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "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": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "innerChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dcChange",
+                "name": "dcChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,78 @@
+import { html } from "lit";
+const meta = {
+    title: 'Foundations/Checkbox',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Caixa de seleção com suporte a estado indeterminado. Props: `label`, `checked`, `disabled`, `indeterminate`, `value`.',
+            },
+        },
+    },
+    argTypes: {
+        label: { control: 'text', description: 'Label do checkbox' },
+        checked: {
+            control: 'boolean',
+            description: 'Estado marcado',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Desabilita interação',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        indeterminate: {
+            control: 'boolean',
+            description: 'Estado indeterminado',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    args: {
+        label: 'Accept terms',
+        checked: false,
+        disabled: false,
+        indeterminate: false,
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-checkbox
+    label="${args.label}"
+    ?checked="${args.checked}"
+    ?disabled="${args.disabled}"
+    ?indeterminate="${args.indeterminate}"
+  ></luster-checkbox>
+`;
+export const Default = {
+    args: { label: 'Accept terms and conditions', checked: false },
+    render,
+};
+export const Checked = {
+    args: { label: 'Option selected', checked: true },
+    render,
+};
+export const Indeterminate = {
+    args: { label: 'Partial selection', indeterminate: true },
+    render,
+};
+export const Disabled = {
+    args: { label: 'Unavailable option', disabled: true },
+    render,
+};
+export const DisabledChecked = {
+    name: 'Disabled Checked',
+    args: { label: 'Locked selection', checked: true, disabled: true },
+    render,
+};
+export const AllStates = {
+    name: 'All States',
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:1rem;">
+      <luster-checkbox label="Unchecked"></luster-checkbox>
+      <luster-checkbox label="Checked" ?checked="${true}"></luster-checkbox>
+      <luster-checkbox label="Indeterminate" ?indeterminate="${true}"></luster-checkbox>
+      <luster-checkbox label="Disabled" ?disabled="${true}"></luster-checkbox>
+      <luster-checkbox label="Disabled checked" ?checked="${true}" ?disabled="${true}"></luster-checkbox>
+    </div>
+  `,
+};

package/dist/collection/components/luster-color-swatch/luster-color-swatch.css

@@ -0,0 +1,33 @@
+:host { display: inline-flex; }
+
+.swatch { display: flex; flex-direction: column; gap: var(--dc-space-2); }
+
+.swatch__color {
+  border-radius: var(--dc-round-3);
+  transition: transform var(--dc-transition-fast);
+}
+
+.swatch__color:hover { transform: scale(1.03); }
+
+.swatch--sm .swatch__color  { width: 60px;  height: 60px; }
+.swatch--md .swatch__color  { width: 80px;  height: 80px; }
+.swatch--lg .swatch__color  { width: 100px; height: 100px; }
+
+.swatch__info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.swatch__name {
+  font-size: var(--dc-label-sm);
+  font-weight: 600;
+  color: var(--dc-on-surface);
+  white-space: nowrap;
+}
+
+.swatch__hex {
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+  font-family: monospace;
+}

package/dist/collection/components/luster-color-swatch/luster-color-swatch.js

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+export class DcColorSwatch {
+    constructor() {
+        this.color = '#a3a6ff';
+        this.name = '';
+        this.hex = '';
+        this.size = 'md';
+    }
+    render() {
+        return (h("div", { key: '6ea9cb759f0d060dd393e6de23429c4b515d7139', class: `swatch swatch--${this.size}` }, h("div", { key: '8b6883cc045ed739c80b10bc416d64156a873109', class: "swatch__color", style: { backgroundColor: this.color } }), h("div", { key: '5c9b62e83b8442a29a623bd8ac1503f78bc965e5', class: "swatch__info" }, this.name && h("span", { key: '5ab7e003ed7158297661bde476f1fbc66e96ff88', class: "swatch__name" }, this.name), this.hex && h("span", { key: 'df26e2458cad5537e2cbd00765256ae2b4eae9ca', class: "swatch__hex" }, this.hex))));
+    }
+    static get is() { return "luster-color-swatch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-color-swatch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-color-swatch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'#a3a6ff'"
+            },
+            "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": "''"
+            },
+            "hex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hex",
+                "defaultValue": "''"
+            },
+            "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'"
+            }
+        };
+    }
+}

package/dist/collection/components/luster-color-swatch/luster-color-swatch.stories.js

@@ -0,0 +1,58 @@
+import { html } from "lit";
+const meta = {
+    title: 'Foundations/Color Swatch',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Amostra de cor com nome e valor hex para documentação de tokens. Props: `color`, `name`, `hex`, `size`.',
+            },
+        },
+    },
+    argTypes: {
+        color: { control: 'color', description: 'Cor (qualquer valor CSS válido)' },
+        name: { control: 'text', description: 'Nome do token' },
+        hex: { control: 'text', description: 'Valor hex exibido' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Tamanho',
+            table: { defaultValue: { summary: 'md' } },
+        },
+    },
+    args: {
+        color: '#a3a6ff',
+        name: 'Primary',
+        hex: '#A3A6FF',
+        size: 'md',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-color-swatch
+    color="${args.color}"
+    name="${args.name}"
+    hex="${args.hex}"
+    size="${args.size}"
+  ></luster-color-swatch>
+`;
+export const Default = { render };
+export const Small = { args: { size: 'sm' }, render };
+export const Large = { args: { size: 'lg' }, render };
+export const DesignTokens = {
+    name: 'Design Tokens Palette',
+    render: () => html `
+    <div style="display:flex;flex-wrap:wrap;gap:1rem;">
+      <luster-color-swatch color="#a3a6ff" name="Primary" hex="#A3A6FF"></luster-color-swatch>
+      <luster-color-swatch color="#6063ee" name="Primary Dim" hex="#6063EE"></luster-color-swatch>
+      <luster-color-swatch color="#060e20" name="Surface" hex="#060E20"></luster-color-swatch>
+      <luster-color-swatch color="#091328" name="Surface Low" hex="#091328"></luster-color-swatch>
+      <luster-color-swatch color="#141f38" name="Surface High" hex="#141F38"></luster-color-swatch>
+      <luster-color-swatch color="#dee5ff" name="On Surface" hex="#DEE5FF"></luster-color-swatch>
+      <luster-color-swatch color="#a3aac4" name="On Surface Variant" hex="#A3AAC4"></luster-color-swatch>
+      <luster-color-swatch color="#3ddc97" name="Success" hex="#3DDC97"></luster-color-swatch>
+      <luster-color-swatch color="#ffbe45" name="Warning" hex="#FFBE45"></luster-color-swatch>
+      <luster-color-swatch color="#ff6b6b" name="Error" hex="#FF6B6B"></luster-color-swatch>
+    </div>
+  `,
+};

package/dist/collection/components/luster-feature-quote/luster-feature-quote.css

@@ -0,0 +1,84 @@
+:host { display: block; }
+
+.feature-quote {
+  margin: 0;
+  padding: var(--dc-space-6) var(--dc-space-8);
+  border-left: 4px solid var(--dc-primary);
+  background: var(--dc-surface-container-high);
+  border-radius: 0 var(--dc-round-4) var(--dc-round-4) 0;
+  position: relative;
+}
+
+.feature-quote--large {
+  padding: var(--dc-space-8) var(--dc-space-10);
+  border-radius: var(--dc-round-4);
+  border-left: 4px solid var(--dc-primary);
+}
+
+.feature-quote--inline {
+  background: transparent;
+  padding: var(--dc-space-4) var(--dc-space-6);
+}
+
+.feature-quote__mark {
+  position: absolute;
+  top: var(--dc-space-3);
+  left: var(--dc-space-5);
+  font-family: var(--dc-font-display);
+  font-size: 3rem;
+  color: var(--dc-primary);
+  opacity: 0.4;
+  line-height: 1;
+}
+
+.feature-quote__text {
+  font-family: var(--dc-font-display);
+  font-size: var(--dc-headline-sm);
+  font-weight: 700;
+  font-style: italic;
+  color: var(--dc-primary-fixed);
+  line-height: 1.4;
+  letter-spacing: var(--dc-tracking-tight);
+  margin: 0;
+}
+
+.feature-quote--large .feature-quote__text {
+  font-size: var(--dc-headline-md);
+}
+
+.feature-quote__attribution {
+  margin-top: var(--dc-space-4);
+}
+
+.feature-quote__author-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-space-3);
+}
+
+.feature-quote__author-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--dc-round-full);
+  background: linear-gradient(135deg, var(--dc-primary), var(--dc-primary-dim));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--dc-label-sm);
+  font-weight: 700;
+  color: var(--dc-on-primary);
+  flex-shrink: 0;
+}
+
+.feature-quote__author {
+  display: block;
+  font-size: var(--dc-label-md);
+  font-weight: 600;
+  color: var(--dc-on-surface);
+}
+
+.feature-quote__role {
+  display: block;
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+}

package/dist/collection/components/luster-feature-quote/luster-feature-quote.js

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+export class DcFeatureQuote {
+    constructor() {
+        this.quote = '';
+        this.author = '';
+        this.role = '';
+        this.variant = 'default';
+    }
+    render() {
+        return (h("blockquote", { key: '4ed1344a05bfd89c63005ba64b8cd9a32db0f6c5', class: `feature-quote feature-quote--${this.variant}` }, h("span", { key: '47bdfd40fe685f876b64b421ff706afdc42c0541', class: "feature-quote__mark" }, "\""), h("p", { key: '1b3f0735be2544ab0332455875f12c4d3ca51865', class: "feature-quote__text" }, this.quote || h("slot", { key: 'f012c749d221d62ef919c898e181547a154e4b85' })), (this.author || this.role) && (h("footer", { key: '04740fe325d696cfa258e4e946b2385cfa5b2173', class: "feature-quote__attribution" }, this.author && (h("div", { key: '25c2a6ca4d16b965d7563a495ee8350a7ca93e4a', class: "feature-quote__author-wrap" }, h("div", { key: '9e8a34dfe0c05de5440a3d63700fec4b749264c3', class: "feature-quote__author-avatar" }, this.author.charAt(0)), h("div", { key: '113098f2c5fdbecf0d8088d265ddef76c0751776' }, h("span", { key: 'e140de5e35d6aec4fe974d55f2f3b14b4f6c33b8', class: "feature-quote__author" }, this.author), this.role && h("span", { key: 'fd6bd76a054ba0eda2deec30d596d2dc35495bd3', class: "feature-quote__role" }, this.role))))))));
+    }
+    static get is() { return "luster-feature-quote"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-feature-quote.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-feature-quote.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "quote": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quote",
+                "defaultValue": "''"
+            },
+            "author": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "author",
+                "defaultValue": "''"
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "role",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'large' | 'inline'",
+                    "resolved": "\"default\" | \"inline\" | \"large\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/luster-feature-quote/luster-feature-quote.stories.js

@@ -0,0 +1,52 @@
+import { html } from "lit";
+const meta = {
+    title: 'Foundations/Feature Quote',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Bloco de destaque editorial para citações. Props: `quote`, `author`, `role`, `variant`.',
+            },
+        },
+    },
+    argTypes: {
+        quote: { control: 'text', description: 'Texto da citação' },
+        author: { control: 'text', description: 'Nome do autor' },
+        role: { control: 'text', description: 'Cargo / função do autor' },
+        variant: {
+            control: 'select',
+            options: ['default', 'large', 'inline'],
+            description: 'Estilo visual',
+            table: { defaultValue: { summary: 'default' } },
+        },
+    },
+    args: {
+        quote: 'Good design is as little design as possible.',
+        author: 'Dieter Rams',
+        role: 'Industrial Designer',
+        variant: 'default',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-feature-quote
+    quote="${args.quote}"
+    author="${args.author}"
+    role="${args.role}"
+    variant="${args.variant}"
+  ></luster-feature-quote>
+`;
+export const Default = { render };
+export const Large = {
+    args: { variant: 'large' },
+    render,
+};
+export const Inline = {
+    args: { variant: 'inline' },
+    render,
+};
+export const NoAttribution = {
+    name: 'No Attribution',
+    args: { author: '', role: '' },
+    render,
+};