@xpell/xdashboard 0.1.0-alpha.1

package/dist/types/xtoast.d.ts

@@ -0,0 +1,66 @@
+import { XUIObject } from "@xpell/ui";
+import type { XUIObjectData } from "@xpell/ui";
+export interface XToastData extends XUIObjectData {
+    _type: "toast";
+    _open?: boolean;
+    _text?: string;
+    _variant?: "default" | "success" | "error" | "warn" | "info";
+    _icon?: XUIObjectData;
+    _actions?: XUIObjectData[];
+    _closable?: boolean;
+    _auto_close_ms?: number;
+    _position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    _on_open?: (xobj: XToast) => void;
+    _on_close?: (xobj: XToast) => void;
+    class?: string;
+}
+type XToastVariant = "default" | "success" | "error" | "warn" | "info";
+type XToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+export declare class XToast extends XUIObject {
+    static _xtype: string;
+    private __open;
+    private __text;
+    private __variant;
+    private __icon?;
+    private __actions?;
+    private __closable;
+    private __auto_close_ms?;
+    private __position;
+    private __elapsed;
+    private __last_tick?;
+    private __ready;
+    private readonly __container_id;
+    private readonly __text_id;
+    constructor(data: XToastData);
+    private normalizeBoolean;
+    private normalizeVariant;
+    private normalizePosition;
+    private applyProps;
+    private buildSkeleton;
+    private rebuild;
+    private applyLayout;
+    private resetTimer;
+    onFrame(frameNumber: number): Promise<void>;
+    isOpen(): boolean;
+    setOpen(v: boolean, silent?: boolean): void;
+    open(): void;
+    close(): void;
+    set _open(value: boolean | undefined);
+    get _open(): boolean | undefined;
+    set _text(value: string);
+    get _text(): string;
+    set _variant(value: XToastVariant | undefined);
+    get _variant(): XToastVariant | undefined;
+    set _position(value: XToastPosition | undefined);
+    get _position(): XToastPosition | undefined;
+    set _icon(value: XUIObjectData | undefined);
+    get _icon(): XUIObjectData | undefined;
+    set _actions(value: XUIObjectData[] | undefined);
+    get _actions(): XUIObjectData[] | undefined;
+    set _closable(value: boolean | undefined);
+    get _closable(): boolean | undefined;
+    set _auto_close_ms(value: number | undefined);
+    get _auto_close_ms(): number | undefined;
+}
+export {};
+//# sourceMappingURL=xtoast.d.ts.map

package/dist/types/xtoast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xtoast.d.ts","sourceRoot":"","sources":["../../src/xtoast.ts"],"names":[],"mappings":"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"}

package/dist/types/xtoolbar.d.ts

@@ -0,0 +1,52 @@
+import { XUIObject } from "@xpell/ui";
+import type { XUIObjectData } from "@xpell/ui";
+export interface XToolbarData extends XUIObjectData {
+    _type?: "toolbar";
+    _gap?: number;
+    _align?: "start" | "center" | "end" | "stretch";
+    _justify?: "start" | "center" | "end" | "space-between";
+    _wrap?: boolean;
+    _sticky?: boolean;
+    _top?: number;
+    _elevated?: boolean;
+}
+type XToolbarAlign = "start" | "center" | "end" | "stretch";
+type XToolbarJustify = "start" | "center" | "end" | "space-between";
+export declare class XToolbar extends XUIObject {
+    static _xtype: string;
+    private __gap;
+    private __align;
+    private __justify;
+    private __wrap;
+    private __sticky;
+    private __top;
+    private __elevated;
+    private static readonly managedStyles;
+    constructor(data: XToolbarData);
+    private normalizeAlign;
+    private normalizeJustify;
+    private normalizeGap;
+    private normalizeBoolean;
+    private mapAlign;
+    private mapJustify;
+    private splitClasses;
+    private stripManagedStyles;
+    private buildClassName;
+    private applyLayout;
+    set _gap(value: number | undefined);
+    get _gap(): number | undefined;
+    set _align(value: XToolbarAlign | undefined);
+    get _align(): XToolbarAlign | undefined;
+    set _justify(value: XToolbarJustify | undefined);
+    get _justify(): XToolbarJustify | undefined;
+    set _wrap(value: boolean | undefined);
+    get _wrap(): boolean | undefined;
+    set _sticky(value: boolean | undefined);
+    get _sticky(): boolean | undefined;
+    set _top(value: number | undefined);
+    get _top(): number | undefined;
+    set _elevated(value: boolean | undefined);
+    get _elevated(): boolean | undefined;
+}
+export {};
+//# sourceMappingURL=xtoolbar.d.ts.map

