@nascentdigital/funnel-ui 4.4.18

package/dist/styles/fields/Visual.css

@@ -0,0 +1,27 @@
+@layer components {
+
+    :root {
+        --nd-visual-width: unset;
+        --nd-visual-height: unset;
+        --nd-visual-anchor: center;
+    }
+    .nd-Visual-image {
+        @apply object-cover;
+        object-position: var(--nd-visual-anchor);
+
+        img {
+            @apply object-cover;
+            object-position: var(--nd-visual-anchor);
+        }
+    }
+    .nd-Visual-video {
+        @apply object-cover;
+        aspect-ratio: var(--nd-visual-width) / var(--nd-visual-height);
+        object-position: var(--nd-visual-anchor);
+
+        video {
+            @apply object-cover;
+            object-position: var(--nd-visual-anchor);
+        }
+    }
+}

package/dist/styles/fields/_index.css

@@ -0,0 +1,11 @@
+@import "./Caption.css";
+@import "./Description.css";
+@import "./FreeFormContent.css";
+@import "./Headline.css";
+@import "./Icon.css";
+@import "./LazyVideo.css";
+@import "./Link.css";
+@import "./Quote.css";
+@import "./RichText.css";
+@import "./Title.css";
+@import "./Visual.css";

package/dist/styles/index.css

@@ -0,0 +1,9 @@
+@import "./base/_index.css";
+@import "./app/_index.css";
+@import "./blocks/_index.css";
+@import "./components/_index.css";
+@import "./fields/_index.css";
+@import "./entities/_index.css";
+@import "./layouts/_index.css";
+@import "./panels/_index.css";
+@import "./utilities/_index.css";

package/dist/styles/layouts/MasonryLayout.css

@@ -0,0 +1,24 @@
+@layer components {
+
+    /* variables */
+    :root {
+        --nd-masonry-gap-x: theme('spacing.l8');
+        --nd-masonry-gap-y: theme('spacing.l8');
+        @media screen(md) {
+            --nd-masonry-gap-x: theme('spacing.l8');
+            --nd-masonry-gap-y-gap-x: theme('spacing.l8');
+        }
+        @media screen(lg) {
+            --nd-masonry-gap-x: theme('spacing.l10');
+            --nd-masonry-gap-y: theme('spacing.l10');
+        }
+    }
+
+    /* base */
+    .nd-MasonryLayout {
+        @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-[var(--nd-masonry-gap-x)];
+    }
+    .nd-MasonryLayout-column {
+        @apply flex flex-col gap-[var(--nd-masonry-gap-y)];
+    }
+}

package/dist/styles/layouts/_index.css

@@ -0,0 +1 @@
+@import "./MasonryLayout.css";

package/dist/styles/panels/MessagePanel.css

@@ -0,0 +1,56 @@
+@layer components {
+
+    /* variables */
+    :root {
+        --nd-message-panel-gap: unset;
+        --nd-message-panel-title-mb: theme('spacing.l4');
+        --nd-message-panel-headline-mt: unset;
+        --nd-message-panel-headline-mb: theme('spacing.l8');
+        --nd-message-panel-caption-mt: unset;
+        --nd-message-panel-caption-mb: theme('spacing.l8');
+        --nd-message-panel-ctas-mt: unset;
+        --nd-message-panel-ctas-gap: theme('spacing.l8');
+        --nd-message-flexAlign: flex-start;
+        --nd-message-textAlign: left;
+    }
+
+    /* base */
+    .nd-MessagePanel {
+
+    }
+    .nd-MessagePanel-content {
+        @apply flex flex-col gap-[var(--nd-message-panel-gap)];
+        align-items: var(--nd-message-flexAlign);
+    }
+    .nd-MessagePanel-title {
+        @apply not-last:mb-[var(--nd-message-panel-title-mb)];
+        text-align: var(--nd-message-textAlign);
+    }
+    .nd-MessagePanel-headline {
+        @apply not-first:mb-[var(--nd-message-panel-headline-mt)] not-last:mb-[var(--nd-message-panel-headline-mb)];
+        text-align: var(--nd-message-textAlign);
+    }
+    .nd-MessagePanel-caption {
+        @apply not-first:mb-[var(--nd-message-panel-caption-mt)] not-last:mb-[var(--nd-message-panel-caption-mb)];
+        text-align: var(--nd-message-textAlign);
+    }
+    .nd-MessagePanel-ctas {
+        @apply flex justify-center flex-wrap gap-[var(--nd-message-panel-ctas-gap)];
+        @apply not-first:mt-[var(--nd-message-panel-ctas-mt)];
+        justify-content: var(--nd-message-textAlign);
+    }
+
+    /* text alignment */
+    .nd-MessagePanel-textStart {
+        --nd-message-flexAlign: flex-start;
+        --nd-message-textAlign: start;
+    }
+    .nd-MessagePanel-textCenter {
+        --nd-message-flexAlign: flex-center;
+        --nd-message-textAlign: center;
+    }
+    .nd-MessagePanel-textEnd {
+        --nd-message-flexAlign: flex-end;
+        --nd-message-textAlign: end;
+    }
+}

