@mono-lit/helper 0.0.1 → 0.0.3

package/dist/src/components/date/date-core.d.ts

@@ -1,8 +1,9 @@
-import { LitElement, TemplateResult } from 'lit';
-import { DateType, DateSize, DateColor, DateVariant, DateValidationState, DateMode, DateCssClass } from './date-types.js';
-import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
-import { Constructor } from '../../composables/hybird-prop';
-import { CssSizeValue } from '../../composables/css-size';
+import { Constructor } from "../../composables/hybird-prop.js";
+import { CssSizeValue } from "../../composables/css-size.js";
+import { DateColor, DateCssClass, DateMode, DateSize, DateType, DateValidationState, DateVariant } from "./date-types.js";
+import { LitElement, TemplateResult } from "lit";
+import { Options } from "flatpickr/dist/types/options";
+//#region src/components/date/date-core.d.ts
 /**
  * `MonoDateCore` — render-mode-agnostic logic for `mono-date` (props, hybrid
  * aliases, flatpickr instance lifecycle, validation/state, and the full
@@ -20,61 +21,62 @@ import { CssSizeValue } from '../../composables/css-size';
 export declare const MonoDateCore: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MonoDateCoreInterface> & T;
 /** Public surface added by the core mixin. */
 export declare class MonoDateCoreInterface {
-    type: DateType;
-    modelValue: string;
-    size: DateSize;
-    color: DateColor;
-    variant: DateVariant;
-    label?: string;
-    placeholder?: string;
-    helperText?: string;
-    validationState?: DateValidationState;
-    validationMessage?: string;
-    error: boolean;
-    errorMessage?: string;
-    success: boolean;
-    successMessage?: string;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    clearable: boolean;
-    ariaLabelText?: string;
-    dateFormat?: string;
-    altInput?: boolean;
-    altFormat?: string;
-    typeable?: boolean;
-    clickOpens?: boolean;
-    defaultDate?: FlatpickrOptions['defaultDate'];
-    minDate?: FlatpickrOptions['minDate'];
-    maxDate?: FlatpickrOptions['maxDate'];
-    disable?: FlatpickrOptions['disable'];
-    enable?: FlatpickrOptions['enable'];
-    mode?: DateMode;
-    enableSeconds?: boolean;
-    time24hr?: boolean;
-    hourIncrement?: number;
-    minuteIncrement?: number;
-    defaultHour?: number;
-    defaultMinute?: number;
-    inline?: boolean;
-    weekNumbers?: boolean;
-    monthSelectorType?: 'dropdown' | 'static';
-    shorthandCurrentMonth?: boolean;
-    position?: FlatpickrOptions['position'];
-    ariaDateFormat?: string;
-    locale?: FlatpickrOptions['locale'];
-    options?: Partial<FlatpickrOptions>;
-    width?: CssSizeValue;
-    height?: CssSizeValue;
-    minWidth?: CssSizeValue;
-    maxWidth?: CssSizeValue;
-    minHeight?: CssSizeValue;
-    maxHeight?: CssSizeValue;
-    cssClass: DateCssClass;
-    cssClassName: string;
-    readonly isOpen: boolean;
-    open(): void;
-    close(): void;
-    toggle(): void;
-    protected renderIcon(name: 'calendar' | 'clock' | 'close'): TemplateResult;
+  type: DateType;
+  modelValue: string;
+  size: DateSize;
+  color: DateColor;
+  variant: DateVariant;
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  validationState?: DateValidationState;
+  validationMessage?: string;
+  error: boolean;
+  errorMessage?: string;
+  success: boolean;
+  successMessage?: string;
+  disabled: boolean;
+  readonly: boolean;
+  required: boolean;
+  clearable: boolean;
+  ariaLabelText?: string;
+  dateFormat?: string;
+  altInput?: boolean;
+  altFormat?: string;
+  typeable?: boolean;
+  clickOpens?: boolean;
+  defaultDate?: Options['defaultDate'];
+  minDate?: Options['minDate'];
+  maxDate?: Options['maxDate'];
+  disable?: Options['disable'];
+  enable?: Options['enable'];
+  mode?: DateMode;
+  enableSeconds?: boolean;
+  time24hr?: boolean;
+  hourIncrement?: number;
+  minuteIncrement?: number;
+  defaultHour?: number;
+  defaultMinute?: number;
+  inline?: boolean;
+  weekNumbers?: boolean;
+  monthSelectorType?: 'dropdown' | 'static';
+  shorthandCurrentMonth?: boolean;
+  position?: Options['position'];
+  ariaDateFormat?: string;
+  locale?: Options['locale'];
+  options?: Partial<Options>;
+  width?: CssSizeValue;
+  height?: CssSizeValue;
+  minWidth?: CssSizeValue;
+  maxWidth?: CssSizeValue;
+  minHeight?: CssSizeValue;
+  maxHeight?: CssSizeValue;
+  cssClass: DateCssClass;
+  cssClassName: string;
+  readonly isOpen: boolean;
+  open(): void;
+  close(): void;
+  toggle(): void;
+  protected renderIcon(name: 'calendar' | 'clock' | 'close'): TemplateResult;
 }
