@deepfuture/dui-components 0.0.1

package/tabs/index.js

@@ -0,0 +1,5 @@
+export { DuiTabs, valueChangeEvent } from "./tabs.js";
+export { DuiTabsList } from "./tabs-list.js";
+export { DuiTab } from "./tab.js";
+export { DuiTabsPanel } from "./tabs-panel.js";
+export { DuiTabsIndicator } from "./tabs-indicator.js";

package/tabs/register.d.ts

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

package/tabs/register.js

@@ -0,0 +1,10 @@
+import { DuiTabs } from "./tabs.js";
+import { DuiTabsList } from "./tabs-list.js";
+import { DuiTab } from "./tab.js";
+import { DuiTabsPanel } from "./tabs-panel.js";
+import { DuiTabsIndicator } from "./tabs-indicator.js";
+for (const C of [DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator]) {
+    if (!customElements.get(C.tagName)) {
+        customElements.define(C.tagName, C);
+    }
+}

package/tabs/tab.d.ts

@@ -0,0 +1,16 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+import { LitElement, type TemplateResult } from "lit";
+import { type TabsContext } from "./tabs-context.js";
+/**
+ * Individual tab trigger button.
+ */
+export declare class DuiTab extends LitElement {
+    #private;
+    static tagName: "dui-tab";
+    static styles: import("lit").CSSResult[];
+    /** Tab value used to match with the corresponding panel. */
+    accessor value: string;
+    accessor disabled: boolean;
+    accessor _ctx: TabsContext;
+    render(): TemplateResult;
+}

package/tabs/tab.js

@@ -0,0 +1,98 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+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 { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { tabsContext } from "./tabs-context.js";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="tab"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    margin: 0;
+    outline: 0;
+    background: none;
+    appearance: none;
+    font-family: inherit;
+    user-select: none;
+    white-space: nowrap;
+    word-break: keep-all;
+    cursor: pointer;
+    transition-property: color, box-shadow, background, filter, transform;
+  }
+
+  [part="tab"][data-disabled] {
+    cursor: not-allowed;
+  }
+`;
+/**
+ * Individual tab trigger button.
+ */
+export class DuiTab extends LitElement {
+    static { this.tagName = "dui-tab"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = "";
+    /** Tab value used to match with the corresponding panel. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    get #isActive() {
+        return this._ctx?.value === this.value;
+    }
+    #handleClick = () => {
+        if (this.disabled)
+            return;
+        this._ctx?.select(this.value);
+    };
+    #handleKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this._ctx?.select(this.value);
+        }
+    };
+    render() {
+        const isActive = this.#isActive;
+        return html `
+      <button
+        part="tab"
+        role="tab"
+        aria-selected=${isActive}
+        ?data-active=${isActive}
+        ?data-disabled=${this.disabled}
+        ?disabled=${this.disabled}
+        tabindex=${isActive ? 0 : -1}
+        @click=${this.#handleClick}
+        @keydown=${this.#handleKeyDown}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiTab.prototype, "value", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiTab.prototype, "disabled", null);
+__decorate([
+    consume({ context: tabsContext, subscribe: true })
+], DuiTab.prototype, "_ctx", null);

package/tabs/tabs-context.d.ts

@@ -0,0 +1,8 @@
+export type TabsContext = {
+    readonly value: string | undefined;
+    readonly orientation: "horizontal" | "vertical";
+    readonly select: (value: string) => void;
+};
+export declare const tabsContext: {
+    __context__: TabsContext;
+};

package/tabs/tabs-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const tabsContext = createContext(Symbol("dui-tabs"));

package/tabs/tabs-indicator.d.ts

@@ -0,0 +1,11 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * Animated visual indicator that highlights the active tab.
+ * Place inside dui-tabs-list.
+ */
+export declare class DuiTabsIndicator extends LitElement {
+    static tagName: "dui-tabs-indicator";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/tabs/tabs-indicator.js

@@ -0,0 +1,27 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: block;
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 50%;
+    translate: var(--active-tab-left, 0) -50%;
+    width: var(--active-tab-width, 0);
+    pointer-events: none;
+    transition-property: translate, width;
+  }
+`;
+/**
+ * Animated visual indicator that highlights the active tab.
+ * Place inside dui-tabs-list.
+ */
+export class DuiTabsIndicator extends LitElement {
+    static { this.tagName = "dui-tabs-indicator"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<span part="indicator"></span>`;
+    }
+}

package/tabs/tabs-list.d.ts

@@ -0,0 +1,17 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+import { LitElement, type TemplateResult } from "lit";
+import { type TabsContext } from "./tabs-context.js";
+/**
+ * Container for tab triggers. Manages indicator positioning via CSS custom properties.
+ */
+export declare class DuiTabsList extends LitElement {
+    #private;
+    static tagName: "dui-tabs-list";
+    static styles: import("lit").CSSResult[];
+    accessor _ctx: TabsContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(): void;
+    render(): TemplateResult;
+}

