@moni-labs/moni-ui 0.2.0

package/dist/components/moni-text-field.js

@@ -0,0 +1,190 @@
+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 { html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+/**
+ * Visual-only text field. Renders the `.field` family of BeerCSS helpers
+ * with a native `<input>`.
+ *
+ * This component is **visual-only**: it does NOT listen to `@input` to
+ * sync the `value` attribute back from the underlying input. Consumers
+ * either use form submission or wire their own change handling.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, type, icon, trailing-icon,
+ *    prefix, suffix, helper, error, error-text, disabled, placeholder — see below.
+ *  - loading:   present → shows indeterminate circular progress
+ */
+let MoniTextField = class MoniTextField extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.label = '';
+        this.variant = 'filled';
+        this.size = 'medium';
+        this.shape = 'no-round';
+        this.type = 'text';
+        this.icon = '';
+        this.trailingIcon = '';
+        this.prefix = '';
+        this.suffix = '';
+        this.helper = '';
+        this.errorText = '';
+        this.error = false;
+        this.loading = false;
+        this.disabled = false;
+        this.value = '';
+        this.placeholder = '';
+    }
+    updated(changed) {
+        if (this._input) {
+            if (changed.has('value'))
+                this._input.value = this.value;
+            if (changed.has('disabled'))
+                this._input.disabled = this.disabled;
+        }
+    }
+    static { this.styles = [sharedStyles, fieldStyles]; }
+    render() {
+        const hasLeading = Boolean(this.icon) || Boolean(this.prefix);
+        const hasTrailing = Boolean(this.trailingIcon) || Boolean(this.suffix);
+        const isActive = Boolean(this.value) || Boolean(this.placeholder);
+        const fieldClasses = {
+            field: true,
+            label: Boolean(this.label),
+            fill: this.variant === 'filled',
+            border: this.variant === 'outlined',
+            small: this.size === 'small',
+            large: this.size === 'large',
+            extra: this.size === 'extra',
+            prefix: hasLeading,
+            suffix: hasTrailing,
+            invalid: this.error,
+            round: this.shape === 'round',
+            square: this.shape === 'no-round'
+        };
+        const placeholder = this.placeholder || (this.label ? ' ' : '');
+        const leading = this.icon
+            ? html `<i class="leading-icon" part="leading-icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></i>`
+            : this.prefix
+                ? html `<span class="leading-icon" part="prefix"
+						>${this.prefix}</span
+					>`
+                : nothing;
+        const trailing = this.loading
+            ? html `<i class="trailing-icon" part="trailing-icon"
+					><moni-progress
+						variant="circular"
+						indeterminate
+						size="small"
+						style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
+					></moni-progress
+				></i>`
+            : this.trailingIcon
+                ? html `<i class="trailing-icon" part="trailing-icon"
+						><moni-icon name="${this.trailingIcon}"></moni-icon
+					></i>`
+                : this.suffix
+                    ? html `<span class="trailing-icon" part="suffix"
+							>${this.suffix}</span
+						>`
+                    : nothing;
+        return html `<div class=${classMap(fieldClasses)} part="field">
+			${leading}
+			<input
+				part="input"
+				type=${this.type}
+				placeholder=${placeholder}
+				?disabled=${this.disabled}
+				.value=${this.value}
+				name=${ifDefined(this.name || undefined)}
+				class=${isActive ? 'active' : ''}
+			/>
+			${this.label
+            ? html `<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+            : nothing}
+			${trailing}
+			${this.error
+            ? html `<output part="helper" class="invalid"
+						>${this.errorText || this.helper}</output
+					>`
+            : this.helper
+                ? html `<output part="helper">${this.helper}</output>`
+                : nothing}
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'trailing-icon' })
+], MoniTextField.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "prefix", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "suffix", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "helper", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'error-text' })
+], MoniTextField.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextField.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextField.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextField.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "placeholder", void 0);
+__decorate([
+    query('input')
+], MoniTextField.prototype, "_input", void 0);
+MoniTextField = __decorate([
+    customElement('moni-text-field')
+], MoniTextField);
+export { MoniTextField };
+export default MoniTextField;

package/dist/components/moni-textarea.d.ts