+//#endregion

package/dist/src/components/date/date-types.d.ts

@@ -1,5 +1,6 @@
-import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
-import { VisibilityProps } from '../../composables/visibility';
+import { VisibilityProps } from "../../composables/visibility.js";
+import { Options } from "flatpickr/dist/types/options";
+//#region src/components/date/date-types.d.ts
 /** Picker mode — drives flatpickr's calendar/time configuration. */
 export type DateType = 'date' | 'datetime' | 'time';
 export type DateSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -9,155 +10,156 @@ export type DateValidationState = 'default' | 'error' | 'success';
 /** flatpickr selection mode. */
 export type DateMode = 'single' | 'multiple' | 'range';
 export interface DateCssClass {
-    root?: string;
-    label?: string;
-    required?: string;
-    field?: string;
-    icon?: string;
-    native?: string;
-    clear?: string;
-    messageWrap?: string;
-    message?: string;
+  root?: string;
+  label?: string;
+  required?: string;
+  field?: string;
+  icon?: string;
+  native?: string;
+  clear?: string;
+  messageWrap?: string;
+  message?: string;
 }
 /** Emitted on selection change. */
 export interface DateChangeEventDetail {
-    /** Formatted value string (flatpickr `dateStr`) — mirrors `modelValue`. */
-    value: string;
-    /** Same as `value`; read this for Vue `v-model` (`$event.detail.modelValue`). */
-    modelValue: string;
-    /** Raw selected Date objects (one for single, two for range, N for multiple). */
-    dates: Date[];
-    /** The flatpickr instance, for advanced access. */
-    instance: unknown;
-    sourceEvent?: Event;
+  /** Formatted value string (flatpickr `dateStr`) — mirrors `modelValue`. */
+  value: string;
+  /** Same as `value`; read this for Vue `v-model` (`$event.detail.modelValue`). */
+  modelValue: string;
+  /** Raw selected Date objects (one for single, two for range, N for multiple). */
+  dates: Date[];
+  /** The flatpickr instance, for advanced access. */
+  instance: unknown;
+  sourceEvent?: Event;
 }
 export type DateChangeEvent = CustomEvent<DateChangeEventDetail>;
 export type DateOpenEvent = CustomEvent<{
-    dates: Date[];
-    instance: unknown;
+  dates: Date[];
+  instance: unknown;
 }>;
 export type DateCloseEvent = CustomEvent<{
-    dates: Date[];
-    instance: unknown;
+  dates: Date[];
+  instance: unknown;
 }>;
 export interface DateEvents {
-    change: DateChangeEvent;
-    open: DateOpenEvent;
-    close: DateCloseEvent;
-    'mno-change': DateChangeEvent;
-    mnoChange: DateChangeEvent;
-    'mno-open': DateOpenEvent;
-    mnoOpen: DateOpenEvent;
-    'mno-close': DateCloseEvent;
-    mnoClose: DateCloseEvent;
+  change: DateChangeEvent;
+  open: DateOpenEvent;
+  close: DateCloseEvent;
+  'mno-change': DateChangeEvent;
+  mnoChange: DateChangeEvent;
+  'mno-open': DateOpenEvent;
+  mnoOpen: DateOpenEvent;
+  'mno-close': DateCloseEvent;
+  mnoClose: DateCloseEvent;
 }
 export interface DateProps extends VisibilityProps {
-    /** Picker mode: `date` (default), `datetime`, or `time`. */
-    type?: DateType;
-    /** Selected value as a formatted string (two-way bound). */
-    modelValue?: string;
-    'model-value'?: string;
-    modelvalue?: string;
-    value?: string;
-    /** Visual size / color / variant (mirror mono-input). */
-    size?: DateSize;
-    color?: DateColor;
-    variant?: DateVariant;
-    /** Field label + helper / validation messaging. */
-    label?: string;
-    placeholder?: string;
-    helperText?: string;
-    'helper-text'?: string;
-    validationState?: DateValidationState;
-    'validation-state'?: DateValidationState;
-    validationMessage?: string;
-    'validation-message'?: string;
-    error?: boolean;
-    errorMessage?: string;
-    'error-message'?: string;
-    success?: boolean;
-    successMessage?: string;
-    'success-message'?: string;
-    /** State flags. */
-    disabled?: boolean;
-    readonly?: boolean;
-    required?: boolean;
-    clearable?: boolean;
-    ariaLabelText?: string;
-    'aria-label-text'?: string;
-    /** Output/parsing format, e.g. `"Y-m-d"`, `"d M Y"`, `"H:i"`. */
-    dateFormat?: string;
-    'date-format'?: string;
-    /** Show a second, human-readable input while submitting `dateFormat`. */
-    altInput?: boolean;
-    'alt-input'?: boolean;
-    altFormat?: string;
-    'alt-format'?: string;
-    /**
-     * Let the user type into the input directly. Beyond flatpickr's Enter/blur
-     * parsing, mono-date live-parses as you type: the calendar navigates to the
-     * value and auto-selects it once a complete date (matching `dateFormat`) is
-     * entered. Best used without `altInput`.
-     */
-    typeable?: boolean;
-    /** Open the calendar on input click (default true). */
-    clickOpens?: boolean;
-    'click-opens'?: boolean;
-    defaultDate?: string | number | Date | Array<string | number | Date>;
-    'default-date'?: string | number | Date | Array<string | number | Date>;
-    minDate?: string | number | Date;
-    'min-date'?: string | number | Date;
-    maxDate?: string | number | Date;
-    'max-date'?: string | number | Date;
-    /** Dates to disable (values, ranges, or predicate fns). */
-    disable?: FlatpickrOptions['disable'];
-    /** Whitelist of selectable dates (everything else disabled). */
-    enable?: FlatpickrOptions['enable'];
-    mode?: DateMode;
-    enableSeconds?: boolean;
-    'enable-seconds'?: boolean;
-    /** 24-hour time (flatpickr `time_24hr`). */
-    time24hr?: boolean;
-    'time-24hr'?: boolean;
-    hourIncrement?: number;
-    'hour-increment'?: number;
-    minuteIncrement?: number;
-    'minute-increment'?: number;
-    defaultHour?: number;
-    'default-hour'?: number;
-    defaultMinute?: number;
-    'default-minute'?: number;
-    /** Render the calendar inline (always visible). */
-    inline?: boolean;
-    weekNumbers?: boolean;
-    'week-numbers'?: boolean;
-    monthSelectorType?: 'dropdown' | 'static';
-    'month-selector-type'?: 'dropdown' | 'static';
-    shorthandCurrentMonth?: boolean;
-    'shorthand-current-month'?: boolean;
-    position?: FlatpickrOptions['position'];
-    ariaDateFormat?: string;
-    'aria-date-format'?: string;
-    /** flatpickr locale key or object. */
-    locale?: FlatpickrOptions['locale'];
-    /**
-     * Escape hatch — any other flatpickr option, merged into the config. Lets you
-     * use the full flatpickr feature set beyond the named props above.
-     */
-    options?: Partial<FlatpickrOptions>;
-    /** Explicit sizing (CSS string or number → px). Use `width="100%"` for full width. */
-    width?: string | number;
-    height?: string | number;
-    minWidth?: string | number;
-    'min-width'?: string | number;
-    maxWidth?: string | number;
-    'max-width'?: string | number;
-    minHeight?: string | number;
-    'min-height'?: string | number;
-    maxHeight?: string | number;
-    'max-height'?: string | number;
-    /** Per-part class overrides. */
-    cssClass?: DateCssClass;
-    cssclass?: DateCssClass;
-    'css-class'?: DateCssClass | string;
+  /** Picker mode: `date` (default), `datetime`, or `time`. */
+  type?: DateType;
+  /** Selected value as a formatted string (two-way bound). */
+  modelValue?: string;
+  'model-value'?: string;
+  modelvalue?: string;
+  value?: string;
+  /** Visual size / color / variant (mirror mono-input). */
+  size?: DateSize;
+  color?: DateColor;
+  variant?: DateVariant;
+  /** Field label + helper / validation messaging. */
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  'helper-text'?: string;
+  validationState?: DateValidationState;
+  'validation-state'?: DateValidationState;
+  validationMessage?: string;
+  'validation-message'?: string;
+  error?: boolean;
+  errorMessage?: string;
+  'error-message'?: string;
+  success?: boolean;
+  successMessage?: string;
+  'success-message'?: string;
+  /** State flags. */
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  clearable?: boolean;
+  ariaLabelText?: string;
+  'aria-label-text'?: string;
+  /** Output/parsing format, e.g. `"Y-m-d"`, `"d M Y"`, `"H:i"`. */
+  dateFormat?: string;
+  'date-format'?: string;
+  /** Show a second, human-readable input while submitting `dateFormat`. */
+  altInput?: boolean;
+  'alt-input'?: boolean;
+  altFormat?: string;
+  'alt-format'?: string;
+  /**
+   * Let the user type into the input directly. Beyond flatpickr's Enter/blur
+   * parsing, mono-date live-parses as you type: the calendar navigates to the
+   * value and auto-selects it once a complete date (matching `dateFormat`) is
+   * entered. Best used without `altInput`.
+   */
+  typeable?: boolean;
+  /** Open the calendar on input click (default true). */
+  clickOpens?: boolean;
+  'click-opens'?: boolean;
+  defaultDate?: string | number | Date | Array<string | number | Date>;
+  'default-date'?: string | number | Date | Array<string | number | Date>;
+  minDate?: string | number | Date;
+  'min-date'?: string | number | Date;
+  maxDate?: string | number | Date;
+  'max-date'?: string | number | Date;
+  /** Dates to disable (values, ranges, or predicate fns). */
+  disable?: Options['disable'];
+  /** Whitelist of selectable dates (everything else disabled). */
+  enable?: Options['enable'];
+  mode?: DateMode;
+  enableSeconds?: boolean;
+  'enable-seconds'?: boolean;
+  /** 24-hour time (flatpickr `time_24hr`). */
+  time24hr?: boolean;
+  'time-24hr'?: boolean;
+  hourIncrement?: number;
+  'hour-increment'?: number;
+  minuteIncrement?: number;
+  'minute-increment'?: number;
+  defaultHour?: number;
+  'default-hour'?: number;
+  defaultMinute?: number;
+  'default-minute'?: number;
+  /** Render the calendar inline (always visible). */
+  inline?: boolean;
+  weekNumbers?: boolean;
+  'week-numbers'?: boolean;
+  monthSelectorType?: 'dropdown' | 'static';
+  'month-selector-type'?: 'dropdown' | 'static';
+  shorthandCurrentMonth?: boolean;
+  'shorthand-current-month'?: boolean;
+  position?: Options['position'];
+  ariaDateFormat?: string;
+  'aria-date-format'?: string;
+  /** flatpickr locale key or object. */
+  locale?: Options['locale'];
+  /**
+   * Escape hatch — any other flatpickr option, merged into the config. Lets you
+   * use the full flatpickr feature set beyond the named props above.
+   */
+  options?: Partial<Options>;
+  /** Explicit sizing (CSS string or number → px). Use `width="100%"` for full width. */
+  width?: string | number;
+  height?: string | number;
+  minWidth?: string | number;
+  'min-width'?: string | number;
+  maxWidth?: string | number;
+  'max-width'?: string | number;
+  minHeight?: string | number;
+  'min-height'?: string | number;
+  maxHeight?: string | number;
+  'max-height'?: string | number;
+  /** Per-part class overrides. */
+  cssClass?: DateCssClass;
+  cssclass?: DateCssClass;
+  'css-class'?: DateCssClass | string;
 }