package/dist/types/xtoolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xtoolbar.d.ts","sourceRoot":"","sources":["../../src/xtoolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,KAAK,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC5D,KAAK,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,CAAC;AAEpE,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,CAAC,MAAM,SAAa;IAE1B,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAQlC;gBAES,IAAI,EAAE,YAAY;IAY9B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,WAAW;IAuBnB,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGjC;IAED,IAAI,IAAI,IALQ,MAAM,GAAG,SAAS,CAOjC;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,EAG1C;IAED,IAAI,MAAM,IALQ,aAAa,GAAG,SAAS,CAO1C;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,EAG9C;IAED,IAAI,QAAQ,IALQ,eAAe,GAAG,SAAS,CAO9C;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAGnC;IAED,IAAI,KAAK,IALQ,OAAO,GAAG,SAAS,CAOnC;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAGrC;IAED,IAAI,OAAO,IALQ,OAAO,GAAG,SAAS,CAOrC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGjC;IAED,IAAI,IAAI,IALQ,MAAM,GAAG,SAAS,CAOjC;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAGvC;IAED,IAAI,SAAS,IALQ,OAAO,GAAG,SAAS,CAOvC;CACF"}

package/dist/xdashboard.css

@@ -0,0 +1 @@
+:root,[data-theme]{--x-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";--x-radius: 16px;--x-gap: 12px;--x-primary: #2563eb;--x-success: #16a34a;--x-danger: #dc2626;--x-warning: #f59e0b;--x-focus: rgba(37, 99, 235, .28)}:root[data-theme=light],[data-theme=light]{--x-bg: #f6f7fb;--x-surface: #ffffff;--x-surface-2: #fbfbfd;--x-text: #0f172a;--x-muted: #64748b;--x-border: rgba(15, 23, 42, .1);--x-shadow: 0 10px 30px rgba(2, 6, 23, .08);--x-primary: #2563eb;--x-success: #16a34a;--x-danger: #dc2626;--x-warning: #f59e0b}:root[data-theme=dark],[data-theme=dark]{--x-bg: #1e1e1e;--x-surface: #252526;--x-surface-2: #2d2d2d;--x-text: #d4d4d4;--x-muted: #9da3a8;--x-border: #2a2d2e;--x-shadow: 0 16px 40px rgba(0, 0, 0, .6);--x-primary: #007acc;--x-success: #89d185;--x-danger: #f48771;--x-warning: #cca700;--x-focus: rgba(0, 122, 204, .35)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--x-bg: #1e1e1e;--x-surface: #252526;--x-surface-2: #2d2d2d;--x-text: #d4d4d4;--x-muted: #9da3a8;--x-border: #2a2d2e;--x-shadow: 0 16px 40px rgba(0, 0, 0, .6);--x-primary: #007acc;--x-success: #89d185;--x-danger: #f48771;--x-warning: #cca700;--x-focus: rgba(0, 122, 204, .35)}}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--x-bg: #f6f7fb;--x-surface: #ffffff;--x-surface-2: #fbfbfd;--x-text: #0f172a;--x-muted: #64748b;--x-border: rgba(15, 23, 42, .1);--x-shadow: 0 10px 30px rgba(2, 6, 23, .08);--x-primary: #2563eb;--x-success: #16a34a;--x-danger: #dc2626;--x-warning: #f59e0b}}html[data-theme=dark]{--x-bg: #1e1e1e;--x-surface: #252526;--x-surface-2: #2d2d2d;--x-text: #d4d4d4;--x-muted: #9da3a8;--x-border: #2a2d2e;--x-primary: #007acc;--x-success: #89d185;--x-danger: #f48771;--x-warning: #cca700;--x-focus: rgba(0, 122, 204, .35)}html[data-theme=light]{--x-bg: #f0f0f0;--x-surface: #ffffff;--x-text: #111111;--x-border: #e0e0e0;--x-muted: #666666}html,body{margin:0;padding:0;width:100%;height:100%;background:var(--x-bg);color:var(--x-text)}.xdash,.xdash-bg{font-family:var(--x-font);color:var(--x-text);background:var(--x-bg)}.dash-btn{align-self:flex-start;text-decoration:none;padding:10px 12px;border-radius:12px;font-size:13px;font-weight:700;background:var(--x-primary);color:var(--x-surface);border:1px solid var(--x-border);box-shadow:var(--x-shadow);transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}.xkpi-card{background:var(--x-surface);border:1px solid var(--x-border);border-radius:var(--x-radius);box-shadow:var(--x-shadow)}.xkpi-card .kpi-body{padding:14px 16px;display:flex;flex-direction:column;gap:8px}.xkpi-card .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.xkpi-card .kpi-icon{font-size:16px;opacity:.9}.xkpi-card .kpi-label{font-size:12px;color:var(--x-muted);letter-spacing:.2px}.xkpi-card .kpi-value{color:var(--x-text);font-size:30px;font-weight:800;line-height:1.1}.xkpi-card .kpi-delta{font-size:12px;font-weight:800}.xkpi-card .kpi-delta--up{color:var(--x-success)}.xkpi-card .kpi-delta--down{color:var(--x-danger)}.xkpi-card .kpi-delta--flat{color:var(--x-muted)}.xgrid{display:grid;gap:var(--x-grid-gap, 12px)}.xgrid{grid-template-columns:repeat(var(--x-grid-cols, 1),minmax(0,1fr))}.xgrid[style*=--x-grid-min-col]{grid-template-columns:repeat(auto-fit,minmax(var(--x-grid-min-col),1fr))}.xsection{width:100%}.xsection__container{border:1px solid var(--dash-border);background:var(--dash-surface);border-radius:var(--dash-radius);box-shadow:var(--dash-shadow);padding:16px}.xsection__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.xsection__headings{display:flex;flex-direction:column;gap:4px;min-width:0}.xsection__title{margin:0;font-size:16px;font-weight:700;color:var(--dash-text);line-height:1.2}.xsection__subtitle{margin:0;font-size:13px;color:var(--dash-text-muted);line-height:1.35}.xsection__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.xsection__body{width:100%}:root,[data-theme]{--xscroll-thumb: var(--x-border);--xscroll-thumb-hover: var(--x-text);--xscroll-track: var(--x-surface-2, var(--x-surface))}.xscroll{scrollbar-width:thin;scrollbar-color:var(--xscroll-thumb) var(--xscroll-track)}.xscroll::-webkit-scrollbar{width:10px;height:10px}.xscroll::-webkit-scrollbar-track{background:var(--xscroll-track);border-radius:999px}.xscroll::-webkit-scrollbar-thumb{background:var(--xscroll-thumb);border-radius:999px;border:2px solid var(--xscroll-track)}.xscroll::-webkit-scrollbar-thumb:hover{background:var(--xscroll-thumb-hover)}.xscroll--hide{scrollbar-width:none;-ms-overflow-style:none}.xscroll--hide::-webkit-scrollbar{width:0;height:0;display:none}.xdivider{background:var(--x-divider, var(--x-border));flex:0 0 auto}.xdivider--muted{background:var(--x-divider-muted, var(--x-border))}.xdivider--h{width:var(--xdivider-length, 100%);height:var(--xdivider-thickness, 1px);margin-left:var(--xdivider-inset, 0px);margin-right:var(--xdivider-inset, 0px)}.xdivider--v{height:var(--xdivider-length, 100%);width:var(--xdivider-thickness, 1px);margin-top:var(--xdivider-inset, 0px);margin-bottom:var(--xdivider-inset, 0px)}.xspacer{display:block;background:transparent}.xtoolbar{display:flex;flex-direction:row;align-items:center;gap:var(--xtoolbar-gap, 8px);min-height:40px;padding:8px 12px;border-radius:var(--x-radius, 12px)}.xtoolbar--elevated{background:var(--x-surface);border:1px solid var(--x-border);box-shadow:var(--x-shadow)}.xtable{width:100%}.xtable__table{width:100%;border-collapse:collapse}.xtable__head{background:var(--x-surface);border-bottom:1px solid var(--x-border)}.xtable__th,.xtable__td{padding:10px 12px;color:var(--x-text);text-align:left;vertical-align:middle}.xtable__th{font-size:12px;letter-spacing:.2px;text-transform:uppercase}.xtable__td{font-size:13px}.xtable--dense .xtable__th,.xtable--dense .xtable__td{padding:6px 10px}.xtable--bordered .xtable__table{border:1px solid var(--x-border)}.xtable--bordered .xtable__th,.xtable--bordered .xtable__td{border-bottom:1px solid var(--x-border)}.xtable--striped .xtable__body tr:nth-child(2n) .xtable__td{background:var(--x-surface-2, var(--x-surface))}.xtable--hover .xtable__body tr:hover .xtable__td{background:var(--x-hover, var(--x-surface-2, var(--x-surface)))}.xtable__empty{text-align:center;color:var(--x-muted, var(--x-text))}.xtable__badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--x-surface-2, var(--x-surface));color:var(--x-text);border:1px solid var(--x-border)}.xbadge{--xbadge-bg: var(--x-surface-2, var(--x-surface));--xbadge-fg: var(--x-text);--xbadge-border: var(--x-border);--xbadge-dot: var(--xbadge-fg);--xbadge-gap: 6px;--xbadge-radius: var(--x-radius, 10px);--xbadge-pad-y: 4px;--xbadge-pad-x: 8px;--xbadge-font: 12px;--xbadge-dot-size: 6px;display:inline-flex;align-items:center;gap:var(--xbadge-gap);padding:var(--xbadge-pad-y) var(--xbadge-pad-x);font-size:var(--xbadge-font);line-height:1;border-radius:var(--xbadge-radius);background:var(--xbadge-bg);color:var(--xbadge-fg);border:1px solid var(--xbadge-border);white-space:nowrap}.xbadge__dot{width:var(--xbadge-dot-size);height:var(--xbadge-dot-size);border-radius:999px;background:var(--xbadge-dot);display:none}.xbadge--dot .xbadge__dot{display:inline-block}.xbadge--pill{border-radius:999px}.xbadge--sm{--xbadge-pad-y: 2px;--xbadge-pad-x: 6px;--xbadge-font: 11px;--xbadge-dot-size: 5px}.xbadge--md{--xbadge-pad-y: 4px;--xbadge-pad-x: 8px;--xbadge-font: 12px;--xbadge-dot-size: 6px}.xbadge--default{--xbadge-bg: var(--x-surface-2, var(--x-surface));--xbadge-fg: var(--x-text);--xbadge-border: var(--x-border);--xbadge-dot: var(--x-text)}.xbadge--success{--xbadge-bg: var(--x-surface-2, var(--x-surface));--xbadge-fg: var(--x-success, var(--x-text));--xbadge-border: var(--x-success, var(--x-border));--xbadge-dot: var(--x-success, var(--x-text))}.xbadge--warn{--xbadge-bg: var(--x-surface-2, var(--x-surface));--xbadge-fg: var(--x-warning, var(--x-text));--xbadge-border: var(--x-warning, var(--x-border));--xbadge-dot: var(--x-warning, var(--x-text))}.xbadge--error{--xbadge-bg: var(--x-surface-2, var(--x-surface));--xbadge-fg: var(--x-danger, var(--x-text));--xbadge-border: var(--x-danger, var(--x-border));--xbadge-dot: var(--x-danger, var(--x-text))}.xbadge--info{--xbadge-bg: var(--x-surface-2, var(--x-surface));--xbadge-fg: var(--x-primary, var(--x-text));--xbadge-border: var(--x-primary, var(--x-border));--xbadge-dot: var(--x-primary, var(--x-text))}.xempty{display:flex;width:100%}.xempty--center{align-items:center;text-align:center}.xempty--start{align-items:flex-start;text-align:left}.xempty__stack{width:100%;--xstack-gap: var(--x-empty-gap, 12px)}.xempty__title{color:var(--x-text);font-weight:700}.xempty__desc{color:var(--x-text-muted, var(--x-muted, var(--x-text)))}.xempty--sm{--x-empty-gap: 8px;--x-empty-title-size: 14px;--x-empty-desc-size: 12px}.xempty--md{--x-empty-gap: 12px;--x-empty-title-size: 16px;--x-empty-desc-size: 13px}.xempty--lg{--x-empty-gap: 16px;--x-empty-title-size: 18px;--x-empty-desc-size: 14px}.xempty--sm .xempty__title,.xempty--md .xempty__title,.xempty--lg .xempty__title{font-size:var(--x-empty-title-size)}.xempty--sm .xempty__desc,.xempty--md .xempty__desc,.xempty--lg .xempty__desc{font-size:var(--x-empty-desc-size)}.xsearch{--xsearch-gap: 8px;--xsearch-pad-y: 6px;--xsearch-pad-x: 10px;--xsearch-font: 13px;--xsearch-height: 34px;display:inline-flex;align-items:center;gap:var(--xsearch-gap);padding:var(--xsearch-pad-y) var(--xsearch-pad-x);min-height:var(--xsearch-height);background:var(--x-surface);border:1px solid var(--x-border);border-radius:var(--x-radius, 12px);color:var(--x-text)}.xsearch--sm{--xsearch-pad-y: 4px;--xsearch-pad-x: 8px;--xsearch-font: 12px;--xsearch-height: 30px}.xsearch--md{--xsearch-pad-y: 6px;--xsearch-pad-x: 10px;--xsearch-font: 13px;--xsearch-height: 34px}.xsearch:focus-within{border-color:var(--x-primary);box-shadow:0 0 0 3px var(--x-focus)}.xsearch--disabled{opacity:.6;pointer-events:none}.xsearch__icon{font-size:14px;color:var(--x-text-muted, var(--x-muted, var(--x-text)))}.xsearch__input{font-size:var(--xsearch-font);color:var(--x-text);background:transparent;border:none;outline:none;flex:1 1 auto;min-width:0}.xsearch__input::placeholder{color:var(--x-text-muted, var(--x-muted, var(--x-text)))}.xsearch__clear{font-size:16px;line-height:1;padding:0 4px;border:none;background:transparent;color:var(--x-text-muted, var(--x-muted, var(--x-text)))}.xsearch__clear:hover{color:var(--x-text)}.xigroup{display:flex;flex-direction:row;align-items:center;gap:var(--xigroup-gap, 8px)}.xigroup--dense{--xigroup-gap: 6px}.xigroup--merged{background:var(--x-surface);border:1px solid var(--x-border);border-radius:var(--x-radius, 12px);padding:4px}.xselect{display:inline-flex;align-items:center}.xselect__control{width:100%;min-width:0;background:var(--x-surface);border:1px solid var(--x-border);border-radius:var(--x-radius, 12px);color:var(--x-text);padding:var(--xselect-pad-y, 6px) var(--xselect-pad-x, 10px);font-size:var(--xselect-font, 13px);outline:none}.xselect__control:focus{border-color:var(--x-primary);box-shadow:0 0 0 3px var(--x-focus)}.xselect--disabled{opacity:.6;cursor:not-allowed}.xselect--disabled .xselect__control{cursor:not-allowed}.xselect--sm{--xselect-pad-y: 4px;--xselect-pad-x: 8px;--xselect-font: 12px}.xselect--md{--xselect-pad-y: 6px;--xselect-pad-x: 10px;--xselect-font: 13px}.xfield{display:flex;width:100%}.xfield__stack{width:100%;--xstack-gap: var(--x-field-gap, 10px)}.xfield__label-row{align-items:center}.xfield__label{color:var(--x-text);font-weight:600}.xfield__required{color:var(--x-danger, var(--x-text))}.xfield__control{width:100%}.xfield__hint{color:var(--x-text-muted, var(--x-muted, var(--x-text)));font-size:var(--x-field-hint-size, 12px)}.xfield__error{color:var(--x-danger, var(--x-text));font-size:var(--x-field-hint-size, 12px)}.xfield--sm{--x-field-gap: 8px;--x-field-label-size: 12px;--x-field-hint-size: 11px}.xfield--md{--x-field-gap: 10px;--x-field-label-size: 13px;--x-field-hint-size: 12px}.xfield--sm .xfield__label,.xfield--md .xfield__label{font-size:var(--x-field-label-size)}.xfield__row--inline{align-items:center}.xdrawer{position:relative;display:flex;flex-direction:column;height:100%;width:var(--xdrawer-width, 360px);background:var(--x-surface);color:var(--x-text);transform:translate(100%);transition:transform .18s ease;border-left:1px solid var(--x-border)}.xdrawer--left{transform:translate(-100%);border-left:none;border-right:1px solid var(--x-border)}.xdrawer--right{transform:translate(100%)}.xdrawer--open{transform:translate(0)}.xdrawer--elevated{box-shadow:var(--x-shadow)}.xdrawer__panel{display:flex;flex-direction:column;height:100%}.xdrawer__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--x-border)}.xdrawer__title{font-weight:600;color:var(--x-text)}.xdrawer__close{background:transparent;border:none;color:var(--x-text)}.xdrawer__body{flex:1 1 auto;min-height:0;padding:12px 14px}.xdrawer__scroll{min-height:0}.xnavlist{display:flex;flex-direction:column;gap:var(--xnavlist-gap, 6px)}.xnavlist__list{width:100%}.xnavlist__item{display:flex;align-items:center;gap:var(--xnavlist-item-gap, 10px);padding:var(--xnavlist-item-padding, 8px 10px);border-radius:var(--x-radius, 12px);color:var(--x-text);background:transparent;cursor:pointer}.xnavlist__item:hover{background:var(--x-surface-2)}.xnavlist__item--active{background:var(--x-surface-2);border:1px solid var(--x-border)}.xnavlist__item--disabled{opacity:.5;cursor:not-allowed}.xnavlist__label{flex:1 1 auto}.xnavlist__badge{flex:0 0 auto}.xnavlist--dense{--xnavlist-item-padding: 6px 8px;--xnavlist-item-gap: 8px}.xnavlist--dividers .xnavlist__item{border-bottom:1px solid var(--x-border);border-radius:0}.xnavlist--dividers .xnavlist__item:last-child{border-bottom:none}.xsidebar{width:var(--xsidebar-width, 280px);height:100%;display:flex;flex-direction:column;background:var(--x-surface);color:var(--x-text);border-right:1px solid var(--x-border)}.xsidebar--right{border-right:none;border-left:1px solid var(--x-border)}.xsidebar__panel{display:flex;flex-direction:column;height:100%}.xsidebar__header{padding:var(--xsidebar-pad, 12px 14px)}.xsidebar__title{font-weight:600;color:var(--x-text)}.xsidebar__subtitle{color:var(--x-muted);font-size:12px}.xsidebar__body{flex:1 1 auto;min-height:0;padding:var(--xsidebar-pad, 12px 14px)}.xsidebar__footer{padding:var(--xsidebar-pad, 12px 14px)}.xsidebar__scroll{min-height:0}.xsidebar--collapsed{width:var(--xsidebar-width-collapsed, 72px)}.xmodal{position:fixed;inset:0;display:none;z-index:var(--x-z-modal, 1000)}.xmodal--open{display:block}.xmodal__backdrop{position:absolute;inset:0;background:var(--x-overlay, rgba(0, 0, 0, .5))}.xmodal__panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1}.xmodal__card{width:var(--xmodal-width, 560px);max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);background:var(--x-surface);color:var(--x-text);border:1px solid var(--x-border);border-radius:var(--x-radius, 12px);box-shadow:var(--x-shadow);display:flex;flex-direction:column}.xmodal__header{padding:12px 14px}.xmodal__title{font-weight:600;color:var(--x-text)}.xmodal__subtitle{color:var(--x-muted);font-size:12px}.xmodal__close{background:transparent;border:none;color:var(--x-text)}.xmodal__body{padding:12px 14px;min-height:0}.xmodal__scroll{max-height:60vh}.xmodal__footer{padding:12px 14px}.xmodal--sm{--xmodal-width: 420px}.xmodal--md{--xmodal-width: 560px}.xmodal--lg{--xmodal-width: 720px}.xtoast{position:fixed;z-index:var(--x-z-toast, 1100);max-width:360px;pointer-events:none;opacity:0}.xtoast--open{pointer-events:auto;opacity:1}.xtoast--top-right{top:var(--x-toast-offset, 16px);right:var(--x-toast-offset, 16px)}.xtoast--top-left{top:var(--x-toast-offset, 16px);left:var(--x-toast-offset, 16px)}.xtoast--bottom-right{bottom:var(--x-toast-offset, 16px);right:var(--x-toast-offset, 16px)}.xtoast--bottom-left{bottom:var(--x-toast-offset, 16px);left:var(--x-toast-offset, 16px)}.xtoast__container{display:flex;align-items:center;gap:var(--x-gap, 12px);padding:10px 12px;background:var(--x-surface);color:var(--x-text);border:1px solid var(--x-border);border-left:4px solid var(--xtoast-accent, var(--x-border));border-radius:var(--x-radius, 10px);box-shadow:var(--x-shadow)}.xtoast__text{flex:1 1 auto}.xtoast__actions{display:flex;gap:8px}.xtoast__close{background:transparent;border:none;color:var(--x-text)}.xtoast--success{--xtoast-accent: var(--x-success)}.xtoast--error{--xtoast-accent: var(--x-danger)}.xtoast--warn{--xtoast-accent: var(--x-warning)}.xtoast--info{--xtoast-accent: var(--x-primary)}:root,[data-theme]{--xstack-gap: 12px;--xstack-accent: var(--x-primary);--xstack-text: var(--x-text)}.xstack{display:flex;gap:var(--xstack-gap, 12px);align-items:stretch;justify-content:flex-start}.xstack--v{flex-direction:column}.xstack--h{flex-direction:row}.xcard{background:var(--x-surface);border:1px solid var(--x-border);border-radius:var(--x-radius);box-shadow:var(--x-shadow);overflow:hidden}.xcard__inner{display:flex;flex-direction:column}.xcard__image{width:100%;height:auto;display:block}.xcard--no-image .xcard__image{display:none}.xcard__body{padding:16px;display:flex;flex-direction:column;gap:10px}.xcard__title{font-size:14px;font-weight:700;letter-spacing:.2px;margin:0;color:var(--x-text)}.xcard__text{font-size:13px;color:var(--x-muted);line-height:1.45;margin:0}.xcard__link{align-self:flex-start;text-decoration:none}.xcard__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.dash-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--x-bg);color:var(--x-text)}.dash-topbar{background:var(--x-surface);border-bottom:1px solid var(--x-border);padding:12px 16px}.dash-led{width:20px;height:20px;border-radius:999px;display:inline-block;box-shadow:0 0 0 1px var(--x-border)}.dash-led--connected{background:var(--x-success)}.dash-led--connecting{background:var(--x-warning)}.dash-led--disconnected{background:var(--x-danger)}.dash-topbar__title{font-weight:700}.dash-body{flex:1;min-height:0;display:flex}.dash-sidebar{width:248px;min-height:0;display:flex;flex-direction:column;gap:12px;padding:12px;background:var(--x-surface);border-right:1px solid var(--x-border);transition:width .16s ease}.dash-sidebar--collapsed{width:64px}.dash-sidebar__header{display:flex;align-items:center;gap:8px}.dash-sidebar__logo{font-size:18px}.dash-sidebar--collapsed .dash-sidebar__label,.dash-sidebar--collapsed .xnavlist__label{display:none}.dash-sidebar--collapsed .xnavlist__item{justify-content:center}.dash-nav__icon{width:20px;text-align:center}.dash-main{flex:1;min-width:0;padding:16px}.dash-region{min-height:0}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@xpell/xdashboard",
+  "version": "0.1.0-alpha.1",
+  "description": "Dashboard XUI component library for Xpell UI",
+  "private": false,
+  "type": "module",
+  "author": "Tamir Fridman",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./xdashboard.css": "./dist/xdashboard.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@xpell/core": ">=2.0.0-alpha",
+    "@xpell/ui": ">=2.0.0-alpha"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf dist",
+    "build": "vite build && tsc -p tsconfig.build.json"
+  }
+}