@@ -0,0 +1,57 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+/**
+ * Visual-only textarea. Same field shell as moni-text-field but renders a
+ * `<textarea>`. Visual-only: no `@input` listener.
+ *
+ * M3 spec (`m3-docs/components/text-fields/specs.md`): the textarea supports
+ * both **filled** and **outlined** variants. When `maxlength` is set, a
+ * character counter is shown next to the supporting text
+ * (`{value.length} / {maxlength}`).
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ *  - icon:           leading Material Symbols name
+ *  - trailing-icon:  trailing Material Symbols name
+ *  - prefix:         short text rendered before the input (e.g. "https://")
+ *  - suffix:         short text rendered after the input (e.g. ".com")
+ *  - loading:        present → shows indeterminate circular progress
+ *  - rows:           native textarea rows attribute (default 3)
+ *  - maxlength:      when set, displays a character counter
+ *                    (auto-shown; can be hidden via `no-counter`)
+ *  - no-counter:     suppress the character counter even when maxlength is set
+ */
+export declare class MoniTextarea extends MoniElement {
+    name: string;
+    label: string;
+    variant: 'filled' | 'outlined';
+    size: 'small' | 'medium' | 'large' | 'extra';
+    shape: 'round' | 'square' | 'no-round';
+    icon: string;
+    trailingIcon: string;
+    prefix: string;
+    suffix: string;
+    rows: number;
+    maxlength: number | null;
+    noCounter: boolean;
+    loading: boolean;
+    disabled: boolean;
+    helper: string;
+    errorText: string;
+    error: boolean;
+    value: string;
+    placeholder: string;
+    private _input;
+    updated(changed: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-textarea': MoniTextarea;
+    }
+}
+export default MoniTextarea;
+//# sourceMappingURL=moni-textarea.d.ts.map

package/dist/components/moni-textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-textarea.d.ts","sourceRoot":"","sources":["../../src/components/moni-textarea.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,YAAa,SAAQ,WAAW;IACf,IAAI,SAAM;IACV,KAAK,SAAM;IACX,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAc;IACvB,IAAI,SAAM;IACkB,YAAY,SAAM;IAC9C,MAAM,SAAM;IACZ,MAAM,SAAM;IACE,IAAI,SAAK;IACT,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3E,SAAS,UAAS;IAC0B,OAAO,UAAS;IAChB,QAAQ,UAAS;IAChC,MAAM,SAAM;IACa,SAAS,SAAM;IACzB,KAAK,UAAS;IAC7B,KAAK,SAAM;IACX,WAAW,SAAM;IAE3B,OAAO,CAAC,MAAM,CAAuB;IAE/C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C,OAAgB,MAAM,4BAA+B;IAE5C,MAAM;CAkGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-textarea.js

@@ -0,0 +1,228 @@
+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 { html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+/**
+ * Visual-only textarea. Same field shell as moni-text-field but renders a
+ * `<textarea>`. Visual-only: no `@input` listener.
+ *
+ * M3 spec (`m3-docs/components/text-fields/specs.md`): the textarea supports
+ * both **filled** and **outlined** variants. When `maxlength` is set, a
+ * character counter is shown next to the supporting text
+ * (`{value.length} / {maxlength}`).
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ *  - icon:           leading Material Symbols name
+ *  - trailing-icon:  trailing Material Symbols name
+ *  - prefix:         short text rendered before the input (e.g. "https://")
+ *  - suffix:         short text rendered after the input (e.g. ".com")
+ *  - loading:        present → shows indeterminate circular progress
+ *  - rows:           native textarea rows attribute (default 3)
+ *  - maxlength:      when set, displays a character counter
+ *                    (auto-shown; can be hidden via `no-counter`)
+ *  - no-counter:     suppress the character counter even when maxlength is set
+ */
+let MoniTextarea = class MoniTextarea extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.label = '';
+        this.variant = 'filled';
+        this.size = 'medium';
+        this.shape = 'no-round';
+        this.icon = '';
+        this.trailingIcon = '';
+        this.prefix = '';
+        this.suffix = '';
+        this.rows = 3;
+        this.maxlength = null;
+        this.noCounter = false;
+        this.loading = false;
+        this.disabled = false;
+        this.helper = '';
+        this.errorText = '';
+        this.error = false;
+        this.value = '';
+        this.placeholder = '';
+    }
+    updated(changed) {
+        if (this._input) {
+            if (changed.has('value'))
+                this._input.value = this.value;
+            if (changed.has('disabled'))
+                this._input.disabled = this.disabled;
+            if (changed.has('maxlength') && this.maxlength != null) {
+                this._input.maxLength = this.maxlength;
+            }
+        }
+    }
+    static { this.styles = [sharedStyles, fieldStyles]; }
+    render() {
+        const hasLeading = Boolean(this.icon) || Boolean(this.prefix);
+        const hasTrailing = Boolean(this.trailingIcon) ||
+            Boolean(this.suffix) ||
+            this.loading;
+        const isActive = Boolean(this.value) || Boolean(this.placeholder);
+        const showCounter = !this.noCounter && this.maxlength != null && this.maxlength > 0;
+        const fieldClasses = {
+            field: true,
+            label: Boolean(this.label),
+            fill: this.variant === 'filled',
+            border: this.variant === 'outlined',
+            small: this.size === 'small',
+            large: this.size === 'large',
+            extra: this.size === 'extra',
+            prefix: hasLeading,
+            suffix: hasTrailing,
+            invalid: this.error,
+            round: this.shape === 'round',
+            square: this.shape === 'no-round'
+        };
+        const placeholder = this.placeholder || (this.label ? ' ' : '');
+        const leading = this.icon
+            ? html `<i class="leading-icon" part="leading-icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></i>`
+            : this.prefix
+                ? html `<span class="leading-icon" part="prefix"
+						>${this.prefix}</span
+					>`
+                : nothing;
+        const trailing = this.loading
+            ? html `<i class="trailing-icon" part="trailing-icon"
+					><moni-progress
+						variant="circular"
+						indeterminate
+						size="small"
+						style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
+					></moni-progress
+				></i>`
+            : this.trailingIcon
+                ? html `<i class="trailing-icon" part="trailing-icon"
+						><moni-icon name="${this.trailingIcon}"></moni-icon
+					></i>`
+                : this.suffix
+                    ? html `<span class="trailing-icon" part="suffix"
+							>${this.suffix}</span
+						>`
+                    : nothing;
+        // M3 spec: supporting text on the left, character counter on the right.
+        const counter = showCounter
+            ? html `<output part="counter" class="counter"
+						>${this.value.length} / ${this.maxlength}</output
+					>`
+            : nothing;
+        const helperText = this.error
+            ? html `<output part="helper" class="invalid"
+						>${this.errorText || this.helper}</output
+					>`
+            : this.helper
+                ? html `<output part="helper">${this.helper}</output>`
+                : nothing;
+        const hasFooter = helperText || counter;
+        return html `<div class=${classMap(fieldClasses)} part="field">
+			${leading}
+			<textarea
+				part="input"
+				rows=${this.rows}
+				maxlength=${ifDefined(this.maxlength ?? undefined)}
+				placeholder=${placeholder}
+				?disabled=${this.disabled}
+				.value=${this.value}
+				name=${ifDefined(this.name || undefined)}
+				class=${isActive ? 'active' : ''}
+			></textarea>
+			${this.label
+            ? html `<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+            : nothing}
+			${trailing}
+			${hasFooter
+            ? html `<div class="footer" part="footer">
+						${helperText}
+						<div class="spacer"></div>
+						${counter}
+					</div>`
+            : nothing}
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'trailing-icon' })
+], MoniTextarea.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "prefix", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "suffix", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniTextarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniTextarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-counter' })
+], MoniTextarea.prototype, "noCounter", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextarea.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextarea.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "helper", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'error-text' })
+], MoniTextarea.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextarea.prototype, "error", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "placeholder", void 0);
+__decorate([
+    query('textarea')
+], MoniTextarea.prototype, "_input", void 0);
+MoniTextarea = __decorate([
+    customElement('moni-textarea')
+], MoniTextarea);
+export { MoniTextarea };
+export default MoniTextarea;