package/dist/styles/panels/VisualPanel.css

@@ -0,0 +1,58 @@
+@layer components {
+
+    /* variables */
+    :root {
+    }
+
+    /* base */
+    .nd-VisualPanel {
+
+        &:not(.nd-VisualPanel-aspect-auto) {
+
+            > .nd-VisualPanel-content {
+                @apply w-full h-full;
+            }
+
+            img, video {
+                @apply w-full h-full object-cover;
+            }
+        }
+    }
+
+    /* aspect ratios */
+    .nd-VisualPanel-aspect-auto {
+        @apply aspect-auto;
+    }
+    .nd-VisualPanel-aspect-square {
+        @apply aspect-square;
+    }
+    .nd-VisualPanel-aspect-phone {
+        @apply aspect-phone;
+    }
+    .nd-VisualPanel-aspect-tv {
+        @apply aspect-tv;
+    }
+    .nd-VisualPanel-aspect-widescreen {
+        @apply aspect-widescreen;
+    }
+    .nd-VisualPanel-aspect-cinema {
+        @apply aspect-cinema;
+    }
+
+    /* anchor */
+    .nd-VisualPanel-anchor-center {
+        --nd-visual-anchor: center;
+    }
+    .nd-VisualPanel-anchor-top {
+        --nd-visual-anchor: top;
+    }
+    .nd-VisualPanel-anchor-bottom {
+        --nd-visual-anchor: bottom;
+    }
+    .nd-VisualPanel-anchor-left {
+        --nd-visual-anchor: left;
+    }
+    .nd-VisualPanel-anchor-right {
+        --nd-visual-anchor: right;
+    }
+}

package/dist/styles/panels/_index.css

@@ -0,0 +1,2 @@
+@import "./MessagePanel.css";
+@import "./VisualPanel.css";

package/dist/styles/utilities/_index.css

@@ -0,0 +1,7 @@
+@import "./ellipsis.css";
+@import "./fade.css";
+@import "./glass.css";
+@import "./interpolate.css";
+@import "./masks.css";
+@import "./stacked.css";
+@import "./text-gradient.css";

package/dist/styles/utilities/ellipsis.css

@@ -0,0 +1,7 @@
+@layer utilities {
+
+    .ellipsis {
+        /* whitespace-nowrap for iOS 17 (no support for text-nowrap) */
+        @apply min-w-0 text-ellipsis text-nowrap overflow-hidden whitespace-nowrap;
+    }
+}

package/dist/styles/utilities/fade.css

@@ -0,0 +1,16 @@
+@layer utilities {
+
+    .fade {
+        @apply visible opacity-full;
+        transition: visibility 0s, opacity 0.4s ease-in;
+    }
+    .fade-out {
+        @apply invisible opacity-none;
+        transition: visibility 0.15s, opacity 0.15s ease-in;
+    }
+    .fade-out-blur {
+        @apply blur-sm;
+        transition: filter 0.15s ease-in;
+        will-change: filter;
+    }
+}

