@deepfuture/dui-components 0.0.1

package/dropzone/dropzone.js

@@ -0,0 +1,357 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dropzone */
+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;
+};
+var _a;
+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";
+// Event Factories
+export const dropzoneDropEvent = customEvent("drop", {
+    bubbles: true,
+    composed: true,
+});
+export const dropAcceptedEvent = customEvent("drop-accepted", { bubbles: true, composed: true });
+export const dropRejectedEvent = customEvent("drop-rejected", { bubbles: true, composed: true });
+export const dropzoneDragEnterEvent = customEvent("dragenter", {
+    bubbles: true,
+    composed: true,
+});
+export const dropzoneDragOverEvent = customEvent("dragover", {
+    bubbles: true,
+    composed: true,
+});
+export const dropzoneDragLeaveEvent = customEvent("dragleave", {
+    bubbles: true,
+    composed: true,
+});
+export const dropzoneErrorEvent = customEvent("dropzone-error", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([no-style]) [part="root"] {
+    all: unset;
+  }
+
+  [part="root"] {
+    text-align: center;
+    cursor: pointer;
+    transition-property: border-color, background, color, box-shadow, filter, transform;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-dropzone>` — A drag-and-drop file upload area.
+ *
+ * @slot - Custom content for the dropzone area.
+ * @csspart root - The dropzone container.
+ *
+ * @fires drop - Files dropped or selected (valid or invalid).
+ * @fires drop-accepted - Files that passed validation.
+ * @fires drop-rejected - Files that failed validation.
+ * @fires dragenter - File dragged over the dropzone.
+ * @fires dragover - File hovering over the dropzone.
+ * @fires dragleave - File dragged away from the dropzone.
+ * @fires dropzone-error - Internal error (e.g. file dialog failure).
+ */
+export class DuiDropzone extends LitElement {
+    static { this.tagName = "dui-dropzone"; }
+    static { this.styles = [base, styles]; }
+    static { this.ERROR_CODES = {
+        FILE_DIALOG_OPEN_FAILED: "FILE_DIALOG_OPEN_FAILED",
+        FILE_PROCESSING_FAILED: "FILE_PROCESSING_FAILED",
+    }; }
+    static { this.REJECTION_CODES = {
+        TOO_MANY_FILES: "TOO_MANY_FILES",
+        FILE_TOO_LARGE: "FILE_TOO_LARGE",
+        FILE_TOO_SMALL: "FILE_TOO_SMALL",
+        FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
+    }; }
+    #accept_accessor_storage;
+    /** Accepted file types (e.g. "image/*,.pdf"). */
+    get accept() { return this.#accept_accessor_storage; }
+    set accept(value) { this.#accept_accessor_storage = value; }
+    #multiple_accessor_storage = false;
+    /** Allow multiple files. */
+    get multiple() { return this.#multiple_accessor_storage; }
+    set multiple(value) { this.#multiple_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Disable the dropzone. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #maxFiles_accessor_storage = Infinity;
+    /** Maximum number of files allowed. */
+    get maxFiles() { return this.#maxFiles_accessor_storage; }
+    set maxFiles(value) { this.#maxFiles_accessor_storage = value; }
+    #maxSize_accessor_storage = Infinity;
+    /** Maximum file size in bytes. */
+    get maxSize() { return this.#maxSize_accessor_storage; }
+    set maxSize(value) { this.#maxSize_accessor_storage = value; }
+    #minSize_accessor_storage = 0;
+    /** Minimum file size in bytes. */
+    get minSize() { return this.#minSize_accessor_storage; }
+    set minSize(value) { this.#minSize_accessor_storage = value; }
+    #autoFocus_accessor_storage = false;
+    /** Auto-focus the dropzone on mount. */
+    get autoFocus() { return this.#autoFocus_accessor_storage; }
+    set autoFocus(value) { this.#autoFocus_accessor_storage = value; }
+    #noStyle_accessor_storage = false;
+    /** Disable default dropzone styling. */
+    get noStyle() { return this.#noStyle_accessor_storage; }
+    set noStyle(value) { this.#noStyle_accessor_storage = value; }
+    #isDragOver_accessor_storage = false;
+    get #isDragOver() { return this.#isDragOver_accessor_storage; }
+    set #isDragOver(value) { this.#isDragOver_accessor_storage = value; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.autoFocus && !this.disabled) {
+            this.updateComplete.then(() => {
+                this.shadowRoot?.querySelector("[part='root']")?.focus();
+            });
+        }
+    }
+    /** Opens the native file dialog programmatically. */
+    openFileDialog() {
+        if (this.disabled)
+            return;
+        const input = this.shadowRoot?.querySelector('input[type="file"]');
+        if (!input)
+            return;
+        try {
+            input.click();
+        }
+        catch (error) {
+            this.dispatchEvent(dropzoneErrorEvent({
+                error,
+                code: _a.ERROR_CODES.FILE_DIALOG_OPEN_FAILED,
+            }));
+        }
+    }
+    #handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        this.#isDragOver = true;
+        this.dispatchEvent(dropzoneDragEnterEvent());
+    };
+    #handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = "copy";
+        }
+        this.dispatchEvent(dropzoneDragOverEvent());
+    };
+    #handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        this.#isDragOver = false;
+        this.dispatchEvent(dropzoneDragLeaveEvent());
+    };
+    #handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        this.#isDragOver = false;
+        try {
+            const files = Array.from(e.dataTransfer?.files ?? []);
+            this.#processFiles(files);
+        }
+        catch (error) {
+            this.dispatchEvent(dropzoneErrorEvent({
+                error,
+                code: _a.ERROR_CODES.FILE_PROCESSING_FAILED,
+            }));
+        }
+    };
+    #handleClick = () => {
+        if (this.disabled)
+            return;
+        this.openFileDialog();
+    };
+    #handleKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.openFileDialog();
+        }
+    };
+    #handleInputChange = (e) => {
+        if (this.disabled)
+            return;
+        const input = e.target;
+        const files = Array.from(input.files ?? []);
+        try {
+            this.#processFiles(files);
+        }
+        catch (error) {
+            this.dispatchEvent(dropzoneErrorEvent({
+                error,
+                code: _a.ERROR_CODES.FILE_PROCESSING_FAILED,
+            }));
+        }
+        finally {
+            input.value = "";
+        }
+    };
+    #processFiles(files) {
+        const { acceptedFiles, rejectedFiles } = this.#validateFiles(files);
+        this.dispatchEvent(dropzoneDropEvent({ acceptedFiles, rejectedFiles }));
+        if (acceptedFiles.length > 0) {
+            this.dispatchEvent(dropAcceptedEvent({ acceptedFiles }));
+        }
+        if (rejectedFiles.length > 0) {
+            this.dispatchEvent(dropRejectedEvent({ rejectedFiles }));
+        }
+    }
+    #validateFiles(files) {
+        const acceptedFiles = [];
+        const rejectedFiles = [];
+        const maxAllowed = this.multiple ? this.maxFiles : 1;
+        if (files.length > maxAllowed) {
+            for (const file of files) {
+                rejectedFiles.push({
+                    file,
+                    errors: [
+                        {
+                            code: _a.REJECTION_CODES.TOO_MANY_FILES,
+                            message: this.multiple
+                                ? `Too many files. Maximum allowed is ${this.maxFiles}.`
+                                : "Multiple files not allowed.",
+                        },
+                    ],
+                });
+            }
+            return { acceptedFiles, rejectedFiles };
+        }
+        for (const file of files) {
+            const errors = [];
+            if (file.size > this.maxSize) {
+                errors.push({
+                    code: _a.REJECTION_CODES.FILE_TOO_LARGE,
+                    message: `File is too large. Maximum size is ${this.maxSize} bytes.`,
+                });
+            }
+            if (file.size < this.minSize) {
+                errors.push({
+                    code: _a.REJECTION_CODES.FILE_TOO_SMALL,
+                    message: `File is too small. Minimum size is ${this.minSize} bytes.`,
+                });
+            }
+            if (this.accept && !this.#isValidFileType(file)) {
+                errors.push({
+                    code: _a.REJECTION_CODES.FILE_INVALID_TYPE,
+                    message: `File type not accepted. Allowed types: ${this.accept}`,
+                });
+            }
+            if (errors.length > 0) {
+                rejectedFiles.push({ file, errors });
+            }
+            else {
+                acceptedFiles.push(file);
+            }
+        }
+        return { acceptedFiles, rejectedFiles };
+    }
+    #isValidFileType(file) {
+        if (!this.accept)
+            return true;
+        const acceptedTypes = this.accept
+            .split(",")
+            .map((type) => type.trim().toLowerCase());
+        for (const acceptedType of acceptedTypes) {
+            if (acceptedType.startsWith(".")) {
+                if (file.name.toLowerCase().endsWith(acceptedType)) {
+                    return true;
+                }
+            }
+            else if (acceptedType.endsWith("/*")) {
+                const baseType = acceptedType.slice(0, -2);
+                if (file.type.toLowerCase().startsWith(baseType)) {
+                    return true;
+                }
+            }
+            else {
+                if (file.type.toLowerCase() === acceptedType) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    render() {
+        return html `
+      <div
+        part="root"
+        tabindex="${this.disabled ? -1 : 0}"
+        ?data-dragover="${this.#isDragOver}"
+        @dragenter="${this.#handleDragEnter}"
+        @dragover="${this.#handleDragOver}"
+        @dragleave="${this.#handleDragLeave}"
+        @drop="${this.#handleDrop}"
+        @click="${this.#handleClick}"
+        @keydown="${this.#handleKeyDown}"
+      >
+        <slot>
+          <span>Drag and drop files here or click to select</span>
+        </slot>
+      </div>
+      <input
+        type="file"
+        ?multiple="${this.multiple}"
+        accept="${this.accept || ""}"
+        ?disabled="${this.disabled}"
+        @change="${this.#handleInputChange}"
+        tabindex="-1"
+        aria-hidden="true"
+        hidden
+      />
+    `;
+    }
+}
+_a = DuiDropzone;
+__decorate([
+    property({ type: String, reflect: true })
+], DuiDropzone.prototype, "accept", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiDropzone.prototype, "multiple", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiDropzone.prototype, "disabled", null);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "max-files" })
+], DuiDropzone.prototype, "maxFiles", null);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "max-size" })
+], DuiDropzone.prototype, "maxSize", null);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "min-size" })
+], DuiDropzone.prototype, "minSize", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "auto-focus" })
+], DuiDropzone.prototype, "autoFocus", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "no-style" })
+], DuiDropzone.prototype, "noStyle", null);

package/dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiDropzone, dropzoneDropEvent, dropAcceptedEvent, dropRejectedEvent, dropzoneErrorEvent } from "./dropzone.js";
+export type { DropzoneErrorCode, DropzoneRejectionCode, FileRejectionError, RejectedFile, DropzoneDropDetail, DropzoneAcceptedDetail, DropzoneRejectedDetail, DropzoneErrorDetail, } from "./dropzone.js";

package/dropzone/index.js

@@ -0,0 +1 @@
+export { DuiDropzone, dropzoneDropEvent, dropAcceptedEvent, dropRejectedEvent, dropzoneErrorEvent } from "./dropzone.js";

package/dropzone/register.d.ts

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

package/dropzone/register.js

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

package/field/field-context.d.ts

@@ -0,0 +1,20 @@
+export type FieldContext = {
+    readonly fieldId: string;
+    readonly labelId: string;
+    readonly controlId: string;
+    readonly descriptionId: string;
+    readonly errorId: string;
+    readonly disabled: boolean;
+    readonly invalid: boolean;
+    readonly dirty: boolean;
+    readonly touched: boolean;
+    readonly filled: boolean;
+    readonly focused: boolean;
+    readonly markTouched: () => void;
+    readonly markDirty: () => void;
+    readonly setFocused: (focused: boolean) => void;
+    readonly setFilled: (filled: boolean) => void;
+};
+export declare const fieldContext: {
+    __context__: FieldContext;
+};

package/field/field-context.js

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

package/field/index.d.ts

@@ -0,0 +1,2 @@
+export { fieldContext } from "./field-context.js";
+export type { FieldContext } from "./field-context.js";

package/field/index.js

@@ -0,0 +1 @@
+export { fieldContext } from "./field-context.js";

package/global.d.ts

@@ -0,0 +1,189 @@
+/**
+ * Global HTMLElementTagNameMap declarations for DUI components.
+ * Provides type-safe `document.querySelector("dui-button")` etc.
+ *
+ * These declarations are automatically available when consuming
+ * @deepfuture/dui-components via TypeScript.
+ */
+
+import type { DuiAccordion } from "./accordion/accordion.js";
+import type { DuiAccordionItem } from "./accordion/accordion-item.js";
+import type { DuiAlertDialog } from "./alert-dialog/alert-dialog.js";
+import type { DuiAlertDialogTrigger } from "./alert-dialog/alert-dialog-trigger.js";
+import type { DuiAlertDialogPopup } from "./alert-dialog/alert-dialog-popup.js";
+import type { DuiAlertDialogClose } from "./alert-dialog/alert-dialog-close.js";
+import type { DuiAvatar } from "./avatar/avatar.js";
+import type { DuiBadge } from "./badge/badge.js";
+import type { DuiBreadcrumb } from "./breadcrumb/breadcrumb.js";
+import type { DuiBreadcrumbItem } from "./breadcrumb/breadcrumb-item.js";
+import type { DuiBreadcrumbLink } from "./breadcrumb/breadcrumb-link.js";
+import type { DuiBreadcrumbPage } from "./breadcrumb/breadcrumb-page.js";
+import type { DuiBreadcrumbSeparator } from "./breadcrumb/breadcrumb-separator.js";
+import type { DuiBreadcrumbEllipsis } from "./breadcrumb/breadcrumb-ellipsis.js";
+import type { DuiButton } from "./button/button.js";
+import type { DuiCalendar } from "./calendar/calendar.js";
+import type { DuiCenter } from "./center/center.js";
+import type { DuiCheckbox } from "./checkbox/checkbox.js";
+import type { DuiCheckboxGroup } from "./checkbox/checkbox-group.js";
+import type { DuiCollapsible } from "./collapsible/collapsible.js";
+import type { DuiCombobox } from "./combobox/combobox.js";
+import type { DuiCommand } from "./command/command.js";
+import type { DuiCommandInput } from "./command/command-input.js";
+import type { DuiCommandList } from "./command/command-list.js";
+import type { DuiCommandGroup } from "./command/command-group.js";
+import type { DuiCommandItem } from "./command/command-item.js";
+import type { DuiCommandEmpty } from "./command/command-empty.js";
+import type { DuiCommandSeparator } from "./command/command-separator.js";
+import type { DuiCommandShortcut } from "./command/command-shortcut.js";
+import type { DuiDataTable } from "./data-table/data-table.js";
+import type { DuiDialog } from "./dialog/dialog.js";
+import type { DuiDialogTrigger } from "./dialog/dialog-trigger.js";
+import type { DuiDialogPopup } from "./dialog/dialog-popup.js";
+import type { DuiDialogClose } from "./dialog/dialog-close.js";
+import type { DuiDropzone } from "./dropzone/dropzone.js";
+import type { DuiHstack } from "./hstack/hstack.js";
+import type { DuiIcon } from "./icon/icon.js";
+import type { DuiInput } from "./input/input.js";
+import type { DuiLink } from "./link/link.js";
+import type { DuiMenu } from "./menu/menu.js";
+import type { DuiMenuItem } from "./menu/menu-item.js";
+import type { DuiMenubar } from "./menubar/menubar.js";
+import type { DuiNumberField } from "./number-field/number-field.js";
+import type { DuiPageInset } from "./page-inset/page-inset.js";
+import type { DuiPopover } from "./popover/popover.js";
+import type { DuiPopoverTrigger } from "./popover/popover-trigger.js";
+import type { DuiPopoverPopup } from "./popover/popover-popup.js";
+import type { DuiPopoverClose } from "./popover/popover-close.js";
+import type { DuiPortal } from "./portal/portal.js";
+import type { DuiPreviewCard } from "./preview-card/preview-card.js";
+import type { DuiPreviewCardTrigger } from "./preview-card/preview-card-trigger.js";
+import type { DuiPreviewCardPopup } from "./preview-card/preview-card-popup.js";
+import type { DuiProgress } from "./progress/progress.js";
+import type { DuiRadio } from "./radio/radio.js";
+import type { DuiRadioGroup } from "./radio/radio-group.js";
+import type { DuiScrollArea } from "./scroll-area/scroll-area.js";
+import type { DuiSelect } from "./select/select.js";
+import type { DuiSeparator } from "./separator/separator.js";
+import type { DuiSidebarProvider } from "./sidebar/sidebar-provider.js";
+import type { DuiSidebar } from "./sidebar/sidebar.js";
+import type { DuiSidebarTrigger } from "./sidebar/sidebar-trigger.js";
+import type { DuiSidebarContent } from "./sidebar/sidebar-content.js";
+import type { DuiSidebarHeader } from "./sidebar/sidebar-header.js";
+import type { DuiSidebarFooter } from "./sidebar/sidebar-footer.js";
+import type { DuiSidebarGroup } from "./sidebar/sidebar-group.js";
+import type { DuiSidebarGroupLabel } from "./sidebar/sidebar-group-label.js";
+import type { DuiSidebarMenu } from "./sidebar/sidebar-menu.js";
+import type { DuiSidebarMenuItem } from "./sidebar/sidebar-menu-item.js";
+import type { DuiSidebarMenuButton } from "./sidebar/sidebar-menu-button.js";
+import type { DuiSidebarSeparator } from "./sidebar/sidebar-separator.js";
+import type { DuiSidebarInset } from "./sidebar/sidebar-inset.js";
+import type { DuiSlider } from "./slider/slider.js";
+import type { DuiSpinner } from "./spinner/spinner.js";
+import type { DuiSwitch } from "./switch/switch.js";
+import type { DuiTabs } from "./tabs/tabs.js";
+import type { DuiTabsList } from "./tabs/tabs-list.js";
+import type { DuiTab } from "./tabs/tab.js";
+import type { DuiTabsPanel } from "./tabs/tabs-panel.js";
+import type { DuiTabsIndicator } from "./tabs/tabs-indicator.js";
+import type { DuiTextarea } from "./textarea/textarea.js";
+import type { DuiToggle } from "./toggle/toggle.js";
+import type { DuiToggleGroup } from "./toggle/toggle-group.js";
+import type { DuiToolbar } from "./toolbar/toolbar.js";
+import type { DuiTooltip } from "./tooltip/tooltip.js";
+import type { DuiTooltipTrigger } from "./tooltip/tooltip-trigger.js";
+import type { DuiTooltipPopup } from "./tooltip/tooltip-popup.js";
+import type { DuiTrunc } from "./trunc/trunc.js";
+import type { DuiVstack } from "./vstack/vstack.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dui-accordion": DuiAccordion;
+    "dui-accordion-item": DuiAccordionItem;
+    "dui-alert-dialog": DuiAlertDialog;
+    "dui-alert-dialog-trigger": DuiAlertDialogTrigger;
+    "dui-alert-dialog-popup": DuiAlertDialogPopup;
+    "dui-alert-dialog-close": DuiAlertDialogClose;
+    "dui-avatar": DuiAvatar;
+    "dui-badge": DuiBadge;
+    "dui-breadcrumb": DuiBreadcrumb;
+    "dui-breadcrumb-item": DuiBreadcrumbItem;
+    "dui-breadcrumb-link": DuiBreadcrumbLink;
+    "dui-breadcrumb-page": DuiBreadcrumbPage;
+    "dui-breadcrumb-separator": DuiBreadcrumbSeparator;
+    "dui-breadcrumb-ellipsis": DuiBreadcrumbEllipsis;
+    "dui-button": DuiButton;
+    "dui-calendar": DuiCalendar;
+    "dui-center": DuiCenter;
+    "dui-checkbox": DuiCheckbox;
+    "dui-checkbox-group": DuiCheckboxGroup;
+    "dui-collapsible": DuiCollapsible;
+    "dui-combobox": DuiCombobox;
+    "dui-command": DuiCommand;
+    "dui-command-input": DuiCommandInput;
+    "dui-command-list": DuiCommandList;
+    "dui-command-group": DuiCommandGroup;
+    "dui-command-item": DuiCommandItem;
+    "dui-command-empty": DuiCommandEmpty;
+    "dui-command-separator": DuiCommandSeparator;
+    "dui-command-shortcut": DuiCommandShortcut;
+    "dui-data-table": DuiDataTable;
+    "dui-dialog": DuiDialog;
+    "dui-dialog-trigger": DuiDialogTrigger;
+    "dui-dialog-popup": DuiDialogPopup;
+    "dui-dialog-close": DuiDialogClose;
+    "dui-dropzone": DuiDropzone;
+    "dui-hstack": DuiHstack;
+    "dui-icon": DuiIcon;
+    "dui-input": DuiInput;
+    "dui-link": DuiLink;
+    "dui-menu": DuiMenu;
+    "dui-menu-item": DuiMenuItem;
+    "dui-menubar": DuiMenubar;
+    "dui-number-field": DuiNumberField;
+    "dui-page-inset": DuiPageInset;
+    "dui-popover": DuiPopover;
+    "dui-popover-trigger": DuiPopoverTrigger;
+    "dui-popover-popup": DuiPopoverPopup;
+    "dui-popover-close": DuiPopoverClose;
+    "dui-portal": DuiPortal;
+    "dui-preview-card": DuiPreviewCard;
+    "dui-preview-card-trigger": DuiPreviewCardTrigger;
+    "dui-preview-card-popup": DuiPreviewCardPopup;
+    "dui-progress": DuiProgress;
+    "dui-radio": DuiRadio;
+    "dui-radio-group": DuiRadioGroup;
+    "dui-scroll-area": DuiScrollArea;
+    "dui-select": DuiSelect;
+    "dui-separator": DuiSeparator;
+    "dui-sidebar-provider": DuiSidebarProvider;
+    "dui-sidebar": DuiSidebar;
+    "dui-sidebar-trigger": DuiSidebarTrigger;
+    "dui-sidebar-content": DuiSidebarContent;
+    "dui-sidebar-header": DuiSidebarHeader;
+    "dui-sidebar-footer": DuiSidebarFooter;
+    "dui-sidebar-group": DuiSidebarGroup;
+    "dui-sidebar-group-label": DuiSidebarGroupLabel;
+    "dui-sidebar-menu": DuiSidebarMenu;
+    "dui-sidebar-menu-item": DuiSidebarMenuItem;
+    "dui-sidebar-menu-button": DuiSidebarMenuButton;
+    "dui-sidebar-separator": DuiSidebarSeparator;
+    "dui-sidebar-inset": DuiSidebarInset;
+    "dui-slider": DuiSlider;
+    "dui-spinner": DuiSpinner;
+    "dui-switch": DuiSwitch;
+    "dui-tabs": DuiTabs;
+    "dui-tabs-list": DuiTabsList;
+    "dui-tab": DuiTab;
+    "dui-tabs-panel": DuiTabsPanel;
+    "dui-tabs-indicator": DuiTabsIndicator;
+    "dui-textarea": DuiTextarea;
+    "dui-toggle": DuiToggle;
+    "dui-toggle-group": DuiToggleGroup;
+    "dui-toolbar": DuiToolbar;
+    "dui-tooltip": DuiTooltip;
+    "dui-tooltip-trigger": DuiTooltipTrigger;
+    "dui-tooltip-popup": DuiTooltipPopup;
+    "dui-trunc": DuiTrunc;
+    "dui-vstack": DuiVstack;
+  }
+}

package/hstack/hstack.d.ts

@@ -0,0 +1,25 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/hstack */
+import { LitElement, type TemplateResult } from "lit";
+import { type StackGap } from "@deepfuture/dui-core/layout-types";
+export type HstackAlignment = "start" | "center" | "end" | "stretch" | "baseline";
+export type HstackJustify = "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch";
+/**
+ * `<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 declare class DuiHstack extends LitElement {
+    static tagName: "dui-hstack";
+    static styles: import("lit").CSSResult[];
+    /** Gap between stack items. Maps to space tokens. */
+    accessor gap: StackGap;
+    /** Alignment of items on the cross axis. */
+    accessor align: HstackAlignment;
+    /** Justification of items on the main axis. */
+    accessor justify: HstackJustify;
+    render(): TemplateResult;
+}