package/dist/components/moni-time-picker.d.ts

@@ -0,0 +1,51 @@
+import { PropertyValues } from 'lit';
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+import './moni-button.js';
+/**
+ * Material Design 3 Time Picker Component.
+ * Supports interactive clock face (dial) and manual keyboard input.
+ *
+ * Attributes:
+ *  - value: Time value in "HH:MM" 24h format (default "00:00")
+ *  - use24Hour: If true, uses 24-hour mode without AM/PM toggle (default false)
+ *  - mode: "dial" | "input" (default "dial")
+ *
+ * Events:
+ *  - change: Fired when value changes (detail: { value })
+ *  - cancel: Fired when cancel button is clicked
+ *  - ok: Fired when OK button is clicked (detail: { value })
+ */
+export declare class MoniTimePicker extends MoniElement {
+    value: string;
+    use24Hour: boolean;
+    mode: 'dial' | 'input';
+    orientation: 'vertical' | 'horizontal' | 'auto';
+    private activeSelection;
+    private period;
+    private currentHour;
+    private currentMinute;
+    private clockFaceEl?;
+    private isDragging;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private parseValue;
+    private updateValue;
+    private toggleMode;
+    private setSelection;
+    private setPeriod;
+    private handleClockPointerDown;
+    private handleClockPointerMove;
+    private handleClockPointerUp;
+    private handleHourInputChange;
+    private handleMinuteInputChange;
+    static styles: import("lit").CSSResult[];
+    private renderDialClockFace;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-time-picker': MoniTimePicker;
+    }
+}
+export default MoniTimePicker;
+//# sourceMappingURL=moni-time-picker.d.ts.map

package/dist/components/moni-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-time-picker.d.ts","sourceRoot":"","sources":["../../src/components/moni-time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;GAaG;AACH,qBACa,cAAe,SAAQ,WAAW;IACjB,KAAK,SAAW;IACyB,SAAS,UAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,OAAO,CAAU;IAChC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAU;IAE7E,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAEb,OAAO,CAAC,WAAW,CAAC,CAAiB;IAE3D,OAAO,CAAC,UAAU,CAAS;cAER,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAM/D,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,sBAAsB;IA2C9B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,qBAAqB;IAiB7B,OAAO,CAAC,uBAAuB;IAY/B,OAAgB,MAAM,4BAqXpB;IAEF,OAAO,CAAC,mBAAmB;IAwIlB,MAAM;CAsFf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD;AAED,eAAe,cAAc,CAAC"}