@deepfuture/dui-components 0.0.1

package/hstack/hstack.js

@@ -0,0 +1,141 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/hstack */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    --hstack-gap: var(--space-4);
+    --hstack-align: center;
+    --hstack-justify: stretch;
+    display: block;
+    width: 100%;
+  }
+
+  :host([gap="0"]) {
+    --hstack-gap: var(--space-0);
+  }
+  :host([gap="1"]) {
+    --hstack-gap: var(--space-1);
+  }
+  :host([gap="2"]) {
+    --hstack-gap: var(--space-2);
+  }
+  :host([gap="3"]) {
+    --hstack-gap: var(--space-3);
+  }
+  :host([gap="4"]) {
+    --hstack-gap: var(--space-4);
+  }
+  :host([gap="5"]) {
+    --hstack-gap: var(--space-5);
+  }
+  :host([gap="6"]) {
+    --hstack-gap: var(--space-6);
+  }
+  :host([gap="8"]) {
+    --hstack-gap: var(--space-8);
+  }
+  :host([gap="10"]) {
+    --hstack-gap: var(--space-10);
+  }
+  :host([gap="12"]) {
+    --hstack-gap: var(--space-12);
+  }
+  :host([gap="16"]) {
+    --hstack-gap: var(--space-16);
+  }
+
+  :host([align="start"]) {
+    --hstack-align: flex-start;
+  }
+  :host([align="center"]) {
+    --hstack-align: center;
+  }
+  :host([align="end"]) {
+    --hstack-align: flex-end;
+  }
+  :host([align="stretch"]) {
+    --hstack-align: stretch;
+  }
+  :host([align="baseline"]) {
+    --hstack-align: baseline;
+  }
+
+  :host([justify="start"]) {
+    --hstack-justify: flex-start;
+  }
+  :host([justify="center"]) {
+    --hstack-justify: center;
+  }
+  :host([justify="end"]) {
+    --hstack-justify: flex-end;
+  }
+  :host([justify="between"]) {
+    --hstack-justify: space-between;
+  }
+  :host([justify="around"]) {
+    --hstack-justify: space-around;
+  }
+  :host([justify="evenly"]) {
+    --hstack-justify: space-evenly;
+  }
+  :host([justify="stretch"]) {
+    --hstack-justify: stretch;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: row;
+    gap: var(--hstack-gap);
+    align-items: var(--hstack-align);
+    justify-content: var(--hstack-justify);
+  }
+`;
+/**
+ * `<dui-hstack>` — A horizontal stack layout component.
+ *
+ * @slot - Stack content.
+ * @csspart root - The stack container.
+ * @cssprop --hstack-gap - Override gap between items.
+ * @cssprop --hstack-align - Override align-items.
+ * @cssprop --hstack-justify - Override justify-content.
+ */
+export class DuiHstack extends LitElement {
+    static { this.tagName = "dui-hstack"; }
+    static { this.styles = [base, styles]; }
+    #gap_accessor_storage = "4";
+    /** Gap between stack items. Maps to space tokens. */
+    get gap() { return this.#gap_accessor_storage; }
+    set gap(value) { this.#gap_accessor_storage = value; }
+    #align_accessor_storage = "center";
+    /** Alignment of items on the cross axis. */
+    get align() { return this.#align_accessor_storage; }
+    set align(value) { this.#align_accessor_storage = value; }
+    #justify_accessor_storage = "stretch";
+    /** Justification of items on the main axis. */
+    get justify() { return this.#justify_accessor_storage; }
+    set justify(value) { this.#justify_accessor_storage = value; }
+    render() {
+        return html `
+      <div part="root">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DuiHstack.prototype, "gap", null);
+__decorate([
+    property({ reflect: true })
+], DuiHstack.prototype, "align", null);
+__decorate([
+    property({ reflect: true })
+], DuiHstack.prototype, "justify", null);

package/hstack/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiHstack } from "./hstack.js";
+export type { HstackAlignment, HstackJustify } from "./hstack.js";

package/hstack/index.js

@@ -0,0 +1 @@
+export { DuiHstack } from "./hstack.js";

package/hstack/register.d.ts

@@ -0,0 +1 @@
+export {};

package/hstack/register.js

@@ -0,0 +1,4 @@
+import { DuiHstack } from "./index.js";
+if (!customElements.get(DuiHstack.tagName)) {
+    customElements.define(DuiHstack.tagName, DuiHstack);
+}