package/dist/styles/utilities/glass.css

@@ -0,0 +1,8 @@
+@layer utilities {
+
+    .glass {
+        @apply blur;
+        transition: filter 0.15s ease-in;
+        will-change: filter;
+    }
+}

package/dist/styles/utilities/interpolate.css

@@ -0,0 +1,22 @@
+@layer components {
+
+    .interpolate {
+        @apply transition duration-300 ease-in-out;
+    }
+    .interpolate-fast {
+        @apply transition duration-200 ease-out;
+    }
+    .interpolate-slow {
+        @apply transition duration-600 ease-in-out;
+    }
+
+    .interpolate-all {
+        @apply transition-all duration-300 ease-in-out;
+    }
+    .interpolate-all-fast {
+        @apply transition-all duration-200 ease-out;
+    }
+    .interpolate-all-slow {
+        @apply transition-all duration-600 ease-in-out;
+    }
+}

package/dist/styles/utilities/masks.css

@@ -0,0 +1,18 @@
+@layer utilities {
+
+    ._mask {
+        mask-composite: exclude;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+    }
+
+    .mask-box {
+        @apply _mask;
+        mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%20rx%3D%2240%22%20ry%3D%2240%22%20%2F%3E%0A%3C%2Fsvg%3E);
+        mask-size: 110% 110%;
+
+        &.mask-box-on {
+            mask-size: 90% 90%;
+        }
+    }
+}

package/dist/styles/utilities/stacked.css

@@ -0,0 +1,24 @@
+@layer utilities {
+
+    .stacked {
+        @apply grid grid-cols-1 grid-rows-[max-content];
+
+        > * {
+            grid-area: 1 / 1 / 1 / 1;
+        }
+    }
+    .stacked-stretch {
+        @apply grid grid-cols-[1fr] grid-rows-[1fr];
+
+        > * {
+            grid-area: 1 / 1 / 1 / 1;
+        }
+    }
+    .inline-stacked {
+        @apply inline-grid grid-cols-1 grid-rows-[max-content];
+
+        > * {
+            grid-area: 1 / 1 / 1 / 1;
+        }
+    }
+}

package/dist/styles/utilities/text-gradient.css

@@ -0,0 +1,37 @@
+@layer utilities {
+
+    @property --text-gradient-angle {
+        syntax: '<angle>';
+        inherits: false;
+        initial-value: 90deg;
+    }
+    @property --text-gradient-from {
+        syntax: '<color> + <length-percentage>';
+        inherits: false;
+        initial-value: #000;
+    }
+    @property --text-gradient-to {
+        syntax: '<color> + <length-percentage>';
+        inherits: false;
+        initial-value: #000;
+    }
+
+    .text-gradient {
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-image: linear-gradient(var(--text-gradient-angle), var(--text-gradient-from), var(--text-gradient-to))
+    }
+    .text-gradient-interpolate {
+        transition: --text-gradient-from 0.6s ease-in-out,--text-gradient-to 0.6s ease-in-out,--text-gradient-angle 0.3s ease-out;
+    }
+
+    .text-gradient-x {
+        @apply text-gradient;
+        --text-gradient-angle: 0.25turn;
+    }
+    .text-gradient-y {
+        @apply text-gradient;
+        --text-gradient-angle: 0.5turn;
+    }
+}

package/dist/types/HTMLBlockElement.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { HTMLElements } from './HTMLElements';
+export type HTMLBlockElement<T extends keyof HTMLElements.Standard> = Omit<HTMLAttributes<HTMLElements[T]>, 'children'>;
+export declare namespace HTMLBlockElement {
+    type WithChildren<T extends keyof HTMLElements.Standard> = HTMLAttributes<HTMLElements[T]>;
+}

package/dist/types/HTMLBlockElement.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/HTMLElements.d.ts

