@luster-ui/ui 1.0.0

package/dist/collection/components/luster-activity-item/luster-activity-item.js

@@ -0,0 +1,188 @@
+import { h } from "@stencil/core";
+export class DcActivityItem {
+    constructor() {
+        this.label = '';
+        this.description = '';
+        this.time = '';
+        this.variant = 'activity';
+        this.icon = 'edit';
+        this.fileSize = '';
+        this.downloadable = false;
+    }
+    getIcon() {
+        switch (this.icon) {
+            case 'edit':
+                return (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+            case 'sync':
+                return (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { points: "1 4 1 10 7 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M3.51 15a9 9 0 1 0 .49-8.49", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
+            case 'user':
+                return (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2", stroke: "currentColor", "stroke-width": "2" }), h("circle", { cx: "12", cy: "7", r: "4", stroke: "currentColor", "stroke-width": "2" })));
+            case 'file':
+                return (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z", stroke: "currentColor", "stroke-width": "2" }), h("polyline", { points: "14,2 14,8 20,8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
+            default:
+                return (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "2" })));
+        }
+    }
+    render() {
+        if (this.variant === 'file') {
+            return (h("div", { class: "activity-item activity-item--file" }, h("div", { class: "activity-item__file-icon" }, this.getIcon()), h("div", { class: "activity-item__content" }, h("span", { class: "activity-item__title" }, this.label), h("span", { class: "activity-item__meta" }, this.fileSize && h("span", null, this.fileSize), this.time && h("span", null, "\u00B7 ", this.time))), this.downloadable && (h("button", { class: "activity-item__download", "aria-label": "Download" }, h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("polyline", { points: "7,10 12,15 17,10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("line", { x1: "12", y1: "15", x2: "12", y2: "3", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))));
+        }
+        return (h("div", { class: "activity-item" }, h("div", { class: "activity-item__icon" }, this.getIcon()), h("div", { class: "activity-item__content" }, h("span", { class: "activity-item__title" }, this.label), this.description && (h("span", { class: "activity-item__desc" }, this.description)), this.time && h("span", { class: "activity-item__time" }, this.time))));
+    }
+    static get is() { return "luster-activity-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-activity-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-activity-item.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": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "time": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'activity' | 'file'",
+                    "resolved": "\"activity\" | \"file\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'activity'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'edit'"
+            },
+            "fileSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-size",
+                "defaultValue": "''"
+            },
+            "downloadable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "downloadable",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/luster-activity-item/luster-activity-item.stories.js

@@ -0,0 +1,94 @@
+import { html } from "lit";
+const meta = {
+    title: 'Cards/Activity Item',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Item de feed de atividade ou arquivo. Props: `label`, `description`, `time`, `variant`, `icon`, `file-size`, `downloadable`.',
+            },
+        },
+    },
+    argTypes: {
+        label: { control: 'text', description: 'Título da atividade' },
+        description: { control: 'text', description: 'Descrição adicional' },
+        time: { control: 'text', description: 'Timestamp' },
+        variant: {
+            control: 'select',
+            options: ['activity', 'file'],
+            description: 'Tipo de item',
+            table: { defaultValue: { summary: 'activity' } },
+        },
+        icon: {
+            control: 'select',
+            options: ['edit', 'sync', 'user', 'file'],
+            description: 'Ícone do item',
+            table: { defaultValue: { summary: 'edit' } },
+        },
+        fileSize: { control: 'text', description: 'Tamanho do arquivo (apenas no variant file)' },
+        downloadable: {
+            control: 'boolean',
+            description: 'Exibe botão de download (apenas no variant file)',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+    args: {
+        label: 'Article draft updated',
+        description: 'Changes saved by Alex Curator',
+        time: '2 min ago',
+        variant: 'activity',
+        icon: 'edit',
+        fileSize: '',
+        downloadable: false,
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-activity-item
+    label="${args.label}"
+    description="${args.description}"
+    time="${args.time}"
+    variant="${args.variant}"
+    icon="${args.icon}"
+    file-size="${args.fileSize}"
+    ?downloadable="${args.downloadable}"
+  ></luster-activity-item>
+`;
+export const ActivityEdit = {
+    name: 'Activity — Edit',
+    args: { label: 'Article draft updated', description: 'By Alex Curator', time: '2 min ago', icon: 'edit' },
+    render,
+};
+export const ActivitySync = {
+    name: 'Activity — Sync',
+    args: { label: 'Content synced to CDN', description: 'Automatic publish', time: '15 min ago', icon: 'sync' },
+    render,
+};
+export const ActivityUser = {
+    name: 'Activity — User',
+    args: { label: 'New collaborator added', description: 'Jordan Reyes joined the team', time: '1 hr ago', icon: 'user' },
+    render,
+};
+export const FileDownloadable = {
+    name: 'File — Downloadable',
+    args: {
+        label: 'design-tokens.json',
+        variant: 'file',
+        icon: 'file',
+        fileSize: '24 KB',
+        time: 'Yesterday',
+        downloadable: true,
+    },
+    render,
+};
+export const ActivityFeed = {
+    name: 'Activity Feed',
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:0.25rem;width:360px;">
+      <luster-activity-item label="Article draft updated" description="By Alex Curator" time="2 min ago" icon="edit"></luster-activity-item>
+      <luster-activity-item label="Content synced" description="Automatic publish" time="15 min ago" icon="sync"></luster-activity-item>
+      <luster-activity-item label="Jordan Reyes joined" description="New collaborator" time="1 hr ago" icon="user"></luster-activity-item>
+      <luster-activity-item label="brand-guidelines.pdf" variant="file" icon="file" file-size="1.2 MB" time="Yesterday" ?downloadable="${true}"></luster-activity-item>
+    </div>
+  `,
+};

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

@@ -0,0 +1,71 @@
+:host { display: block; }
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dc-space-3);
+  padding: var(--dc-space-3) var(--dc-space-4);
+  border-radius: var(--dc-round-3);
+  border-left: 3px solid currentColor;
+  animation: slideIn 0.2s ease-out;
+}
+
+.alert--info    { background: rgba(163, 166, 255, 0.08); color: var(--dc-primary); }
+.alert--success { background: rgba(76, 206, 172, 0.08); color: var(--dc-success); }
+.alert--warning { background: rgba(255, 209, 102, 0.08); color: var(--dc-warning); }
+.alert--error   { background: rgba(255, 180, 171, 0.08); color: var(--dc-error); }
+
+.alert__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.alert__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.alert__title {
+  font-family: var(--dc-font-body);
+  font-size: var(--dc-body-sm);
+  font-weight: 600;
+  color: var(--dc-on-surface);
+}
+
+.alert__message {
+  font-size: var(--dc-body-sm);
+  color: var(--dc-on-surface-variant);
+}
+
+.alert__time {
+  font-size: var(--dc-label-sm);
+  color: var(--dc-on-surface-variant);
+  margin-top: var(--dc-space-1);
+}
+
+.alert__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--dc-on-surface-variant);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dc-space-1);
+  border-radius: var(--dc-round-1);
+  flex-shrink: 0;
+  opacity: 0.6;
+  transition: opacity var(--dc-transition-fast);
+}
+
+.alert__close:hover { opacity: 1; }
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

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

@@ -0,0 +1,171 @@
+import { h } from "@stencil/core";
+export class DcAlert {
+    constructor() {
+        this.heading = '';
+        this.message = '';
+        this.variant = 'info';
+        this.dismissible = true;
+        this.timestamp = '';
+        this.visible = true;
+        this.dismiss = () => {
+            this.visible = false;
+            this.dcDismiss.emit();
+        };
+    }
+    getIcon() {
+        switch (this.variant) {
+            case 'success':
+                return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "2" }), h("path", { d: "M8 12l3 3 5-5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+            case 'error':
+                return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "2" }), h("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
+            case 'warning':
+                return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z", stroke: "currentColor", "stroke-width": "2" }), h("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("line", { x1: "12", y1: "17", x2: "12.01", y2: "17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
+            default:
+                return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "2" }), h("line", { x1: "12", y1: "8", x2: "12", y2: "12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("line", { x1: "12", y1: "16", x2: "12.01", y2: "16", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
+        }
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: `alert alert--${this.variant}`, role: "alert" }, h("span", { class: "alert__icon" }, this.getIcon()), h("div", { class: "alert__body" }, this.heading && h("span", { class: "alert__title" }, this.heading), this.message && h("span", { class: "alert__message" }, this.message), this.timestamp && h("span", { class: "alert__time" }, this.timestamp)), this.dismissible && (h("button", { class: "alert__close", onClick: this.dismiss, "aria-label": "Dismiss" }, h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))));
+    }
+    static get is() { return "luster-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["luster-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["luster-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'success' | 'warning' | 'error'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "timestamp": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "timestamp",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dcDismiss",
+                "name": "dcDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,82 @@
+import { html } from "lit";
+const meta = {
+    title: 'Navigation/Alert',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Mensagem de feedback contextual. Props: `heading`, `message`, `variant`, `dismissible`, `timestamp`.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['info', 'success', 'warning', 'error'],
+            description: 'Tipo de alerta',
+            table: { defaultValue: { summary: 'info' } },
+        },
+        heading: { control: 'text', description: 'Título do alerta' },
+        message: { control: 'text', description: 'Corpo da mensagem' },
+        dismissible: {
+            control: 'boolean',
+            description: 'Exibe botão para fechar',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        timestamp: { control: 'text', description: 'Timestamp exibido no rodapé' },
+    },
+    args: {
+        variant: 'info',
+        heading: 'Heads up',
+        message: 'This is an informational message.',
+        dismissible: true,
+        timestamp: '',
+    },
+};
+export default meta;
+const render = (args) => html `
+  <luster-alert
+    variant="${args.variant}"
+    heading="${args.heading}"
+    message="${args.message}"
+    ?dismissible="${args.dismissible}"
+    timestamp="${args.timestamp}"
+  ></luster-alert>
+`;
+export const Info = {
+    args: { variant: 'info', heading: 'Information', message: 'Your changes have been saved to draft.' },
+    render,
+};
+export const Success = {
+    args: { variant: 'success', heading: 'Published!', message: 'The article is now live on the platform.' },
+    render,
+};
+export const Warning = {
+    args: { variant: 'warning', heading: 'Review needed', message: 'Some references could not be verified.' },
+    render,
+};
+export const Error = {
+    args: { variant: 'error', heading: 'Upload failed', message: 'The file exceeds the 10 MB limit.' },
+    render,
+};
+export const WithTimestamp = {
+    name: 'With Timestamp',
+    args: {
+        variant: 'info',
+        heading: 'Scheduled',
+        message: 'Publication is queued for the next release window.',
+        timestamp: 'Today at 14:30',
+    },
+    render,
+};
+export const AllVariants = {
+    name: 'All Variants',
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:0.75rem;width:480px;">
+      <luster-alert variant="info" heading="Info" message="Informational feedback message."></luster-alert>
+      <luster-alert variant="success" heading="Success" message="Operation completed successfully."></luster-alert>
+      <luster-alert variant="warning" heading="Warning" message="Please review before continuing."></luster-alert>
+      <luster-alert variant="error" heading="Error" message="Something went wrong. Try again."></luster-alert>
+    </div>
+  `,
+};