@mieweb/ui 0.10.0-dev.9 → 0.11.0-dev.0

package/dist/components/DateInput/index.d.ts

@@ -1,8 +1,40 @@
 import * as React from 'react';
-import { InputProps } from '../Input/index.js';
-import 'react/jsx-runtime';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    hasError?: boolean | null | undefined;
+    labelVariant?: "stacked" | "floating" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Omit<VariantProps<typeof inputVariants>, 'labelVariant'> {
+    /** Error message to display below the input */
+    error?: string;
+    /** Helper text to display below the input */
+    helperText?: string;
+    /** Label for the input */
+    label?: string;
+    /**
+     * How the label is rendered.
+     * - `stacked` (default): label above the input.
+     * - `floating`: label rests inside the input like a placeholder and floats
+     *   to the top of the field (staying inside it) when focused or filled.
+     *   Ignores `placeholder`; when `hideLabel` is set, falls back to a
+     *   visually-hidden stacked label.
+     */
+    labelVariant?: 'stacked' | 'floating';
+    /** Whether the label should be visually hidden (still accessible) */
+    hideLabel?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /**
+     * Color of the required asterisk.
+     * - `default`: destructive (hard requirement).
+     * - `warning`: warning color (soft requirement / recommended).
+     */
+    requiredVariant?: RequiredMarkVariant;
+}
+type RequiredMarkVariant = 'default' | 'warning';
 
 type DateInputMode = 'default' | 'dob' | 'expiration' | 'past' | 'future';
 type DateInputType = 'date' | 'datetime-local' | 'time' | 'month' | 'year';

package/dist/components/Dropdown/index.cjs

@@ -1,12 +1,14 @@
 'use strict';
 
-var chunkSGFYA22I_cjs = require('../../chunk-SGFYA22I.cjs');
+require('../../chunk-ZNUMOJOI.cjs');
+var chunkPINIBEIU_cjs = require('../../chunk-PINIBEIU.cjs');
 require('../../chunk-I44YNYI6.cjs');
 require('../../chunk-Z5S5JEJD.cjs');
+require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-FSGEDDF2.cjs');
 require('../../chunk-AOHJILLU.cjs');
-require('../../chunk-FHY3K6PL.cjs');
-require('../../chunk-NV2CWBI2.cjs');
+require('../../chunk-Z3WMDVMR.cjs');
+require('../../chunk-IEY3ZJIT.cjs');
 require('../../chunk-S5RVSXDV.cjs');
 require('../../chunk-EUAMEVVI.cjs');
 
