@deepfuture/dui-components 0.0.1

package/number-field/number-field.js

@@ -0,0 +1,326 @@
+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 { live } from "lit/directives/live.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  [part="input"] {
+    box-sizing: border-box;
+    outline: none;
+    border: none;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: center;
+    min-width: 0;
+  }
+
+  [part="input"]:disabled {
+    cursor: not-allowed;
+  }
+
+  [part="decrement"],
+  [part="increment"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  [part="decrement"]:disabled,
+  [part="increment"]:disabled {
+    cursor: not-allowed;
+  }
+
+  .HiddenInput {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    margin: 0;
+    width: 0;
+    height: 0;
+  }
+`;
+/**
+ * `<dui-number-field>` — A numeric input with increment/decrement buttons.
+ *
+ * @csspart root - The outer container.
+ * @csspart input - The text input element.
+ * @csspart decrement - The decrement button.
+ * @csspart increment - The increment button.
+ * @fires value-change - Fired when value changes. Detail: { value: number }
+ */
+export class DuiNumberField extends LitElement {
+    static { this.tagName = "dui-number-field"; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = undefined;
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #defaultValue_accessor_storage = undefined;
+    get defaultValue() { return this.#defaultValue_accessor_storage; }
+    set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
+    #min_accessor_storage = undefined;
+    get min() { return this.#min_accessor_storage; }
+    set min(value) { this.#min_accessor_storage = value; }
+    #max_accessor_storage = undefined;
+    get max() { return this.#max_accessor_storage; }
+    set max(value) { this.#max_accessor_storage = value; }
+    #step_accessor_storage = 1;
+    get step() { return this.#step_accessor_storage; }
+    set step(value) { this.#step_accessor_storage = value; }
+    #largeStep_accessor_storage = 10;
+    get largeStep() { return this.#largeStep_accessor_storage; }
+    set largeStep(value) { this.#largeStep_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #readOnly_accessor_storage = false;
+    get readOnly() { return this.#readOnly_accessor_storage; }
+    set readOnly(value) { this.#readOnly_accessor_storage = value; }
+    #required_accessor_storage = false;
+    get required() { return this.#required_accessor_storage; }
+    set required(value) { this.#required_accessor_storage = value; }
+    #name_accessor_storage = undefined;
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #internalValue_accessor_storage = undefined;
+    get #internalValue() { return this.#internalValue_accessor_storage; }
+    set #internalValue(value) { this.#internalValue_accessor_storage = value; }
+    #inputText_accessor_storage = "";
+    get #inputText() { return this.#inputText_accessor_storage; }
+    set #inputText(value) { this.#inputText_accessor_storage = value; }
+    #fieldCtx_accessor_storage;
+    get #fieldCtx() { return this.#fieldCtx_accessor_storage; }
+    set #fieldCtx(value) { this.#fieldCtx_accessor_storage = value; }
+    get #currentValue() {
+        return this.value ?? this.#internalValue;
+    }
+    get #isDisabled() {
+        return this.disabled || (this.#fieldCtx?.disabled ?? false);
+    }
+    get #isInvalid() {
+        return this.#fieldCtx?.invalid ?? false;
+    }
+    get #canDecrement() {
+        const v = this.#currentValue;
+        if (v === undefined)
+            return true;
+        return this.min === undefined || v > this.min;
+    }
+    get #canIncrement() {
+        const v = this.#currentValue;
+        if (v === undefined)
+            return true;
+        return this.max === undefined || v < this.max;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.#internalValue = this.#clamp(this.defaultValue);
+        }
+        this.#syncInputText();
+    }
+    willUpdate() {
+        this.#syncInputText();
+    }
+    #syncInputText() {
+        const v = this.#currentValue;
+        this.#inputText = v !== undefined ? String(v) : "";
+    }
+    #clamp(val) {
+        if (this.min !== undefined)
+            val = Math.max(this.min, val);
+        if (this.max !== undefined)
+            val = Math.min(this.max, val);
+        return val;
+    }
+    #setValue(val) {
+        const clamped = this.#clamp(val);
+        if (this.value === undefined) {
+            this.#internalValue = clamped;
+        }
+        this.#fieldCtx?.markDirty();
+        this.#fieldCtx?.setFilled(true);
+        this.dispatchEvent(valueChangeEvent({ value: clamped }));
+    }
+    #increment = (amount) => {
+        if (this.#isDisabled || this.readOnly)
+            return;
+        const current = this.#currentValue ?? this.min ?? 0;
+        this.#setValue(current + amount);
+    };
+    #decrement = (amount) => {
+        if (this.#isDisabled || this.readOnly)
+            return;
+        const current = this.#currentValue ?? this.max ?? 0;
+        this.#setValue(current - amount);
+    };
+    #commitInput() {
+        const parsed = parseFloat(this.#inputText);
+        if (Number.isNaN(parsed)) {
+            this.#syncInputText();
+        }
+        else {
+            this.#setValue(parsed);
+        }
+    }
+    #onInput = (e) => {
+        this.#inputText = e.target.value;
+    };
+    #onBlur = () => {
+        this.#commitInput();
+        this.#fieldCtx?.setFocused(false);
+        this.#fieldCtx?.markTouched();
+    };
+    #onFocus = () => {
+        this.#fieldCtx?.setFocused(true);
+    };
+    #onKeyDown = (e) => {
+        switch (e.key) {
+            case "ArrowUp":
+                e.preventDefault();
+                this.#increment(e.shiftKey ? this.largeStep : this.step);
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                this.#decrement(e.shiftKey ? this.largeStep : this.step);
+                break;
+            case "Home":
+                if (this.min !== undefined) {
+                    e.preventDefault();
+                    this.#setValue(this.min);
+                }
+                break;
+            case "End":
+                if (this.max !== undefined) {
+                    e.preventDefault();
+                    this.#setValue(this.max);
+                }
+                break;
+            case "Enter":
+                this.#commitInput();
+                break;
+        }
+    };
+    #onDecrementClick = () => {
+        this.#decrement(this.step);
+    };
+    #onIncrementClick = () => {
+        this.#increment(this.step);
+    };
+    render() {
+        const isDisabled = this.#isDisabled;
+        const isInvalid = this.#isInvalid;
+        const controlId = this.#fieldCtx?.controlId ?? "";
+        const currentValue = this.#currentValue;
+        return html `
+      <div
+        part="root"
+        ?data-disabled="${isDisabled}"
+        ?data-invalid="${isInvalid}"
+      >
+        <button
+          part="decrement"
+          type="button"
+          tabindex="-1"
+          aria-label="Decrease"
+          ?disabled="${isDisabled || this.readOnly || !this.#canDecrement}"
+          @click="${this.#onDecrementClick}"
+        >
+          <slot name="decrement">&minus;</slot>
+        </button>
+        <input
+          part="input"
+          id="${controlId || nothing}"
+          type="text"
+          inputmode="decimal"
+          .value="${live(this.#inputText)}"
+          ?disabled="${isDisabled}"
+          ?readonly="${this.readOnly}"
+          ?required="${this.required}"
+          aria-invalid="${isInvalid ? "true" : nothing}"
+          ?data-disabled="${isDisabled}"
+          @input="${this.#onInput}"
+          @keydown="${this.#onKeyDown}"
+          @focus="${this.#onFocus}"
+          @blur="${this.#onBlur}"
+        />
+        <button
+          part="increment"
+          type="button"
+          tabindex="-1"
+          aria-label="Increase"
+          ?disabled="${isDisabled || this.readOnly || !this.#canIncrement}"
+          @click="${this.#onIncrementClick}"
+        >
+          <slot name="increment">+</slot>
+        </button>
+        ${this.name
+            ? html `<input
+              type="hidden"
+              name="${this.name}"
+              .value="${String(currentValue ?? "")}"
+            />`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], DuiNumberField.prototype, "value", null);
+__decorate([
+    property({ type: Number, attribute: "default-value" })
+], DuiNumberField.prototype, "defaultValue", null);
+__decorate([
+    property({ type: Number })
+], DuiNumberField.prototype, "min", null);
+__decorate([
+    property({ type: Number })
+], DuiNumberField.prototype, "max", null);
+__decorate([
+    property({ type: Number })
+], DuiNumberField.prototype, "step", null);
+__decorate([
+    property({ type: Number, attribute: "large-step" })
+], DuiNumberField.prototype, "largeStep", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiNumberField.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "read-only" })
+], DuiNumberField.prototype, "readOnly", null);
+__decorate([
+    property({ type: Boolean })
+], DuiNumberField.prototype, "required", null);
+__decorate([
+    property()
+], DuiNumberField.prototype, "name", null);