package/tabs/tabs-list.js

@@ -0,0 +1,85 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+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 { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { tabsContext } from "./tabs-context.js";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="list"] {
+    display: flex;
+    position: relative;
+    z-index: 0;
+  }
+
+  [part="list"][data-orientation="vertical"] {
+    flex-direction: column;
+  }
+`;
+/**
+ * Container for tab triggers. Manages indicator positioning via CSS custom properties.
+ */
+export class DuiTabsList extends LitElement {
+    static { this.tagName = "dui-tabs-list"; }
+    static { this.styles = [base, styles]; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    #resizeObserver;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#resizeObserver = new ResizeObserver(() => {
+            this.#updateIndicatorPosition();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#resizeObserver?.disconnect();
+    }
+    firstUpdated() {
+        const list = this.shadowRoot?.querySelector("[part='list']");
+        if (list) {
+            this.#resizeObserver?.observe(list);
+        }
+        this.#updateIndicatorPosition();
+    }
+    updated() {
+        this.#updateIndicatorPosition();
+    }
+    #updateIndicatorPosition() {
+        const list = this.shadowRoot?.querySelector("[part='list']");
+        if (!list)
+            return;
+        const slot = this.shadowRoot?.querySelector("slot");
+        const slottedElements = slot?.assignedElements() ?? [];
+        const activeTab = slottedElements.find((el) => el.tagName === "DUI-TAB" &&
+            el.getAttribute("value") === this._ctx?.value);
+        if (activeTab) {
+            const listRect = list.getBoundingClientRect();
+            const tabRect = activeTab.getBoundingClientRect();
+            const left = tabRect.left - listRect.left;
+            const width = tabRect.width;
+            list.style.setProperty("--active-tab-left", `${left}px`);
+            list.style.setProperty("--active-tab-width", `${width}px`);
+        }
+    }
+    render() {
+        const orientation = this._ctx?.orientation ?? "horizontal";
+        return html `
+      <div part="list" role="tablist" data-orientation=${orientation}>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    consume({ context: tabsContext, subscribe: true })
+], DuiTabsList.prototype, "_ctx", null);

package/tabs/tabs-panel.d.ts

@@ -0,0 +1,18 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+import { LitElement, nothing, type TemplateResult } from "lit";
+import { type TabsContext } from "./tabs-context.js";
+/**
+ * Content panel for a tab. Shown when the matching tab is active.
+ */
+export declare class DuiTabsPanel extends LitElement {
+    #private;
+    static tagName: "dui-tabs-panel";
+    static styles: import("lit").CSSResult[];
+    /** Panel value — must match the corresponding tab's value. */
+    accessor value: string;
+    /** Keep panel in DOM when not active. */
+    accessor keepMounted: boolean;
+    accessor _ctx: TabsContext;
+    willUpdate(): void;
+    render(): TemplateResult | typeof nothing;
+}

package/tabs/tabs-panel.js

@@ -0,0 +1,85 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+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, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { tabsContext } from "./tabs-context.js";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  :host([data-hidden]) {
+    display: none;
+  }
+
+  [part="panel"] {
+    position: relative;
+    outline: 0;
+    transition-property: box-shadow;
+  }
+
+  [part="panel"][hidden] {
+    display: none;
+  }
+`;
+/**
+ * Content panel for a tab. Shown when the matching tab is active.
+ */
+export class DuiTabsPanel extends LitElement {
+    static { this.tagName = "dui-tabs-panel"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = "";
+    /** Panel value — must match the corresponding tab's value. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #keepMounted_accessor_storage = false;
+    /** Keep panel in DOM when not active. */
+    get keepMounted() { return this.#keepMounted_accessor_storage; }
+    set keepMounted(value) { this.#keepMounted_accessor_storage = value; }
+    #_ctx_accessor_storage;
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    get #isActive() {
+        return this._ctx?.value === this.value;
+    }
+    willUpdate() {
+        if (this.#isActive) {
+            this.removeAttribute("data-hidden");
+        }
+        else {
+            this.setAttribute("data-hidden", "");
+        }
+    }
+    render() {
+        const isActive = this.#isActive;
+        if (!isActive && !this.keepMounted) {
+            return nothing;
+        }
+        return html `
+      <div
+        part="panel"
+        role="tabpanel"
+        ?hidden=${!isActive}
+        tabindex="0"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiTabsPanel.prototype, "value", null);
+__decorate([
+    property({ type: Boolean, attribute: "keep-mounted" })
+], DuiTabsPanel.prototype, "keepMounted", null);
+__decorate([
+    consume({ context: tabsContext, subscribe: true })
+], DuiTabsPanel.prototype, "_ctx", null);

package/tabs/tabs.d.ts