@@ -14,31 +16,31 @@ require('../../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
-  get: function () { return chunkSGFYA22I_cjs.Dropdown; }
+  get: function () { return chunkPINIBEIU_cjs.Dropdown; }
 });
 Object.defineProperty(exports, "DropdownContent", {
   enumerable: true,
-  get: function () { return chunkSGFYA22I_cjs.DropdownContent; }
+  get: function () { return chunkPINIBEIU_cjs.DropdownContent; }
 });
 Object.defineProperty(exports, "DropdownHeader", {
   enumerable: true,
-  get: function () { return chunkSGFYA22I_cjs.DropdownHeader; }
+  get: function () { return chunkPINIBEIU_cjs.DropdownHeader; }
 });
 Object.defineProperty(exports, "DropdownItem", {
   enumerable: true,
-  get: function () { return chunkSGFYA22I_cjs.DropdownItem; }
+  get: function () { return chunkPINIBEIU_cjs.DropdownItem; }
 });
 Object.defineProperty(exports, "DropdownLabel", {
   enumerable: true,
-  get: function () { return chunkSGFYA22I_cjs.DropdownLabel; }
+  get: function () { return chunkPINIBEIU_cjs.DropdownLabel; }
 });
 Object.defineProperty(exports, "DropdownSeparator", {
   enumerable: true,
-  get: function () { return chunkSGFYA22I_cjs.DropdownSeparator; }
+  get: function () { return chunkPINIBEIU_cjs.DropdownSeparator; }
 });
 Object.defineProperty(exports, "DropdownSubmenu", {
   enumerable: true,
-  get: function () { return chunkSGFYA22I_cjs.DropdownSubmenu; }
+  get: function () { return chunkPINIBEIU_cjs.DropdownSubmenu; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/Dropdown/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as AnchoredPlacement } from '../../useAnchoredPosition-CKwLSQW8.cjs';
+
+type AnchoredPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top' | 'right-start' | 'right-end' | 'right' | 'left-start' | 'left-end' | 'left';
 
 type DropdownPlacement = AnchoredPlacement;
 interface DropdownProps {
@@ -125,9 +126,10 @@ interface DropdownSubmenuProps {
 /**
  * A dropdown item that opens a nested flyout menu.
  *
- * Opens on hover or click, and via ArrowRight/Enter/Space from the keyboard;
- * ArrowLeft or Escape closes just the submenu (Escape is stopped so the root
- * menu stays open) and returns focus to the trigger.
+ * Opens on hover or click, and from the keyboard via Enter/Space or the
+ * arrow toward the inline-end (ArrowRight in LTR, ArrowLeft in RTL); the
+ * opposite arrow or Escape closes just the submenu (Escape is stopped so the
+ * root menu stays open) and returns focus to the trigger.
  *
  * @example
  * ```tsx

package/dist/components/Dropdown/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as AnchoredPlacement } from '../../useAnchoredPosition-CKwLSQW8.js';
+
+type AnchoredPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top' | 'right-start' | 'right-end' | 'right' | 'left-start' | 'left-end' | 'left';
 
 type DropdownPlacement = AnchoredPlacement;
 interface DropdownProps {
@@ -125,9 +126,10 @@ interface DropdownSubmenuProps {
 /**
  * A dropdown item that opens a nested flyout menu.
  *
- * Opens on hover or click, and via ArrowRight/Enter/Space from the keyboard;
- * ArrowLeft or Escape closes just the submenu (Escape is stopped so the root
- * menu stays open) and returns focus to the trigger.
+ * Opens on hover or click, and from the keyboard via Enter/Space or the
+ * arrow toward the inline-end (ArrowRight in LTR, ArrowLeft in RTL); the
+ * opposite arrow or Escape closes just the submenu (Escape is stopped so the
+ * root menu stays open) and returns focus to the trigger.
  *
  * @example
  * ```tsx

package/dist/components/Dropdown/index.js

@@ -1,10 +1,12 @@
-export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator, DropdownSubmenu } from '../../chunk-ZGRCSNPK.js';
+import '../../chunk-AMYFRY7K.js';
+export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator, DropdownSubmenu } from '../../chunk-OYUIEJPN.js';
 import '../../chunk-6NZXWKUE.js';
 import '../../chunk-3IMM2PM4.js';
+import '../../chunk-T4ME7QCT.js';
 import '../../chunk-62ZOA6PX.js';
 import '../../chunk-WSNMQQ4P.js';
-import '../../chunk-T4ME7QCT.js';
-import '../../chunk-XCP454Q6.js';
+import '../../chunk-YVKBXNPK.js';
+import '../../chunk-F4N67NAF.js';
 import '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';
 //# sourceMappingURL=index.js.map

package/dist/components/EmailEditor/index.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var chunkWSMBIXPU_cjs = require('../../chunk-WSMBIXPU.cjs');
+require('../../chunk-BXRQ6HEP.cjs');
+require('../../chunk-S7AMZ4RD.cjs');
+require('../../chunk-ATRW3J5Z.cjs');
+require('../../chunk-YP5T6NZD.cjs');
+require('../../chunk-PLMXN23Q.cjs');
+require('../../chunk-ZNUMOJOI.cjs');
+require('../../chunk-PINIBEIU.cjs');
+require('../../chunk-7WJ6MBF5.cjs');
+require('../../chunk-C7RVKV25.cjs');
+require('../../chunk-BSDBI6H7.cjs');
+require('../../chunk-UPWIJC6I.cjs');
+require('../../chunk-I44YNYI6.cjs');
+require('../../chunk-Z5S5JEJD.cjs');
+require('../../chunk-CPDNX3LS.cjs');
+require('../../chunk-FHY3K6PL.cjs');
+require('../../chunk-FSGEDDF2.cjs');
+require('../../chunk-AOHJILLU.cjs');
+require('../../chunk-Z3WMDVMR.cjs');
+require('../../chunk-EACNRR3C.cjs');
+require('../../chunk-ANMX7YDL.cjs');
+require('../../chunk-DXEPYK3I.cjs');
+require('../../chunk-IEY3ZJIT.cjs');
+require('../../chunk-S5RVSXDV.cjs');
+require('../../chunk-EUAMEVVI.cjs');
+
+
+
+Object.defineProperty(exports, "EMAIL_BLOCK_TYPES", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.EMAIL_BLOCK_TYPES; }
+});
+Object.defineProperty(exports, "EmailEditor", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.EmailEditor; }
+});
+Object.defineProperty(exports, "createDefaultDesignSettings", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.createDefaultDesignSettings; }
+});
+Object.defineProperty(exports, "createEmailBlock", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.createEmailBlock; }
+});
+Object.defineProperty(exports, "createEmailHtmlSanitizer", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.createEmailHtmlSanitizer; }
+});
+Object.defineProperty(exports, "createEmptyEmailContentTree", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.createEmptyEmailContentTree; }
+});
+Object.defineProperty(exports, "defaultEmailEditorLabels", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.defaultEmailEditorLabels; }
+});
+Object.defineProperty(exports, "generateEmailBlockId", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.generateEmailBlockId; }
+});
+Object.defineProperty(exports, "renderEmailMjml", {
+  enumerable: true,
+  get: function () { return chunkWSMBIXPU_cjs.renderEmailMjml; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/components/EmailEditor/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/components/EmailEditor/index.d.cts

@@ -0,0 +1,347 @@
+import * as React from 'react';
+import DOMPurify from 'dompurify';
+
+declare const defaultEmailEditorLabels: {
+    blocks: string;
+    design: string;
+    blockSettings: string;
+    undo: string;
+    redo: string;
+    viewport: string;
+    desktop: string;
+    mobile: string;
+    canvas: string;
+    moveUp: string;
+    moveDown: string;
+    duplicate: string;
+    remove: string;
+    dragHandle: string;
+    addBlock: string;
+    emptyCanvas: string;
+    emptyColumn: string;
+    unsupportedBlock: string;
+    noSelection: string;
+    column: string;
+    selectBlock: string;
+    announceAdded: string;
+    announceMoved: string;
+    announceDuplicated: string;
+    announceRemoved: string;
+    blockTypes: {
+        heading: string;
+        text: string;
+        button: string;
+        image: string;
+        divider: string;
+        spacer: string;
+        columns: string;
+        social: string;
+        hero: string;
+        html: string;
+        footer: string;
+        quote: string;
+        table: string;
+    };
+    platforms: {
+        facebook: string;
+        twitter: string;
+        linkedin: string;
+        instagram: string;
+        youtube: string;
+        github: string;
+        website: string;
+    };
+    fields: {
+        text: string;
+        content: string;
+        level: string;
+        alignment: string;
+        color: string;
+        textColor: string;
+        backgroundColor: string;
+        backgroundGradient: string;
+        accentColor: string;
+        url: string;
+        borderRadius: string;
+        fullWidth: string;
+        imageUrl: string;
+        uploadImage: string;
+        uploadFailed: string;
+        altText: string;
+        width: string;
+        style: string;
+        height: string;
+        iconSize: string;
+        platform: string;
+        socialLink: string;
+        addLink: string;
+        removeLink: string;
+        html: string;
+        companyName: string;
+        address: string;
+        phone: string;
+        showUnsubscribe: string;
+        unsubscribeText: string;
+        managePreferencesUrl: string;
+        managePreferencesText: string;
+        author: string;
+        role: string;
+        headerRow: string;
+        headerBackgroundColor: string;
+        headerTextColor: string;
+        borderColor: string;
+        addRow: string;
+        addColumn: string;
+        removeRow: string;
+        removeColumn: string;
+        cell: string;
+        categoryText: string;
+        headline: string;
+        subtitle: string;
+        ctaText: string;
+        ctaUrl: string;
+        ctaColor: string;
+        padding: string;
+        columnCount: string;
+        bodyBackgroundColor: string;
+        contentBackgroundColor: string;
+        contentWidth: string;
+        fontFamily: string;
+        headingColor: string;
+        linkColor: string;
+        buttonBackgroundColor: string;
+        buttonTextColor: string;
+        buttonBorderRadius: string;
+    };
+    options: {
+        left: string;
+        center: string;
+        right: string;
+        solid: string;
+        dashed: string;
+        dotted: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};
+type EmailEditorLabels = typeof defaultEmailEditorLabels;
+type EmailEditorLabelOverrides = {
+    [K in keyof EmailEditorLabels]?: EmailEditorLabels[K] extends string ? string : Partial<EmailEditorLabels[K]>;
+};
+
+/**
+ * Email document model. Field names match Waggleline's email builder, so
+ * documents built from this shared block set move between the two without
+ * migration. The union is closed: hosts with product-specific blocks must
+ * convert them to these types (or drop them) before loading a document.
+ * Unrecognised blocks are preserved in the document but render as an
+ * "unsupported block" placeholder in the canvas and are omitted from the MJML.
+ */
+type EmailAlignment = 'left' | 'center' | 'right';
+interface EmailBlockBase {
+    id: string;
+}
+interface EmailHeadingBlock extends EmailBlockBase {
+    type: 'heading';
+    level: 1 | 2 | 3 | 4;
+    text: string;
+    alignment?: EmailAlignment;
+    color?: string;
+}
+interface EmailTextBlock extends EmailBlockBase {
+    type: 'text';
+    /**
+     * HTML. Existing values are stored as-is and sanitised on every output
+     * (editing surface, canvas preview, `renderEmailMjml`); only HTML pasted or
+     * dropped into the editor is sanitised before it is stored.
+     */
+    content: string;
+    alignment?: EmailAlignment;
+    color?: string;
+}
+interface EmailButtonBlock extends EmailBlockBase {
+    type: 'button';
+    text: string;
+    url: string;
+    alignment?: EmailAlignment;
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: number;
+    fullWidth?: boolean;
+}
+interface EmailImageBlock extends EmailBlockBase {
+    type: 'image';
+    src: string;
+    alt: string;
+    href?: string;
+    width?: number | string;
+    borderRadius?: number;
+    alignment?: EmailAlignment;
+}
+interface EmailDividerBlock extends EmailBlockBase {
+    type: 'divider';
+    style?: 'solid' | 'dashed' | 'dotted';
+    color?: string;
+    width?: string;
+}
+interface EmailSpacerBlock extends EmailBlockBase {
+    type: 'spacer';
+    height: number;
+}
+interface EmailColumn {
+    id: string;
+    blocks: EmailContentBlock[];
+    /** Percentage; a row's columns should sum to 100. */
+    width?: number;
+    backgroundColor?: string;
+}
+interface EmailColumnsBlock extends EmailBlockBase {
+    type: 'columns';
+    columnCount: 1 | 2 | 3;
+    columns: EmailColumn[];
+    backgroundColor?: string;
+}
+type EmailSocialPlatform = 'facebook' | 'twitter' | 'linkedin' | 'instagram' | 'youtube' | 'github' | 'website';
+interface EmailSocialLink {
+    platform: EmailSocialPlatform;
+    url: string;
+}
+interface EmailSocialBlock extends EmailBlockBase {
+    type: 'social';
+    alignment?: EmailAlignment;
+    iconSize?: 'sm' | 'md' | 'lg';
+    links: EmailSocialLink[];
+}
+interface EmailHeroBlock extends EmailBlockBase {
+    type: 'hero';
+    headline: string;
+    subtitle?: string;
+    categoryText?: string;
+    ctaText?: string;
+    ctaUrl?: string;
+    backgroundColor?: string;
+    /** `linear-`/`radial-gradient(...)`; clients without CSS gradients fall back to `backgroundColor`. */
+    backgroundGradient?: string;
+    textColor?: string;
+    ctaColor?: string;
+    alignment?: EmailAlignment;
+    padding?: number;
+}
+interface EmailHtmlBlock extends EmailBlockBase {
+    type: 'html';
+    html: string;
+}
+interface EmailFooterBlock extends EmailBlockBase {
+    type: 'footer';
+    companyName?: string;
+    address?: string;
+    phone?: string;
+    showUnsubscribe: boolean;
+    unsubscribeText?: string;
+    managePreferencesUrl?: string;
+    managePreferencesText?: string;
+    alignment?: EmailAlignment;
+    color?: string;
+}
+interface EmailQuoteBlock extends EmailBlockBase {
+    type: 'quote';
+    text: string;
+    author?: string;
+    role?: string;
+    alignment?: EmailAlignment;
+    backgroundColor?: string;
+    textColor?: string;
+    accentColor?: string;
+}
+interface EmailTableBlock extends EmailBlockBase {
+    type: 'table';
+    rows: string[][];
+    headerRow?: boolean;
+    borderColor?: string;
+    headerBackgroundColor?: string;
+    headerTextColor?: string;
+    alignment?: EmailAlignment;
+}
+/** Blocks that can sit inside a column. */
+type EmailContentBlock = EmailHeadingBlock | EmailTextBlock | EmailButtonBlock | EmailImageBlock | EmailDividerBlock | EmailSpacerBlock | EmailSocialBlock | EmailHtmlBlock | EmailFooterBlock | EmailQuoteBlock | EmailTableBlock;
+type EmailBlock = EmailContentBlock | EmailColumnsBlock | EmailHeroBlock;
+type EmailBlockType = EmailBlock['type'];
+interface EmailContentTree {
+    version: string;
+    blocks: EmailBlock[];
+}
+interface EmailDesignSettings {
+    bodyBackgroundColor?: string;
+    contentBackgroundColor?: string;
+    /** Content width in px. */
+    contentWidth?: number;
+    textColor?: string;
+    fontFamily?: string;
+    headingColor?: string;
+    linkColor?: string;
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
+    buttonBorderRadius?: number;
+}
+/** A merge field offered in the editor, e.g. `{{first_name}}`. */
+interface EmailMergeTag {
+    token: string;
+    label: string;
+    group: string;
+}
+declare function generateEmailBlockId(): string;
+declare function createDefaultDesignSettings(): Required<EmailDesignSettings>;
+declare function createEmailBlock<T extends EmailBlockType>(type: T): Extract<EmailBlock, {
+    type: T;
+}>;
+declare function createEmptyEmailContentTree(): EmailContentTree;
+
+declare const EMAIL_BLOCK_TYPES: EmailBlockType[];
+interface EmailEditorProps {
+    /** The email document. Controlled. */
+    value: EmailContentTree;
+    /** Called with the next document after every edit. */
+    onChange: (value: EmailContentTree) => void;
+    /** Global colours, font and width. Merged over `createDefaultDesignSettings()`. */
+    design?: EmailDesignSettings;
+    /** Enables the Design tab. Omit to make design settings read-only. */
+    onDesignChange?: (design: EmailDesignSettings) => void;
+    /** Merge fields offered in the text block's Variables menu. */
+    mergeTags?: EmailMergeTag[];
+    /** Palette order and availability. Defaults to every block type. */
+    blockTypes?: EmailBlockType[];
+    /** Upload handler for image blocks; resolve with the hosted URL. */
+    onUploadImage?: (file: File) => Promise<string>;
+    /** Override any user-facing string. */
+    labels?: EmailEditorLabelOverrides;
+    className?: string;
+}
+/**
+ * Block-based email builder: palette, sortable canvas, per-block settings and
+ * global design. Serialise the document with `renderEmailMjml`.
+ */
+declare const EmailEditor: React.ForwardRefExoticComponent<EmailEditorProps & React.RefAttributes<HTMLDivElement>>;
+
+interface RenderEmailMjmlOptions {
+    design?: EmailDesignSettings;
+    /**
+     * Sanitises the HTML of `text` and `html` blocks. Defaults to DOMPurify with
+     * the email policy, which needs a DOM — on a server pass
+     * `createEmailHtmlSanitizer(new JSDOM('').window)` so the same policy applies
+     * (vanilla DOMPurify over jsdom would enforce far less).
+     */
+    sanitizeHtml?: (html: string) => string;
+    /** `href` of the footer's unsubscribe link. Defaults to `{{unsubscribe_url}}`. */
+    unsubscribeUrl?: string;
+}
+/**
+ * The email sanitation policy on a caller-supplied window, for environments
+ * without a global DOM: `createEmailHtmlSanitizer(new JSDOM('').window)`.
+ * Vanilla DOMPurify is NOT equivalent — it would keep class/id attributes,
+ * positioning styles and URL schemes this policy rejects.
+ */
+declare function createEmailHtmlSanitizer(win: Parameters<typeof DOMPurify>[0]): (html: string) => string;
+declare function renderEmailMjml(tree: EmailContentTree, options?: RenderEmailMjmlOptions): string;
+
+export { EMAIL_BLOCK_TYPES, type EmailAlignment, type EmailBlock, type EmailBlockType, type EmailButtonBlock, type EmailColumn, type EmailColumnsBlock, type EmailContentBlock, type EmailContentTree, type EmailDesignSettings, type EmailDividerBlock, EmailEditor, type EmailEditorLabelOverrides, type EmailEditorLabels, type EmailEditorProps, type EmailFooterBlock, type EmailHeadingBlock, type EmailHeroBlock, type EmailHtmlBlock, type EmailImageBlock, type EmailMergeTag, type EmailQuoteBlock, type EmailSocialBlock, type EmailSocialLink, type EmailSocialPlatform, type EmailSpacerBlock, type EmailTableBlock, type EmailTextBlock, type RenderEmailMjmlOptions, createDefaultDesignSettings, createEmailBlock, createEmailHtmlSanitizer, createEmptyEmailContentTree, defaultEmailEditorLabels, generateEmailBlockId, renderEmailMjml };