@@ -0,0 +1,129 @@
+export interface HTMLElements {
+    a: HTMLAnchorElement;
+    abbr: HTMLElement;
+    address: HTMLElement;
+    area: HTMLAreaElement;
+    article: HTMLElement;
+    aside: HTMLElement;
+    b: HTMLElement;
+    base: HTMLBaseElement;
+    bdi: HTMLElement;
+    bdo: HTMLElement;
+    big: HTMLElement;
+    blockquote: HTMLQuoteElement;
+    body: HTMLBodyElement;
+    br: HTMLBRElement;
+    button: HTMLButtonElement;
+    canvas: HTMLCanvasElement;
+    caption: HTMLElement;
+    center: HTMLElement;
+    cite: HTMLElement;
+    code: HTMLElement;
+    col: HTMLTableColElement;
+    colgroup: HTMLTableColElement;
+    data: HTMLDataElement;
+    datalist: HTMLDataListElement;
+    dd: HTMLElement;
+    del: HTMLModElement;
+    details: HTMLDetailsElement;
+    dfn: HTMLElement;
+    dialog: HTMLDialogElement;
+    div: HTMLDivElement;
+    dl: HTMLDListElement;
+    dt: HTMLElement;
+    em: HTMLElement;
+    embed: HTMLEmbedElement;
+    fieldset: HTMLFieldSetElement;
+    figcaption: HTMLElement;
+    figure: HTMLElement;
+    footer: HTMLElement;
+    form: HTMLFormElement;
+    h1: HTMLHeadingElement;
+    h2: HTMLHeadingElement;
+    h3: HTMLHeadingElement;
+    h4: HTMLHeadingElement;
+    h5: HTMLHeadingElement;
+    h6: HTMLHeadingElement;
+    head: HTMLHeadElement;
+    header: HTMLElement;
+    hgroup: HTMLElement;
+    hr: HTMLHRElement;
+    html: HTMLHtmlElement;
+    i: HTMLElement;
+    iframe: HTMLIFrameElement;
+    img: HTMLImageElement;
+    input: HTMLInputElement;
+    ins: HTMLModElement;
+    kbd: HTMLElement;
+    keygen: HTMLElement;
+    label: HTMLLabelElement;
+    legend: HTMLLegendElement;
+    li: HTMLLIElement;
+    link: HTMLLinkElement;
+    main: HTMLElement;
+    map: HTMLMapElement;
+    mark: HTMLElement;
+    menu: HTMLElement;
+    menuitem: HTMLElement;
+    meta: HTMLMetaElement;
+    meter: HTMLMeterElement;
+    nav: HTMLElement;
+    noindex: HTMLElement;
+    noscript: HTMLElement;
+    object: HTMLObjectElement;
+    ol: HTMLOListElement;
+    optgroup: HTMLOptGroupElement;
+    option: HTMLOptionElement;
+    output: HTMLOutputElement;
+    p: HTMLParagraphElement;
+    param: HTMLParamElement;
+    picture: HTMLElement;
+    pre: HTMLPreElement;
+    progress: HTMLProgressElement;
+    q: HTMLQuoteElement;
+    rp: HTMLElement;
+    rt: HTMLElement;
+    ruby: HTMLElement;
+    s: HTMLElement;
+    samp: HTMLElement;
+    search: HTMLElement;
+    slot: HTMLSlotElement;
+    script: HTMLScriptElement;
+    section: HTMLElement;
+    select: HTMLSelectElement;
+    small: HTMLElement;
+    source: HTMLSourceElement;
+    span: HTMLSpanElement;
+    strong: HTMLElement;
+    style: HTMLStyleElement;
+    sub: HTMLElement;
+    summary: HTMLElement;
+    sup: HTMLElement;
+    table: HTMLTableElement;
+    template: HTMLTemplateElement;
+    tbody: HTMLTableSectionElement;
+    td: HTMLTableDataCellElement;
+    textarea: HTMLTextAreaElement;
+    tfoot: HTMLTableSectionElement;
+    th: HTMLTableHeaderCellElement;
+    thead: HTMLTableSectionElement;
+    time: HTMLTimeElement;
+    title: HTMLTitleElement;
+    tr: HTMLTableRowElement;
+    track: HTMLTrackElement;
+    u: HTMLElement;
+    ul: HTMLUListElement;
+    var: HTMLElement;
+    video: HTMLVideoElement;
+    wbr: HTMLElement;
+    webview: HTMLWebViewElement;
+}
+export declare namespace HTMLElements {
+    type Standard = Pick<HTMLElements, 'a' | 'abbr' | 'address' | 'article' | 'aside' | 'b' | 'big' | 'blockquote' | 'button' | 'caption' | 'center' | 'cite' | 'code' | 'col' | 'colgroup' | 'dd' | 'dfn' | 'div' | 'em' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'hgroup' | 'hr' | 'i' | 'img' | 'input' | 'kbd' | 'keygen' | 'label' | 'legend' | 'li' | 'main' | 'mark' | 'menu' | 'menuitem' | 'nav' | 'ol' | 'option' | 'p' | 'picture' | 'pre' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'search' | 'section' | 'select' | 'small' | 'span' | 'strong' | 'sub' | 'summary' | 'sup' | 'table' | 'tbody' | 'td' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'tr' | 'u' | 'ul' | 'var' | 'wbr'>;
+    namespace Standard {
+        type Tag = keyof Standard;
+        type Container = Extract<Tag, 'div' | 'main' | 'header' | 'footer' | 'nav' | 'section' | 'aside' | 'article' | 'ul' | 'ol' | 'li'>;
+        type TextContainer = Container | Extract<Tag, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'caption' | 'blockquote'>;
+        type Text = Container | Extract<Tag, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'caption' | 'blockquote'>;
+    }
+}