@@ -0,0 +1,24 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+import { LitElement, type TemplateResult } from "lit";
+import { type TabsContext } from "./tabs-context.js";
+export declare const valueChangeEvent: (detail: string) => CustomEvent<string>;
+/**
+ * A tabbed interface component with animated indicator and keyboard navigation.
+ */
+export declare class DuiTabs extends LitElement {
+    #private;
+    static tagName: "dui-tabs";
+    static styles: import("lit").CSSResult[];
+    /** Controlled active tab value. */
+    accessor value: string | undefined;
+    /** Initial active tab value (uncontrolled mode). */
+    accessor defaultValue: string | undefined;
+    /** Layout orientation. */
+    accessor orientation: "horizontal" | "vertical";
+    /** Whether tab list appears above or below content. */
+    accessor controls: "header" | "footer";
+    accessor _ctx: TabsContext;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/tabs/tabs.js

@@ -0,0 +1,111 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/tabs */
+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, state } from "lit/decorators.js";
+import { provide } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+import { tabsContext } from "./tabs-context.js";
+export const valueChangeEvent = customEvent("value-change", {
+    bubbles: true,
+    composed: true,
+});
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [part="root"][data-orientation="vertical"] {
+    flex-direction: row;
+  }
+
+  :host([controls="footer"]) [part="root"] {
+    flex-direction: column-reverse;
+  }
+`;
+/**
+ * A tabbed interface component with animated indicator and keyboard navigation.
+ */
+export class DuiTabs extends LitElement {
+    static { this.tagName = "dui-tabs"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = undefined;
+    /** Controlled active tab value. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #defaultValue_accessor_storage = undefined;
+    /** Initial active tab value (uncontrolled mode). */
+    get defaultValue() { return this.#defaultValue_accessor_storage; }
+    set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
+    #orientation_accessor_storage = "horizontal";
+    /** Layout orientation. */
+    get orientation() { return this.#orientation_accessor_storage; }
+    set orientation(value) { this.#orientation_accessor_storage = value; }
+    #controls_accessor_storage = "header";
+    /** Whether tab list appears above or below content. */
+    get controls() { return this.#controls_accessor_storage; }
+    set controls(value) { this.#controls_accessor_storage = value; }
+    #internalValue_accessor_storage = undefined;
+    get #internalValue() { return this.#internalValue_accessor_storage; }
+    set #internalValue(value) { this.#internalValue_accessor_storage = value; }
+    #getValue = () => this.value ?? this.#internalValue;
+    #select = (tabValue) => {
+        if (this.value === undefined) {
+            this.#internalValue = tabValue;
+        }
+        this.dispatchEvent(valueChangeEvent(tabValue));
+    };
+    #_ctx_accessor_storage = this.#buildContext();
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            value: this.#getValue(),
+            orientation: this.orientation,
+            select: this.#select,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.#internalValue = this.defaultValue;
+        }
+        this._ctx = this.#buildContext();
+    }
+    willUpdate() {
+        this._ctx = this.#buildContext();
+    }
+    render() {
+        return html `
+      <div part="root" data-orientation=${this.orientation}>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiTabs.prototype, "value", null);
+__decorate([
+    property({ attribute: "default-value" })
+], DuiTabs.prototype, "defaultValue", null);
+__decorate([
+    property({ reflect: true })
+], DuiTabs.prototype, "orientation", null);
+__decorate([
+    property({ reflect: true })
+], DuiTabs.prototype, "controls", null);
+__decorate([
+    provide({ context: tabsContext }),
+    state()
+], DuiTabs.prototype, "_ctx", null);

package/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiTextarea, textareaChangeEvent } from "./textarea.js";
+export type { TextareaResize, TextareaVariant } from "./textarea.js";

package/textarea/index.js

@@ -0,0 +1 @@
+export { DuiTextarea, textareaChangeEvent } from "./textarea.js";

package/textarea/register.d.ts

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

package/textarea/register.js

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

package/textarea/textarea.d.ts

@@ -0,0 +1,37 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/textarea */
+import { LitElement, type TemplateResult } from "lit";
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both" | "auto";
+export type TextareaVariant = "default" | "ghost";
+export declare const textareaChangeEvent: (detail: {
+    value: string;
+}) => CustomEvent<{
+    value: string;
+}>;
+/**
+ * A multi-line text input with resize modes including auto-grow.
+ */
+export declare class DuiTextarea extends LitElement {
+    #private;
+    static tagName: "dui-textarea";
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Current textarea value. */
+    accessor value: string;
+    /** Placeholder text. */
+    accessor placeholder: string;
+    accessor disabled: boolean;
+    accessor required: boolean;
+    accessor readonly: boolean;
+    /** Number of visible text rows. */
+    accessor rows: number | undefined;
+    accessor minLength: number | undefined;
+    accessor maxLength: number | undefined;
+    accessor name: string;
+    /** Visual variant: "default" or "ghost" (no border/background). */
+    accessor variant: TextareaVariant;
+    /** Resize behavior: "none" | "vertical" | "horizontal" | "both" | "auto". */
+    accessor resize: TextareaResize;
+    /** Maximum height (CSS value). Textarea scrolls when content exceeds this. */
+    accessor maxHeight: string | undefined;
+    render(): TemplateResult;
+}