package/number-field/register.d.ts

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

package/number-field/register.js

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

package/package.json

@@ -0,0 +1,217 @@
+{
+  "name": "@deepfuture/dui-components",
+  "version": "0.0.1",
+  "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicholasgasior/dui.git",
+    "directory": "packages/components"
+  },
+  "exports": {
+    "./button": {
+      "import": "./button/index.js",
+      "types": "./button/index.d.ts"
+    },
+    "./switch": {
+      "import": "./switch/index.js",
+      "types": "./switch/index.d.ts"
+    },
+    "./accordion": {
+      "import": "./accordion/index.js",
+      "types": "./accordion/index.d.ts"
+    },
+    "./badge": {
+      "import": "./badge/index.js",
+      "types": "./badge/index.d.ts"
+    },
+    "./icon": {
+      "import": "./icon/index.js",
+      "types": "./icon/index.d.ts"
+    },
+    "./scroll-area": {
+      "import": "./scroll-area/index.js",
+      "types": "./scroll-area/index.d.ts"
+    },
+    "./combobox": {
+      "import": "./combobox/index.js",
+      "types": "./combobox/index.d.ts"
+    },
+    "./menu": {
+      "import": "./menu/index.js",
+      "types": "./menu/index.d.ts"
+    },
+    "./popover": {
+      "import": "./popover/index.js",
+      "types": "./popover/index.d.ts"
+    },
+    "./tooltip": {
+      "import": "./tooltip/index.js",
+      "types": "./tooltip/index.d.ts"
+    },
+    "./dialog": {
+      "import": "./dialog/index.js",
+      "types": "./dialog/index.d.ts"
+    },
+    "./alert-dialog": {
+      "import": "./alert-dialog/index.js",
+      "types": "./alert-dialog/index.d.ts"
+    },
+    "./breadcrumb": {
+      "import": "./breadcrumb/index.js",
+      "types": "./breadcrumb/index.d.ts"
+    },
+    "./checkbox": {
+      "import": "./checkbox/index.js",
+      "types": "./checkbox/index.d.ts"
+    },
+    "./collapsible": {
+      "import": "./collapsible/index.js",
+      "types": "./collapsible/index.d.ts"
+    },
+    "./toolbar": {
+      "import": "./toolbar/index.js",
+      "types": "./toolbar/index.d.ts"
+    },
+    "./slider": {
+      "import": "./slider/index.js",
+      "types": "./slider/index.d.ts"
+    },
+    "./spinner": {
+      "import": "./spinner/index.js",
+      "types": "./spinner/index.d.ts"
+    },
+    "./tabs": {
+      "import": "./tabs/index.js",
+      "types": "./tabs/index.d.ts"
+    },
+    "./textarea": {
+      "import": "./textarea/index.js",
+      "types": "./textarea/index.d.ts"
+    },
+    "./trunc": {
+      "import": "./trunc/index.js",
+      "types": "./trunc/index.d.ts"
+    },
+    "./center": {
+      "import": "./center/index.js",
+      "types": "./center/index.d.ts"
+    },
+    "./hstack": {
+      "import": "./hstack/index.js",
+      "types": "./hstack/index.d.ts"
+    },
+    "./vstack": {
+      "import": "./vstack/index.js",
+      "types": "./vstack/index.d.ts"
+    },
+    "./page-inset": {
+      "import": "./page-inset/index.js",
+      "types": "./page-inset/index.d.ts"
+    },
+    "./link": {
+      "import": "./link/index.js",
+      "types": "./link/index.d.ts"
+    },
+    "./avatar": {
+      "import": "./avatar/index.js",
+      "types": "./avatar/index.d.ts"
+    },
+    "./portal": {
+      "import": "./portal/index.js",
+      "types": "./portal/index.d.ts"
+    },
+    "./field": {
+      "import": "./field/index.js",
+      "types": "./field/index.d.ts"
+    },
+    "./input": {
+      "import": "./input/index.js",
+      "types": "./input/index.d.ts"
+    },
+    "./radio": {
+      "import": "./radio/index.js",
+      "types": "./radio/index.d.ts"
+    },
+    "./dropzone": {
+      "import": "./dropzone/index.js",
+      "types": "./dropzone/index.d.ts"
+    },
+    "./select": {
+      "import": "./select/index.js",
+      "types": "./select/index.d.ts"
+    },
+    "./preview-card": {
+      "import": "./preview-card/index.js",
+      "types": "./preview-card/index.d.ts"
+    },
+    "./data-table": {
+      "import": "./data-table/index.js",
+      "types": "./data-table/index.d.ts"
+    },
+    "./command": {
+      "import": "./command/index.js",
+      "types": "./command/index.d.ts"
+    },
+    "./sidebar": {
+      "import": "./sidebar/index.js",
+      "types": "./sidebar/index.d.ts"
+    },
+    "./separator": {
+      "import": "./separator/index.js",
+      "types": "./separator/index.d.ts"
+    },
+    "./progress": {
+      "import": "./progress/index.js",
+      "types": "./progress/index.d.ts"
+    },
+    "./toggle": {
+      "import": "./toggle/index.js",
+      "types": "./toggle/index.d.ts"
+    },
+    "./number-field": {
+      "import": "./number-field/index.js",
+      "types": "./number-field/index.d.ts"
+    },
+    "./menubar": {
+      "import": "./menubar/index.js",
+      "types": "./menubar/index.d.ts"
+    },
+    "./calendar": {
+      "import": "./calendar/index.js",
+      "types": "./calendar/index.d.ts"
+    },
+    "./all": {
+      "import": "./all.js",
+      "types": "./all.d.ts"
+    }
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@deepfuture/dui-core": "0.0.1",
+    "lit": "^3.3.2",
+    "@lit/context": "^1.1.3"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "web-components",
+    "lit",
+    "unstyled",
+    "components",
+    "dui",
+    "theme"
+  ],
+  "types": "./global.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./*"
+      ]
+    }
+  }
+}