+//#endregion

package/dist/src/components/date/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference path="../../../vue.d.ts" />
-export { MonoDate } from './mono-date.js';
-export type { DateType, DateSize, DateColor, DateVariant, DateValidationState, DateMode, DateCssClass, DateProps, DateEvents, DateChangeEventDetail, } from './date-types.js';
+import { DateChangeEventDetail, DateColor, DateCssClass, DateEvents, DateMode, DateProps, DateSize, DateType, DateValidationState, DateVariant } from "./date-types.js";
+import { MonoDate } from "./mono-date.js";
+export { type DateChangeEventDetail, type DateColor, type DateCssClass, type DateEvents, type DateMode, type DateProps, type DateSize, type DateType, type DateValidationState, type DateVariant, MonoDate };

package/dist/src/components/date/index.shadow.d.ts

@@ -1,4 +1,5 @@
 /// <reference path="../../../vue.d.ts" />
-export { MonoDateShadow } from './mono-date.shadow.js';
-export { MonoDateCore } from './date-core.js';
-export type { DateType, DateSize, DateColor, DateVariant, DateValidationState, DateMode, DateCssClass, DateProps, DateEvents, DateChangeEventDetail, } from './date-types.js';
+import { DateChangeEventDetail, DateColor, DateCssClass, DateEvents, DateMode, DateProps, DateSize, DateType, DateValidationState, DateVariant } from "./date-types.js";
+import { MonoDateCore } from "./date-core.js";
+import { MonoDateShadow } from "./mono-date.shadow.js";
+export { type DateChangeEventDetail, type DateColor, type DateCssClass, type DateEvents, type DateMode, type DateProps, type DateSize, type DateType, type DateValidationState, type DateVariant, MonoDateCore, MonoDateShadow };