package/dist/types/HTMLElements.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HTMLBlockElement';
+export * from './HTMLElements';

package/dist/types/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HTMLBlockElement"), exports);
+__exportStar(require("./HTMLElements"), exports);

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@nascentdigital/funnel-ui",
+  "description": "UI components for funnel",
+  "version": "4.4.18",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "restricted"
+  },
+  "repository": {
+    "url": "git+https://github.com/nascentdigital/funnel.git",
+    "directory": "libs/ui"
+  },
+  "main": "dist/server/index.js",
+  "types": "dist/server/index.d.ts",
+  "exports": {
+    ".": "./dist/server/index.js",
+    "./hooks": "./dist/client/hooks/index.js",
+    "./client": "./dist/client/index.js",
+    "./types": "./dist/types/index.js",
+    "./Tailwind": "./dist/Tailwind.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "scripts": {
+    "build": "npm-run-all -s build:*",
+    "build:compile": "tsc -P tsconfig.json",
+    "build:copy": "copyfiles -u 1 ./src/styles/index.css \"./src/styles/**/*.css\" \"./src/brands/**/*.*\" dist",
+    "clean": "rimraf -I dist",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "@lexical/extension": "0.37.0",
+    "@lexical/link": "0.37.0",
+    "@lexical/list": "0.37.0",
+    "@lexical/react": "0.37.0",
+    "@lexical/rich-text": "0.37.0",
+    "@lexical/selection": "0.37.0",
+    "@nascentdigital/funnel-core": "*",
+    "lexical": "0.37.0",
+    "next": "^15",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1",
+    "@react-hook/resize-observer": "^2",
+    "@tailwindcss/aspect-ratio": "^0",
+    "@vimeo/player": "^2.30.1",
+    "classnames": "^2",
+    "color": "^5.0.0",
+    "d3-ease": "^3",
+    "imask": "^7",
+    "markdown-to-jsx": "^7",
+    "motion": "^12",
+    "react-fast-marquee": "^1",
+    "react-hotkeys-hook": "^5",
+    "rxjs": "^7"
+  },
+  "devDependencies": {
+    "@types/d3-ease": "^3",
+    "@types/jest": "^29.5.14",
+    "jest": "^29.7.0",
+    "next": "^15",
+    "react": "^19",
+    "react-dom": "^19",
+    "ts-jest": "^29.3.2"
+  },
+  "gitHead": "d1bfd4468426b7326bd9662cd169242867025f5e"
+}