package/icon/icon.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+/**
+ * `<dui-icon>` — Slot-based SVG icon container.
+ *
+ * Consumers provide their own SVG via the default slot. The icon inherits
+ * `currentColor` and sizes itself via `--icon-size`.
+ *
+ * @slot - SVG element to display.
+ * @cssprop [--icon-size=1em] - Icon dimensions.
+ * @cssprop [--icon-color=currentColor] - Icon color.
+ */
+export declare class DuiIcon extends LitElement {
+    static tagName: "dui-icon";
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}

package/icon/icon.js

@@ -0,0 +1,34 @@
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-size, 1em);
+    height: var(--icon-size, 1em);
+    color: var(--icon-color, currentColor);
+  }
+
+  ::slotted(svg) {
+    width: 100%;
+    height: 100%;
+  }
+`;
+/**
+ * `<dui-icon>` — Slot-based SVG icon container.
+ *
+ * Consumers provide their own SVG via the default slot. The icon inherits
+ * `currentColor` and sizes itself via `--icon-size`.
+ *
+ * @slot - SVG element to display.
+ * @cssprop [--icon-size=1em] - Icon dimensions.
+ * @cssprop [--icon-color=currentColor] - Icon color.
+ */
+export class DuiIcon extends LitElement {
+    static { this.tagName = "dui-icon"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+}

package/icon/index.d.ts

@@ -0,0 +1 @@
+export { DuiIcon } from "./icon.js";

package/icon/index.js

@@ -0,0 +1 @@
+export { DuiIcon } from "./icon.js";

package/icon/register.d.ts

@@ -0,0 +1 @@
+export {};

package/icon/register.js

@@ -0,0 +1,4 @@
+import { DuiIcon } from "./icon.js";
+if (!customElements.get(DuiIcon.tagName)) {
+    customElements.define(DuiIcon.tagName, DuiIcon);
+}

package/input/index.d.ts

@@ -0,0 +1 @@
+export { DuiInput, inputChangeEvent } from "./input.js";

package/input/index.js

@@ -0,0 +1 @@
+export { DuiInput, inputChangeEvent } from "./input.js";

package/input/input.d.ts

@@ -0,0 +1,47 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/input */
+import { LitElement, type TemplateResult } from "lit";
+export declare const inputChangeEvent: (detail: {
+    value: string;
+}) => CustomEvent<{
+    value: string;
+}>;
+/**
+ * `<dui-input>` — A native input element that integrates with dui-field.
+ *
+ * Automatically works with Field for accessible labeling and validation.
+ *
+ * @csspart input - The native input element.
+ * @fires input-change - Fired when value changes. Detail: { value: string }
+ */
+export declare class DuiInput extends LitElement {
+    #private;
+    static tagName: "dui-input";
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Input type (text, email, password, etc.) */
+    accessor type: string;
+    /** Current input value. */
+    accessor value: string;
+    /** Placeholder text. */
+    accessor placeholder: string;
+    /** Whether the input is disabled. */
+    accessor disabled: boolean;
+    /** Whether the input is required. */
+    accessor required: boolean;
+    /** Whether the input is read-only. */
+    accessor readonly: boolean;
+    /** Minimum length for text inputs. */
+    accessor minLength: number | undefined;
+    /** Maximum length for text inputs. */
+    accessor maxLength: number | undefined;
+    /** Pattern for validation. */
+    accessor pattern: string | undefined;
+    /** Name attribute for form submission. */
+    accessor name: string;
+    /** Autocomplete hint for the browser. */
+    accessor autocomplete: string | undefined;
+    /** Whether the input should receive focus on mount. */
+    accessor autofocus: boolean;
+    firstUpdated(): void;
+    render(): TemplateResult;
+}

package/input/input.js

@@ -0,0 +1,205 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/input */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const inputChangeEvent = customEvent("input-change", {
+    bubbles: true,
+    composed: true,
+});
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="input"] {
+    box-sizing: border-box;
+    width: 100%;
+    outline: none;
+    transition-property: border-color, box-shadow, background, filter, transform;
+  }
+
+  [part="input"]:disabled {
+    cursor: not-allowed;
+  }
+`;
+/**
+ * `<dui-input>` — A native input element that integrates with dui-field.
+ *
+ * Automatically works with Field for accessible labeling and validation.
+ *
+ * @csspart input - The native input element.
+ * @fires input-change - Fired when value changes. Detail: { value: string }
+ */
+export class DuiInput extends LitElement {
+    static { this.tagName = "dui-input"; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [base, styles]; }
+    #type_accessor_storage = "text";
+    /** Input type (text, email, password, etc.) */
+    get type() { return this.#type_accessor_storage; }
+    set type(value) { this.#type_accessor_storage = value; }
+    #value_accessor_storage = "";
+    /** Current input value. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #placeholder_accessor_storage = "";
+    /** Placeholder text. */
+    get placeholder() { return this.#placeholder_accessor_storage; }
+    set placeholder(value) { this.#placeholder_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether the input is disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #required_accessor_storage = false;
+    /** Whether the input is required. */
+    get required() { return this.#required_accessor_storage; }
+    set required(value) { this.#required_accessor_storage = value; }
+    #readonly_accessor_storage = false;
+    /** Whether the input is read-only. */
+    get readonly() { return this.#readonly_accessor_storage; }
+    set readonly(value) { this.#readonly_accessor_storage = value; }
+    #minLength_accessor_storage = undefined;
+    /** Minimum length for text inputs. */
+    get minLength() { return this.#minLength_accessor_storage; }
+    set minLength(value) { this.#minLength_accessor_storage = value; }
+    #maxLength_accessor_storage = undefined;
+    /** Maximum length for text inputs. */
+    get maxLength() { return this.#maxLength_accessor_storage; }
+    set maxLength(value) { this.#maxLength_accessor_storage = value; }
+    #pattern_accessor_storage = undefined;
+    /** Pattern for validation. */
+    get pattern() { return this.#pattern_accessor_storage; }
+    set pattern(value) { this.#pattern_accessor_storage = value; }
+    #name_accessor_storage = "";
+    /** Name attribute for form submission. */
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #autocomplete_accessor_storage = undefined;
+    /** Autocomplete hint for the browser. */
+    get autocomplete() { return this.#autocomplete_accessor_storage; }
+    set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
+    #autofocus_accessor_storage = false;
+    /** Whether the input should receive focus on mount. */
+    get autofocus() { return this.#autofocus_accessor_storage; }
+    set autofocus(value) { this.#autofocus_accessor_storage = value; }
+    #ctx_accessor_storage;
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    get #controlId() {
+        return this.#ctx?.controlId ?? "";
+    }
+    get #descriptionId() {
+        return this.#ctx?.descriptionId;
+    }
+    get #errorId() {
+        return this.#ctx?.errorId;
+    }
+    get #isDisabled() {
+        return this.disabled || (this.#ctx?.disabled ?? false);
+    }
+    get #isInvalid() {
+        return this.#ctx?.invalid ?? false;
+    }
+    firstUpdated() {
+        if (this.autofocus) {
+            this.focus();
+        }
+    }
+    #onInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.#ctx?.markDirty();
+        this.#ctx?.setFilled(this.value.length > 0);
+        this.dispatchEvent(inputChangeEvent({ value: this.value }));
+    };
+    #onFocus = () => {
+        this.#ctx?.setFocused(true);
+    };
+    #onBlur = () => {
+        this.#ctx?.setFocused(false);
+        this.#ctx?.markTouched();
+    };
+    render() {
+        const describedBy = [this.#descriptionId, this.#isInvalid ? this.#errorId : undefined]
+            .filter(Boolean)
+            .join(" ") || undefined;
+        return html `
+      <input
+        part="input"
+        id="${this.#controlId}"
+        type="${this.type}"
+        .value="${live(this.value)}"
+        placeholder="${this.placeholder}"
+        ?disabled="${this.#isDisabled}"
+        ?required="${this.required}"
+        ?readonly="${this.readonly}"
+        minlength="${ifDefined(this.minLength)}"
+        maxlength="${ifDefined(this.maxLength)}"
+        pattern="${ifDefined(this.pattern)}"
+        name="${this.name}"
+        autocomplete="${ifDefined(this.autocomplete)}"
+        aria-describedby="${ifDefined(describedBy)}"
+        aria-invalid="${this.#isInvalid}"
+        ?data-disabled="${this.#isDisabled}"
+        ?data-invalid="${this.#isInvalid}"
+        ?data-valid="${!this.#isInvalid}"
+        ?data-dirty="${this.#ctx?.dirty}"
+        ?data-touched="${this.#ctx?.touched}"
+        ?data-filled="${this.#ctx?.filled}"
+        ?data-focused="${this.#ctx?.focused}"
+        @input="${this.#onInput}"
+        @focus="${this.#onFocus}"
+        @blur="${this.#onBlur}"
+      />
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], DuiInput.prototype, "type", null);
+__decorate([
+    property({ type: String })
+], DuiInput.prototype, "value", null);
+__decorate([
+    property({ type: String })
+], DuiInput.prototype, "placeholder", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiInput.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean })
+], DuiInput.prototype, "required", null);
+__decorate([
+    property({ type: Boolean })
+], DuiInput.prototype, "readonly", null);
+__decorate([
+    property({ type: Number, attribute: "minlength" })
+], DuiInput.prototype, "minLength", null);
+__decorate([
+    property({ type: Number, attribute: "maxlength" })
+], DuiInput.prototype, "maxLength", null);
+__decorate([
+    property({ type: String })
+], DuiInput.prototype, "pattern", null);
+__decorate([
+    property({ type: String })
+], DuiInput.prototype, "name", null);
+__decorate([
+    property({ type: String })
+], DuiInput.prototype, "autocomplete", null);
+__decorate([
+    property({ type: Boolean })
+], DuiInput.prototype, "autofocus", null);

package/input/register.d.ts

@@ -0,0 +1 @@
+export {};

package/input/register.js

@@ -0,0 +1,4 @@
+import { DuiInput } from "./index.js";
+if (!customElements.get(DuiInput.tagName)) {
+    customElements.define(DuiInput.tagName, DuiInput);
+}

package/link/index.d.ts

@@ -0,0 +1 @@
+export { DuiLink, spaNavigateEvent } from "./link.js";

package/link/index.js

@@ -0,0 +1 @@
+export { DuiLink, spaNavigateEvent } from "./link.js";

package/link/link.d.ts

@@ -0,0 +1,27 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/link */
+import { LitElement, type TemplateResult } from "lit";
+export declare const spaNavigateEvent: (detail: {
+    href: string;
+}) => CustomEvent<{
+    href: string;
+}>;
+/**
+ * `<dui-link>` — A layout-transparent SPA link.
+ *
+ * Renders a real `<a href>` inside shadow DOM for native link behaviors
+ * (right-click menu, URL preview on hover, accessibility). On plain
+ * left-click, dispatches a bubbling `spa-navigate` event instead of
+ * performing a full page navigation. Modifier-clicks (cmd/ctrl/shift/middle)
+ * fall through to the browser for new-tab behavior.
+ *
+ * @slot - Link content.
+ * @fires spa-navigate - Fired on plain left-click. Detail: { href }.
+ */
+export declare class DuiLink extends LitElement {
+    #private;
+    static tagName: "dui-link";
+    static styles: import("lit").CSSResult[];
+    /** The URL to navigate to. */
+    accessor href: string;
+    render(): TemplateResult;
+}

package/link/link.js

@@ -0,0 +1,57 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/link */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const spaNavigateEvent = customEvent("spa-navigate", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: contents;
+  }
+
+  a {
+    display: contents;
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+/**
+ * `<dui-link>` — A layout-transparent SPA link.
+ *
+ * Renders a real `<a href>` inside shadow DOM for native link behaviors
+ * (right-click menu, URL preview on hover, accessibility). On plain
+ * left-click, dispatches a bubbling `spa-navigate` event instead of
+ * performing a full page navigation. Modifier-clicks (cmd/ctrl/shift/middle)
+ * fall through to the browser for new-tab behavior.
+ *
+ * @slot - Link content.
+ * @fires spa-navigate - Fired on plain left-click. Detail: { href }.
+ */
+export class DuiLink extends LitElement {
+    static { this.tagName = "dui-link"; }
+    static { this.styles = [base, styles]; }
+    #href_accessor_storage = "";
+    /** The URL to navigate to. */
+    get href() { return this.#href_accessor_storage; }
+    set href(value) { this.#href_accessor_storage = value; }
+    #onClick = (event) => {
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        this.dispatchEvent(spaNavigateEvent({ href: this.href }));
+    };
+    render() {
+        return html `<a href="${this.href}" @click="${this.#onClick}"><slot></slot></a>`;
+    }
+}
+__decorate([
+    property()
+], DuiLink.prototype, "href", null);

package/link/register.d.ts

@@ -0,0 +1 @@
+export {};

package/link/register.js

@@ -0,0 +1,4 @@
+import { DuiLink } from "./index.js";
+if (!customElements.get(DuiLink.tagName)) {
+    customElements.define(DuiLink.tagName, DuiLink);
+}

package/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiMenu } from "./menu.js";
+export { DuiMenuItem } from "./menu-item.js";

package/menu/index.js

@@ -0,0 +1,2 @@
+export { DuiMenu } from "./menu.js";
+export { DuiMenuItem } from "./menu-item.js";

package/menu/menu-item.d.ts

@@ -0,0 +1,17 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/menu */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-menu-item>` — An item within a `dui-menu`.
+ *
+ * @slot default - Item content (text, icons, etc.).
+ */
+export declare class DuiMenuItem extends LitElement {
+    static tagName: "dui-menu-item";
+    static styles: import("lit").CSSResult[];
+    /** Visual variant. */
+    accessor variant: "default" | "danger";
+    /** Whether the item is disabled. */
+    accessor disabled: boolean;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}