package/dist/src/components/date/mono-date.d.ts

@@ -1,5 +1,8 @@
-import { LitElement } from 'lit';
-declare const MonoDate_base: import('../../composables/hybird-prop').Constructor<import('./date-core.js').MonoDateCoreInterface> & typeof LitElement;
+import { Constructor } from "../../composables/hybird-prop.js";
+import { MonoDateCoreInterface } from "./date-core.js";
+import { LitElement } from "lit";
+//#region src/components/date/mono-date.d.ts
+declare const MonoDate_base: Constructor<MonoDateCoreInterface> & typeof LitElement;
 /**
  * Light-DOM `mono-date` (default build, `@mono-lit/helper/ui/date`).
  *
@@ -11,12 +14,13 @@ declare const MonoDate_base: import('../../composables/hybird-prop').Constructor
  * `mono-date`, so a document loads one.
  */
 export declare class MonoDate extends MonoDate_base {
-    static styles: import('lit').CSSResult[];
-    protected createRenderRoot(): HTMLElement;
+  static styles: import("lit").CSSResult[];
+  protected createRenderRoot(): HTMLElement;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        'mono-date': MonoDate;
-    }
+  interface HTMLElementTagNameMap {
+    'mono-date': MonoDate;
+  }
 }
-export {};
+//#endregion
+export {};