package/page-inset/index.d.ts

@@ -0,0 +1 @@
+export { DuiPageInset } from "./page-inset.js";

package/page-inset/index.js

@@ -0,0 +1 @@
+export { DuiPageInset } from "./page-inset.js";

package/page-inset/page-inset.d.ts

@@ -0,0 +1,28 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/page-inset */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+/**
+ * `<dui-page-inset>` — Centers content with max-width constraints and configurable padding.
+ *
+ * @slot - Content to be centered within the inset area.
+ * @csspart root - The outer container element.
+ * @csspart inner - The inner content wrapper with max-width constraint.
+ * @cssprop --page-inset-pad-x - Horizontal padding (default: var(--space-16)).
+ * @cssprop --page-inset-pad-y - Vertical padding (default: var(--space-12)).
+ * @cssprop --page-inset-max-width - Max width of inner content (default: 48rem).
+ * @cssprop --page-inset-min-width - Min width of inner content (default: auto).
+ */
+export declare class DuiPageInset extends LitElement {
+    #private;
+    static tagName: "dui-page-inset";
+    static styles: import("lit").CSSResult[];
+    /** Maximum width of the inner content area. Overrides --page-inset-max-width. */
+    accessor maxWidth: string | undefined;
+    /** Minimum width of the inner content area. Overrides --page-inset-min-width. */
+    accessor minWidth: string | undefined;
+    /** Horizontal padding. Overrides --page-inset-pad-x. */
+    accessor padX: string | undefined;
+    /** Vertical padding. Overrides --page-inset-pad-y. */
+    accessor padY: string | undefined;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}