package/dist/src/components/date/mono-date.shadow.d.ts

@@ -1,5 +1,8 @@
-import { LitElement, TemplateResult } from 'lit';
-declare const MonoDateShadow_base: import('../../composables/hybird-prop').Constructor<import('./date-core.js').MonoDateCoreInterface> & typeof LitElement;
+import { Constructor } from "../../composables/hybird-prop.js";
+import { MonoDateCoreInterface } from "./date-core.js";
+import { LitElement, TemplateResult } from "lit";
+//#region src/components/date/mono-date.shadow.d.ts
+declare const MonoDateShadow_base: Constructor<MonoDateCoreInterface> & typeof LitElement;
 /**
  * Shadow-DOM `mono-date` (the opt-in SSR build, `@mono-lit/helper/ui/shadow/date`).
  *
@@ -13,19 +16,20 @@ declare const MonoDateShadow_base: import('../../composables/hybird-prop').Const
  * document loads one.
  */
 export declare class MonoDateShadow extends MonoDateShadow_base {
-    static styles: import('lit').CSSResult[];
-    connectedCallback(): void;
-    /**
-     * Inline SVG — the global `.mono-icon`/`i-mdi-*` UnoCSS icons can't reach a
-     * shadow root (the mask rule never applies, so an `i-mdi-*` span renders as a
-     * solid "black cube"). The `.mono-icon` class is still applied so the existing
-     * `.mono-date-icon > .mono-icon` / `.mono-date-clear > .mono-icon` sizing rules
-     * take effect; `fill="currentColor"` follows the `--date-muted` icon color.
-     *
-     * The paths are the exact `mdi:calendar-outline` / `mdi:clock-outline` /
-     * `mdi:close` glyph bodies (same MDI set the light build resolves via
-     * `i-mdi-*`), so the shadow icons match the light-DOM date pixel-for-pixel.
-     */
-    protected renderIcon(name: 'calendar' | 'clock' | 'close'): TemplateResult;
+  static styles: import("lit").CSSResult[];
+  connectedCallback(): void;
+  /**
+   * Inline SVG — the global `.mono-icon`/`i-mdi-*` UnoCSS icons can't reach a
+   * shadow root (the mask rule never applies, so an `i-mdi-*` span renders as a
+   * solid "black cube"). The `.mono-icon` class is still applied so the existing
+   * `.mono-date-icon > .mono-icon` / `.mono-date-clear > .mono-icon` sizing rules
+   * take effect; `fill="currentColor"` follows the `--date-muted` icon color.
+   *
+   * The paths are the exact `mdi:calendar-outline` / `mdi:clock-outline` /
+   * `mdi:close` glyph bodies (same MDI set the light build resolves via
+   * `i-mdi-*`), so the shadow icons match the light-DOM date pixel-for-pixel.
+   */
+  protected renderIcon(name: 'calendar' | 'clock' | 'close'): TemplateResult;
 }
-export {};
+//#endregion
+export {};