package/page-inset/page-inset.js

@@ -0,0 +1,103 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/page-inset */
+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 {
+    display: block;
+    --page-inset-pad-x: var(--space-16);
+    --page-inset-pad-y: var(--space-12);
+    --page-inset-max-width: 48rem;
+    --page-inset-min-width: auto;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--page-inset-pad-y) var(--page-inset-pad-x);
+    min-height: 100cqh;
+    max-width: 100cqw;
+  }
+
+  [part="inner"] {
+    max-width: var(--page-inset-max-width);
+    min-width: var(--page-inset-min-width);
+    width: 100%;
+  }
+`;
+/**
+ * `<dui-page-inset>` — Centers content with max-width constraints and configurable padding.
+ *
+ * @slot - Content to be centered within the inset area.
+ * @csspart root - The outer container element.
+ * @csspart inner - The inner content wrapper with max-width constraint.
+ * @cssprop --page-inset-pad-x - Horizontal padding (default: var(--space-16)).
+ * @cssprop --page-inset-pad-y - Vertical padding (default: var(--space-12)).
+ * @cssprop --page-inset-max-width - Max width of inner content (default: 48rem).
+ * @cssprop --page-inset-min-width - Min width of inner content (default: auto).
+ */
+export class DuiPageInset extends LitElement {
+    static { this.tagName = "dui-page-inset"; }
+    static { this.styles = [base, styles]; }
+    #maxWidth_accessor_storage;
+    /** Maximum width of the inner content area. Overrides --page-inset-max-width. */
+    get maxWidth() { return this.#maxWidth_accessor_storage; }
+    set maxWidth(value) { this.#maxWidth_accessor_storage = value; }
+    #minWidth_accessor_storage;
+    /** Minimum width of the inner content area. Overrides --page-inset-min-width. */
+    get minWidth() { return this.#minWidth_accessor_storage; }
+    set minWidth(value) { this.#minWidth_accessor_storage = value; }
+    #padX_accessor_storage;
+    /** Horizontal padding. Overrides --page-inset-pad-x. */
+    get padX() { return this.#padX_accessor_storage; }
+    set padX(value) { this.#padX_accessor_storage = value; }
+    #padY_accessor_storage;
+    /** Vertical padding. Overrides --page-inset-pad-y. */
+    get padY() { return this.#padY_accessor_storage; }
+    set padY(value) { this.#padY_accessor_storage = value; }
+    #setOrRemove(prop, value) {
+        if (value)
+            this.style.setProperty(prop, value);
+        else
+            this.style.removeProperty(prop);
+    }
+    willUpdate(changed) {
+        if (changed.has("maxWidth"))
+            this.#setOrRemove("--page-inset-max-width", this.maxWidth);
+        if (changed.has("minWidth"))
+            this.#setOrRemove("--page-inset-min-width", this.minWidth);
+        if (changed.has("padX"))
+            this.#setOrRemove("--page-inset-pad-x", this.padX);
+        if (changed.has("padY"))
+            this.#setOrRemove("--page-inset-pad-y", this.padY);
+    }
+    render() {
+        return html `
+      <div part="root">
+        <div part="inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: "max-width" })
+], DuiPageInset.prototype, "maxWidth", null);
+__decorate([
+    property({ attribute: "min-width" })
+], DuiPageInset.prototype, "minWidth", null);
+__decorate([
+    property({ attribute: "pad-x" })
+], DuiPageInset.prototype, "padX", null);
+__decorate([
+    property({ attribute: "pad-y" })
+], DuiPageInset.prototype, "padY", null);

package/page-inset/register.d.ts

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