@novu/js 3.5.0-rc.2 → 3.5.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{chunk-OGEM74YA.js → chunk-MKUNHEMT.js} +93 -18
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.js +8 -8
- package/dist/{esm/novu-q3jzGeyW.d.mts → cjs/novu-Bocb1dH9.d.ts} +24 -13
- package/dist/cjs/themes/index.d.ts +2 -2
- package/dist/cjs/{types-DdImrpw7.d.ts → types-DeMFGM4g.d.ts} +2 -2
- package/dist/cjs/ui/index.d.ts +4 -4
- package/dist/cjs/ui/index.js +1475 -1201
- package/dist/esm/{chunk-GPGRFVOZ.mjs → chunk-T4OFEC3E.mjs} +93 -19
- package/dist/esm/index.d.mts +2 -2
- package/dist/esm/index.mjs +1 -1
- package/dist/{cjs/novu-q3jzGeyW.d.ts → esm/novu-Bocb1dH9.d.mts} +24 -13
- package/dist/esm/themes/index.d.mts +2 -2
- package/dist/esm/{types-CTQLJWIf.d.mts → types-CObwRGDC.d.mts} +2 -2
- package/dist/esm/ui/index.d.mts +4 -4
- package/dist/esm/ui/index.mjs +1476 -1202
- package/dist/index.css +1 -1
- package/dist/novu.min.js +10 -10
- package/dist/novu.min.js.gz +0 -0
- package/package.json +3 -2
package/dist/esm/ui/index.mjs
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { Novu, isSameFilter } from '../chunk-
|
|
1
|
+
import { Novu, DEFAULT_API_VERSION, isSameFilter } from '../chunk-T4OFEC3E.mjs';
|
|
2
2
|
import { parseMarkdownIntoTokens } from '../chunk-GPV65U5R.mjs';
|
|
3
3
|
import { __privateAdd, __privateMethod, __privateSet, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
|
|
4
|
-
import {
|
|
4
|
+
import { createComponent, mergeProps, delegateEvents, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
|
|
5
5
|
import { createSignal, createContext, useContext, onMount, onCleanup, For, createMemo, createEffect, splitProps, Show, Switch as Switch$1, Match, createResource, Index, batch } from 'solid-js';
|
|
6
6
|
import { createStore } from 'solid-js/store';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import { extendTailwindMerge } from 'tailwind-merge';
|
|
9
|
-
import { cva } from 'class-variance-authority';
|
|
10
9
|
import { autoUpdate, offset, flip, shift } from '@floating-ui/dom';
|
|
11
10
|
import { useFloating } from 'solid-floating-ui';
|
|
12
11
|
import { Motion as Motion$1 } from 'solid-motionone';
|
|
12
|
+
import { cva } from 'class-variance-authority';
|
|
13
13
|
|
|
14
|
-
//
|
|
15
|
-
var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.nt-mx-auto{margin-left:auto;margin-right:auto}.nt-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-2{margin-left:.5rem}.nt-ml-auto{margin-left:auto}.nt-mr-2{margin-right:.5rem}.nt-mr-auto{margin-right:auto}.nt-mt-1{margin-top:.25rem}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-grid{display:grid}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-3\\.5{height:.875rem;width:.875rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-fit{height:fit-content;width:fit-content}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-translate-x-1\\/2{--tw-translate-x:50%}.nt-transform,.nt-translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-not-allowed{cursor:not-allowed}.nt-cursor-pointer{cursor:pointer}.nt-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.nt-flex-row{flex-direction:row}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-end{justify-content:flex-end}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-1\\.5{gap:.375rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-sm{border-radius:var(--nv-radius-sm)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-200{border-color:var(--nv-color-neutral-alpha-200)}.nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pr-0{padding-right:0}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.nt-text-\\[0\\.8rem\\]{font-size:.8rem}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xl{font-size:var(--nv-font-size-xl);line-height:var(--nv-line-height-xl)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-normal{font-weight:400}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.nt-opacity-50{opacity:.5}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\]{--tw-shadow:0px 1px 2px 0px #0a0d1408;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.nt-shadow-lg,.nt-shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-popover,.nt-shadow-tooltip{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-4 .nv-notificationList{padding-bottom:1rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-4 .nv-preferencesContainer{padding-bottom:1rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-8 .nv-preferencesContainer{padding-bottom:2rem}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
|
|
14
|
+
// _gl34gdy6p:/Users/dimagrossman/projects/novu/packages/js/src/ui/index.directcss
|
|
15
|
+
var ui_default = `.novu{scrollbar-color:var(--nv-color-secondary-foreground-alpha-300) #0000;:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{border:0 solid #e5e7eb;box-sizing:border-box}:where(html,:host){line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;tab-size:4;-webkit-tap-highlight-color:transparent}:where(body){line-height:inherit;margin:0}:where(hr){border-top-width:1px;color:inherit;height:0}:where(abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}:where(a){color:inherit;text-decoration:inherit}:where(b,strong){font-weight:bolder}:where(code,kbd,samp,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}:where(small){font-size:80%}:where(sub,sup){font-size:75%;line-height:0;position:relative;vertical-align:initial}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,optgroup,select,textarea){color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}:where(button,select){text-transform:none}:where(button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])){-webkit-appearance:button;background-color:initial;background-image:none}:where(:-moz-focusring){outline:auto}:where(:-moz-ui-invalid){box-shadow:none}:where(progress){vertical-align:initial}:where(*)::-webkit-inner-spin-button,:where(*)::-webkit-outer-spin-button{height:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(*)::-webkit-search-decoration{-webkit-appearance:none}:where(*)::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre){margin:0}:where(fieldset){margin:0;padding:0}:where(legend){padding:0}:where(ol,ul,menu){list-style:none;margin:0;padding:0}:where(dialog){padding:0}:where(textarea){resize:vertical}:where(input)::placeholder,:where(textarea)::placeholder{color:#9ca3af;opacity:1}:where(button,[role=button]){cursor:pointer}:where(:disabled){cursor:default}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,video){height:auto;max-width:100%}:where([hidden]){display:none}:where(*),:where(*) :after,:where(*) :before,:where(*):after,:where(*):before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:where(*) ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-thumb{background-clip:"padding-box";background-color:var(--nv-color-secondary-foreground-alpha-300);border-radius:.25rem}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:initial}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}}.nt-sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.\\!nt-pointer-events-auto{pointer-events:auto!important}.nt-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-left-0\\.5{left:.125rem}.nt-right-0{right:0}.nt-right-3{right:.75rem}.nt-top-0{top:0}.nt-top-0\\.5{top:.125rem}.nt-top-3{top:.75rem}.nt-z-10{z-index:10}.nt-z-\\[-1\\]{z-index:-1}.nt-mx-auto{margin-left:auto;margin-right:auto}.nt--mt-\\[50px\\]{margin-top:-50px}.nt-mb-1{margin-bottom:.25rem}.nt-mb-2{margin-bottom:.5rem}.nt-mb-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-1{margin-left:.25rem}.nt-ml-2{margin-left:.5rem}.nt-ml-auto{margin-left:auto}.nt-mr-2{margin-right:.5rem}.nt-mr-auto{margin-right:auto}.nt-mt-1{margin-top:.25rem}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-grid{display:grid}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1\\.5{height:.375rem;width:.375rem}.nt-size-2{height:.5rem;width:.5rem}.nt-size-2\\.5{height:.625rem;width:.625rem}.nt-size-3{height:.75rem;width:.75rem}.nt-size-3\\.5{height:.875rem;width:.875rem}.nt-size-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-fit{height:fit-content;width:fit-content}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-5{height:1.25rem}.nt-h-7{height:1.75rem}.nt-h-8{height:2rem}.nt-h-9{height:2.25rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:fit-content}.nt-h-full{height:100%}.nt-min-h-0{min-height:0}.nt-w-1\\/3{width:33.333333%}.nt-w-2\\/3{width:66.666667%}.nt-w-5{width:1.25rem}.nt-w-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[260px\\]{width:260px}.nt-w-\\[400px\\]{width:400px}.nt-w-\\[60px\\]{width:60px}.nt-w-\\[calc\\(2ch\\+2rem\\)\\]{width:calc(2ch + 2rem)}.nt-w-fit{width:fit-content}.nt-w-full{width:100%}.nt-w-max{width:max-content}.nt-min-w-52{min-width:13rem}.nt-flex-1{flex:1 1 0%}.nt-shrink-0{flex-shrink:0}.nt-translate-x-1\\/2{--tw-translate-x:50%}.nt-transform,.nt-translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.nt-cursor-default{cursor:default}.nt-cursor-not-allowed{cursor:not-allowed}.nt-cursor-pointer{cursor:pointer}.nt-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.nt-flex-row{flex-direction:row}.nt-flex-col{flex-direction:column}.nt-flex-wrap{flex-wrap:wrap}.nt-flex-nowrap{flex-wrap:nowrap}.nt-items-start{align-items:flex-start}.nt-items-center{align-items:center}.nt-justify-end{justify-content:flex-end}.nt-justify-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.nt-gap-1\\.5{gap:.375rem}.nt-gap-2{gap:.5rem}.nt-gap-3{gap:.75rem}.nt-gap-4{gap:1rem}.nt-gap-6{gap:1.5rem}.nt-gap-8{gap:2rem}.nt-self-stretch{align-self:stretch}.nt-overflow-auto{overflow:auto}.nt-overflow-hidden{overflow:hidden}.nt-overflow-y-auto{overflow-y:auto}.nt-truncate{overflow:hidden;text-overflow:ellipsis}.nt-truncate,.nt-whitespace-nowrap{white-space:nowrap}.nt-whitespace-pre-wrap{white-space:pre-wrap}.nt-rounded{border-radius:var(--nv-radius-base)}.nt-rounded-full{border-radius:var(--nv-radius-full)}.nt-rounded-lg{border-radius:var(--nv-radius-lg)}.nt-rounded-md{border-radius:var(--nv-radius-md)}.nt-rounded-sm{border-radius:var(--nv-radius-sm)}.nt-rounded-xl{border-radius:var(--nv-radius-xl)}.nt-border{border-width:1px}.nt-border-b{border-bottom-width:1px}.nt-border-t{border-top-width:1px}.nt-border-background{border-color:var(--nv-color-background)}.nt-border-border{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.nt-border-neutral-alpha-200{border-color:var(--nv-color-neutral-alpha-200)}.nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-border-neutral-alpha-50{border-color:var(--nv-color-neutral-alpha-50)}.nt-border-t-neutral-alpha-200{border-top-color:var(--nv-color-neutral-alpha-200)}.nt-bg-\\[oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.1\\)\\]{background-color:oklch(from var(--nv-color-stripes) l c h/.1)}.nt-bg-background{background-color:var(--nv-color-background)}.nt-bg-counter{background-color:var(--nv-color-counter)}.nt-bg-foreground{background-color:var(--nv-color-foreground)}.nt-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.nt-bg-neutral-alpha-100{background-color:var(--nv-color-neutral-alpha-100)}.nt-bg-neutral-alpha-25{background-color:var(--nv-color-neutral-alpha-25)}.nt-bg-neutral-alpha-300{background-color:var(--nv-color-neutral-alpha-300)}.nt-bg-neutral-alpha-50{background-color:var(--nv-color-neutral-alpha-50)}.nt-bg-primary{background-color:var(--nv-color-primary)}.nt-bg-primary-alpha-300{background-color:var(--nv-color-primary-alpha-300)}.nt-bg-primary-alpha-400{background-color:var(--nv-color-primary-alpha-400)}.nt-bg-secondary{background-color:var(--nv-color-secondary)}.nt-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nt-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.nt-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.nt-from-foreground-alpha-50{--tw-gradient-from:var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-primary-foreground-alpha-200{--tw-gradient-from:var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.nt-from-20\\%{--tw-gradient-from-position:20%}.nt-to-background{--tw-gradient-to:var(--nv-color-background) var(--tw-gradient-to-position)}.nt-to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.nt-object-cover{object-fit:cover}.nt-p-0{padding:0}.nt-p-0\\.5{padding:.125rem}.nt-p-1{padding:.25rem}.nt-p-2{padding:.5rem}.nt-p-2\\.5{padding:.625rem}.nt-p-3{padding:.75rem}.nt-p-4{padding:1rem}.nt-px-1{padding-left:.25rem;padding-right:.25rem}.nt-px-2{padding-left:.5rem;padding-right:.5rem}.nt-px-3{padding-left:.75rem;padding-right:.75rem}.nt-px-4{padding-left:1rem;padding-right:1rem}.nt-px-8{padding-left:2rem;padding-right:2rem}.nt-px-\\[6px\\]{padding-left:6px;padding-right:6px}.nt-py-1{padding-bottom:.25rem;padding-top:.25rem}.nt-py-2{padding-bottom:.5rem;padding-top:.5rem}.nt-py-3{padding-bottom:.75rem;padding-top:.75rem}.nt-py-3\\.5{padding-bottom:.875rem;padding-top:.875rem}.nt-py-4{padding-bottom:1rem;padding-top:1rem}.nt-py-px{padding-bottom:1px;padding-top:1px}.nt-pb-2{padding-bottom:.5rem}.nt-pb-\\[0\\.625rem\\]{padding-bottom:.625rem}.nt-pr-0{padding-right:0}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.nt-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.nt-text-\\[0\\.8rem\\]{font-size:.8rem}.nt-text-\\[12px\\]{font-size:12px}.nt-text-base{font-size:var(--nv-font-size-base);line-height:var(--nv-line-height-base)}.nt-text-sm{font-size:var(--nv-font-size-sm);line-height:var(--nv-line-height-sm)}.nt-text-xl{font-size:var(--nv-font-size-xl);line-height:var(--nv-line-height-xl)}.nt-text-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.nt-font-normal{font-weight:400}.nt-font-semibold{font-weight:600}.nt-leading-none{line-height:1}.nt-text-\\[\\#000000\\]{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.nt-text-background{color:var(--nv-color-background)}.nt-text-counter-foreground{color:var(--nv-color-counter-foreground)}.nt-text-foreground{color:var(--nv-color-foreground)}.nt-text-foreground-alpha-300{color:var(--nv-color-foreground-alpha-300)}.nt-text-foreground-alpha-400{color:var(--nv-color-foreground-alpha-400)}.nt-text-foreground-alpha-600{color:var(--nv-color-foreground-alpha-600)}.nt-text-foreground-alpha-700{color:var(--nv-color-foreground-alpha-700)}.nt-text-primary-foreground{color:var(--nv-color-primary-foreground)}.nt-text-secondary-foreground{color:var(--nv-color-secondary-foreground)}.nt-text-stripes{color:var(--nv-color-stripes)}.nt-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.nt-underline{text-decoration-line:underline}.nt-opacity-0{opacity:0}.nt-opacity-20{opacity:.2}.nt-opacity-50{opacity:.5}.nt-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-primary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-primary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\]{--tw-shadow:0 0 0 0.5px var(--nv-color-secondary-600);--tw-shadow-colored:0 0 0 0.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\]{--tw-shadow:0px 1px 2px 0px #0a0d1408;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.nt-shadow-\\[0px_1px_2px_0px_rgba\\(10\\,13\\,20\\,0\\.03\\)\\],.nt-shadow-dropdown{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-dropdown{--tw-shadow:0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08),0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);--tw-shadow-colored:0px 12px 16px -4px var(--tw-shadow-color),0px 4px 6px -2px var(--tw-shadow-color)}.nt-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.nt-shadow-lg,.nt-shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.nt-shadow-popover{--tw-shadow:0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08),0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);--tw-shadow-colored:0px 8px 26px 0px var(--tw-shadow-color),0px 2px 6px 0px var(--tw-shadow-color)}.nt-shadow-popover,.nt-shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.nt-shadow-tooltip{--tw-shadow:0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);--tw-shadow-colored:0 5px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-outline-none{outline:2px solid #0000;outline-offset:2px}.nt-backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.nt-transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nt-duration-100{transition-duration:.1s}.nt-duration-200{transition-duration:.2s}.nt-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.nt-animate-in{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.nt-fade-in{--tw-enter-opacity:0}.nt-slide-in-from-top-2{--tw-enter-translate-y:-0.5rem}.nt-duration-100{animation-duration:.1s}.nt-duration-200{animation-duration:.2s}.nt-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.\\[interpolate-size\\:allow-keywords\\]{interpolate-size:allow-keywords}.\\[scrollbar-gutter\\:stable\\]{scrollbar-gutter:stable}.\\[word-break\\:break-word\\]{word-break:break-word}.before\\:nt-absolute:before{content:var(--tw-content);position:absolute}.before\\:nt-inset-0:before{content:var(--tw-content);inset:0}.before\\:-nt-right-\\[calc\\(0\\+var\\(--stripes-size\\)\\)\\]:before{content:var(--tw-content);right:calc(var(--stripes-size)*-1)}@keyframes nt-stripes{0%{content:var(--tw-content);transform:translateX(0)}to{content:var(--tw-content);transform:translateX(calc(var(--stripes-size)*-1))}}.before\\:nt-animate-stripes:before{animation:nt-stripes 1s linear infinite paused;content:var(--tw-content)}.before\\:nt-rounded-lg:before{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.before\\:nt-rounded-md:before{border-radius:var(--nv-radius-md);content:var(--tw-content)}.before\\:nt-rounded-xl:before{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.before\\:nt-border:before{border-width:1px;content:var(--tw-content)}.before\\:nt-border-primary-foreground-alpha-100:before{border-color:var(--nv-color-primary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-border-secondary-foreground-alpha-100:before{border-color:var(--nv-color-secondary-foreground-alpha-100);content:var(--tw-content)}.before\\:nt-bg-dev-stripes-gradient:before{background-image:repeating-linear-gradient(135deg,oklch(from var(--nv-color-stripes) l c h/.1) 25%,oklch(from var(--nv-color-stripes) l c h/.1) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 50%,oklch(from var(--nv-color-stripes) l c h/.2) 75%);content:var(--tw-content)}.before\\:nt-bg-\\[length\\:var\\(--stripes-size\\)_var\\(--stripes-size\\)\\]:before{background-size:var(--stripes-size) var(--stripes-size);content:var(--tw-content)}.before\\:nt-content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.before\\:\\[mask-image\\:linear-gradient\\(transparent_0\\%\\2c black\\)\\]:before{content:var(--tw-content);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}.after\\:nt-absolute:after{content:var(--tw-content);position:absolute}.after\\:nt-inset-0:after{content:var(--tw-content);inset:0}.after\\:-nt-top-12:after{content:var(--tw-content);top:-3rem}.after\\:nt-bottom-0:after{bottom:0;content:var(--tw-content)}.after\\:nt-left-0:after{content:var(--tw-content);left:0}.after\\:nt-left-0\\.5:after{content:var(--tw-content);left:.125rem}.after\\:nt-top-0\\.5:after{content:var(--tw-content);top:.125rem}.after\\:nt-size-3:after{content:var(--tw-content);height:.75rem;width:.75rem}.after\\:nt-h-\\[2px\\]:after{content:var(--tw-content);height:2px}.after\\:nt-w-full:after{content:var(--tw-content);width:100%}.after\\:nt-translate-x-1\\/2:after{--tw-translate-x:50%}.after\\:nt-translate-x-1\\/2:after,.after\\:nt-translate-x-full:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\\:nt-translate-x-full:after{--tw-translate-x:100%}.after\\:nt-rounded-full:after{border-radius:var(--nv-radius-full);content:var(--tw-content)}.after\\:nt-rounded-lg:after{border-radius:var(--nv-radius-lg);content:var(--tw-content)}.after\\:nt-rounded-md:after{border-radius:var(--nv-radius-md);content:var(--tw-content)}.after\\:nt-rounded-xl:after{border-radius:var(--nv-radius-xl);content:var(--tw-content)}.after\\:nt-border-b-2:after{border-bottom-width:2px;content:var(--tw-content)}.after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-border-b-primary:after{border-bottom-color:var(--nv-color-primary);content:var(--tw-content)}.after\\:nt-border-b-transparent:after{border-bottom-color:#0000;content:var(--tw-content)}.after\\:nt-bg-background:after{background-color:var(--nv-color-background);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-\\[linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-stripes\\)_l_c_h_\\/_0\\.07\\)_55\\%\\2c transparent\\)\\2c linear-gradient\\(180deg\\2c transparent\\2c oklch\\(from_var\\(--nv-color-background\\)_l_c_h_\\/_0\\.9\\)_55\\%\\2c transparent\\)\\]:after{background-image:linear-gradient(180deg,#0000,oklch(from var(--nv-color-stripes) l c h/.07) 55%,#0000),linear-gradient(180deg,#0000,oklch(from var(--nv-color-background) l c h/.9) 55%,#0000);content:var(--tw-content)}.after\\:nt-bg-gradient-to-b:after{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));content:var(--tw-content)}.after\\:nt-from-primary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-from-secondary-foreground-alpha-50:after{content:var(--tw-content);--tw-gradient-from:var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.after\\:nt-to-transparent:after{content:var(--tw-content);--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.after\\:nt-opacity-0:after{content:var(--tw-content);opacity:0}.after\\:nt-transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-transition-opacity:after{content:var(--tw-content);transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\\:nt-duration-200:after{transition-duration:.2s}.after\\:nt-content-\\[\\"\\"\\]:after,.after\\:nt-content-\\[\\'\\'\\]:after{--tw-content:"";content:var(--tw-content)}.after\\:nt-duration-200:after{animation-duration:.2s;content:var(--tw-content)}.hover\\:nt-bg-neutral-alpha-100:hover{background-color:var(--nv-color-neutral-alpha-100)}.hover\\:nt-bg-neutral-alpha-50:hover{background-color:var(--nv-color-neutral-alpha-50)}.hover\\:nt-bg-primary-600:hover{background-color:var(--nv-color-primary-600)}.hover\\:nt-bg-primary-alpha-25:hover{background-color:var(--nv-color-primary-alpha-25)}.hover\\:nt-bg-primary-alpha-400:hover{background-color:var(--nv-color-primary-alpha-400)}.hover\\:nt-text-foreground-alpha-800:hover{color:var(--nv-color-foreground-alpha-800)}.before\\:hover\\:\\[animation-play-state\\:running\\]:hover:before{animation-play-state:running;content:var(--tw-content)}.hover\\:after\\:nt-opacity-100:hover:after{content:var(--tw-content);opacity:1}.focus\\:nt-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-rounded-lg:focus-visible{border-radius:var(--nv-radius-lg)}.focus-visible\\:nt-rounded-md:focus-visible{border-radius:var(--nv-radius-md)}.focus-visible\\:nt-rounded-xl:focus-visible{border-radius:var(--nv-radius-xl)}.focus-visible\\:nt-bg-neutral-alpha-50:focus-visible{background-color:var(--nv-color-neutral-alpha-50)}.focus-visible\\:nt-outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\\:nt-ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:nt-ring-primary:focus-visible{--tw-ring-color:var(--nv-color-primary)}.focus-visible\\:nt-ring-ring:focus-visible{--tw-ring-color:var(--nv-color-ring)}.focus-visible\\:nt-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:nt-pointer-events-none:disabled{pointer-events:none}.disabled\\:nt-opacity-20:disabled{opacity:.2}.disabled\\:nt-opacity-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true]{--tw-rotate:180deg}.data-\\[open\\=true\\]\\:nt-rotate-180[data-open=true],.data-\\[open\\=true\\]\\:nt-transform[data-open=true]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-400[data-disabled=true]{color:var(--nv-color-foreground-alpha-400)}.data-\\[disabled\\=true\\]\\:nt-text-foreground-alpha-600[data-disabled=true]{color:var(--nv-color-foreground-alpha-600)}.data-\\[state\\=active\\]\\:nt-text-foreground[data-state=active]{color:var(--nv-color-foreground)}.data-\\[state\\=active\\]\\:after\\:nt-border-b-2[data-state=active]:after{border-bottom-width:2px;content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-border-primary[data-state=active]:after{border-color:var(--nv-color-primary);content:var(--tw-content)}.data-\\[state\\=active\\]\\:after\\:nt-opacity-100[data-state=active]:after{content:var(--tw-content);opacity:1}.\\[\\&\\:not\\(\\:first-child\\)\\]\\:nt-border-t:not(:first-child){border-top-width:1px}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-4 .nv-notificationList{padding-bottom:1rem}.\\[\\&_\\.nv-notificationList\\]\\:nt-pb-8 .nv-notificationList{padding-bottom:2rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-4 .nv-preferencesContainer{padding-bottom:1rem}.\\[\\&_\\.nv-preferencesContainer\\]\\:nt-pb-8 .nv-preferencesContainer{padding-bottom:2rem}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
|
|
16
16
|
|
|
17
17
|
// src/ui/config/appearanceKeys.ts
|
|
18
18
|
var appearanceKeys = [
|
|
@@ -76,6 +76,7 @@ var appearanceKeys = [
|
|
|
76
76
|
// General
|
|
77
77
|
"root",
|
|
78
78
|
"bellIcon",
|
|
79
|
+
"lockIcon",
|
|
79
80
|
"bellContainer",
|
|
80
81
|
"bellDot",
|
|
81
82
|
"preferences__button",
|
|
@@ -693,14 +694,6 @@ var useStyle = () => {
|
|
|
693
694
|
);
|
|
694
695
|
return styleFuncMemo();
|
|
695
696
|
};
|
|
696
|
-
function useUncontrolledState(props) {
|
|
697
|
-
const [uncontrolledValue, setUncontrolledValue] = createSignal(!!props.fallbackValue);
|
|
698
|
-
if (props.value !== void 0) {
|
|
699
|
-
const accessor = () => !!props.value;
|
|
700
|
-
return [accessor, setUncontrolledValue];
|
|
701
|
-
}
|
|
702
|
-
return [uncontrolledValue, setUncontrolledValue];
|
|
703
|
-
}
|
|
704
697
|
|
|
705
698
|
// src/ui/context/AppearanceContext.tsx
|
|
706
699
|
var AppearanceContext = createContext(void 0);
|
|
@@ -967,6 +960,8 @@ var InboxProvider = (props) => {
|
|
|
967
960
|
const [maxSnoozeDurationHours, setMaxSnoozeDurationHours] = createSignal(0);
|
|
968
961
|
const isSnoozeEnabled = createMemo(() => maxSnoozeDurationHours() > 0);
|
|
969
962
|
const [preferencesFilter, setPreferencesFilter] = createSignal(props.preferencesFilter);
|
|
963
|
+
const [isKeyless, setIsKeyless] = createSignal(false);
|
|
964
|
+
const [applicationIdentifier, setApplicationIdentifier] = createSignal(null);
|
|
970
965
|
const [preferenceGroups, setPreferenceGroups] = createSignal(props.preferenceGroups);
|
|
971
966
|
const setNewStatus = (newStatus) => {
|
|
972
967
|
setStatus(newStatus);
|
|
@@ -1028,12 +1023,16 @@ var InboxProvider = (props) => {
|
|
|
1028
1023
|
eventHandler: ({
|
|
1029
1024
|
data
|
|
1030
1025
|
}) => {
|
|
1026
|
+
var _a2;
|
|
1031
1027
|
if (!data) {
|
|
1032
1028
|
return;
|
|
1033
1029
|
}
|
|
1030
|
+
const identifier = window.localStorage.getItem("novu_keyless_application_identifier");
|
|
1034
1031
|
setHideBranding(data.removeNovuBranding);
|
|
1035
1032
|
setIsDevelopmentMode(data.isDevelopmentMode);
|
|
1036
1033
|
setMaxSnoozeDurationHours(data.maxSnoozeDurationHours);
|
|
1034
|
+
setIsKeyless(!data.applicationIdentifier || !!(identifier == null ? void 0 : identifier.startsWith("pk_keyless_")));
|
|
1035
|
+
setApplicationIdentifier((_a2 = data.applicationIdentifier) != null ? _a2 : null);
|
|
1037
1036
|
}
|
|
1038
1037
|
});
|
|
1039
1038
|
return createComponent(InboxContext.Provider, {
|
|
@@ -1054,7 +1053,9 @@ var InboxProvider = (props) => {
|
|
|
1054
1053
|
preferenceGroups,
|
|
1055
1054
|
isDevelopmentMode,
|
|
1056
1055
|
maxSnoozeDurationHours,
|
|
1057
|
-
isSnoozeEnabled
|
|
1056
|
+
isSnoozeEnabled,
|
|
1057
|
+
isKeyless,
|
|
1058
|
+
applicationIdentifier
|
|
1058
1059
|
},
|
|
1059
1060
|
get children() {
|
|
1060
1061
|
return props.children;
|
|
@@ -1660,248 +1661,125 @@ var Bell2 = (props) => {
|
|
|
1660
1661
|
function isBrowser() {
|
|
1661
1662
|
return typeof window !== "undefined";
|
|
1662
1663
|
}
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
var _tmpl$25 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">Development mode`);
|
|
1666
|
-
var _tmpl$26 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
|
|
1667
|
-
var _tmpl$32 = /* @__PURE__ */ template(`<a target=_blank class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs>Inbox by</span><span class=nt-text-xs>Novu`);
|
|
1668
|
-
var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
|
|
1669
|
-
var stripes = `before:nt-content-[""] before:nt-absolute before:nt-inset-0 before:-nt-right-[calc(0+var(--stripes-size))] before:[mask-image:linear-gradient(transparent_0%,black)] before:nt-bg-dev-stripes-gradient before:nt-bg-[length:var(--stripes-size)_var(--stripes-size)] before:nt-animate-stripes before:hover:[animation-play-state:running]`;
|
|
1670
|
-
var commonAfter = 'after:nt-content-[""] after:nt-absolute after:nt-inset-0 after:-nt-top-12';
|
|
1671
|
-
var devModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-stripes)_l_c_h_/_0.07)_55%,transparent),linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
|
|
1672
|
-
var prodModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
|
|
1673
|
-
var Footer = () => {
|
|
1674
|
-
const {
|
|
1675
|
-
hideBranding,
|
|
1676
|
-
isDevelopmentMode
|
|
1677
|
-
} = useInboxContext();
|
|
1678
|
-
return createComponent(Show, {
|
|
1679
|
-
get when() {
|
|
1680
|
-
return !hideBranding() || isDevelopmentMode();
|
|
1681
|
-
},
|
|
1682
|
-
get children() {
|
|
1683
|
-
var _el$ = _tmpl$42();
|
|
1684
|
-
_el$.style.setProperty("--stripes-size", "15px");
|
|
1685
|
-
insert(_el$, createComponent(Show, {
|
|
1686
|
-
get when() {
|
|
1687
|
-
return isDevelopmentMode();
|
|
1688
|
-
},
|
|
1689
|
-
get children() {
|
|
1690
|
-
return _tmpl$25();
|
|
1691
|
-
}
|
|
1692
|
-
}), null);
|
|
1693
|
-
insert(_el$, createComponent(Show, {
|
|
1694
|
-
get when() {
|
|
1695
|
-
return memo(() => !!isDevelopmentMode())() && !hideBranding();
|
|
1696
|
-
},
|
|
1697
|
-
get children() {
|
|
1698
|
-
return _tmpl$26();
|
|
1699
|
-
}
|
|
1700
|
-
}), null);
|
|
1701
|
-
insert(_el$, createComponent(Show, {
|
|
1702
|
-
get when() {
|
|
1703
|
-
return !hideBranding();
|
|
1704
|
-
},
|
|
1705
|
-
get children() {
|
|
1706
|
-
var _el$4 = _tmpl$32(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
|
|
1707
|
-
insert(_el$4, createComponent(Novu2, {
|
|
1708
|
-
"class": "nt-size-2.5"
|
|
1709
|
-
}), _el$6);
|
|
1710
|
-
effect(() => setAttribute(_el$4, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
|
|
1711
|
-
return _el$4;
|
|
1712
|
-
}
|
|
1713
|
-
}), null);
|
|
1714
|
-
effect(() => className(_el$, cn(`nt-relative nt-flex nt-shrink-0 nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-py-3 nt-text-foreground-alpha-400`, {
|
|
1715
|
-
[stripes]: isDevelopmentMode(),
|
|
1716
|
-
[devModeGradient]: isDevelopmentMode(),
|
|
1717
|
-
"nt-bg-[oklch(from_var(--nv-color-stripes)_l_c_h_/_0.1)]": isDevelopmentMode(),
|
|
1718
|
-
[prodModeGradient]: !isDevelopmentMode()
|
|
1719
|
-
})));
|
|
1720
|
-
return _el$;
|
|
1721
|
-
}
|
|
1722
|
-
});
|
|
1723
|
-
};
|
|
1724
|
-
function getCurrentDomain() {
|
|
1725
|
-
if (isBrowser()) {
|
|
1726
|
-
return window.location.hostname;
|
|
1727
|
-
}
|
|
1728
|
-
return "";
|
|
1729
|
-
}
|
|
1730
|
-
var _tmpl$27 = /* @__PURE__ */ template(`<button>`);
|
|
1731
|
-
var buttonVariants = cva(cn('nt-inline-flex nt-gap-4 nt-items-center nt-justify-center nt-whitespace-nowrap nt-text-sm nt-font-medium nt-transition-colors disabled:nt-pointer-events-none disabled:nt-opacity-50 after:nt-absolute after:nt-content-[""] before:nt-content-[""] before:nt-absolute [&_svg]:nt-pointer-events-none [&_svg]:nt-shrink-0', `focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
|
|
1732
|
-
variants: {
|
|
1733
|
-
variant: {
|
|
1734
|
-
default: "nt-bg-gradient-to-b nt-from-20% nt-from-primary-foreground-alpha-200 nt-to-transparent nt-bg-primary nt-text-primary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-primary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-primary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-primary-foreground-alpha-50 after:nt-to-transparent",
|
|
1735
|
-
secondary: "nt-bg-secondary nt-text-secondary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-secondary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-secondary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-secondary-foreground-alpha-50 after:nt-to-transparent",
|
|
1736
|
-
ghost: "hover:nt-bg-neutral-alpha-100 nt-text-foreground-alpha-600 hover:nt-text-foreground-alpha-800",
|
|
1737
|
-
unstyled: ""
|
|
1738
|
-
},
|
|
1739
|
-
size: {
|
|
1740
|
-
none: "",
|
|
1741
|
-
iconSm: "nt-p-1 nt-rounded-md after:nt-rounded-md before:nt-rounded-md focus-visible:nt-rounded-md",
|
|
1742
|
-
icon: "nt-p-2.5 nt-rounded-xl before:nt-rounded-xl after:nt-rounded-xl focus-visible:nt-rounded-xl",
|
|
1743
|
-
default: "nt-px-2 nt-py-1 nt-rounded-lg focus-visible:nt-rounded-lg before:nt-rounded-lg after:nt-rounded-lg",
|
|
1744
|
-
sm: "nt-px-1 nt-py-px nt-rounded-md nt-text-xs nt-px-1 before:nt-rounded-md focus-visible:nt-rounded-md after:nt-rounded-md",
|
|
1745
|
-
lg: "nt-px-8 nt-py-2 nt-text-base before:nt-rounded-lg after:nt-rounded-lg focus-visible:nt-rounded-lg"
|
|
1746
|
-
}
|
|
1747
|
-
},
|
|
1748
|
-
defaultVariants: {
|
|
1749
|
-
variant: "default",
|
|
1750
|
-
size: "default"
|
|
1751
|
-
}
|
|
1752
|
-
});
|
|
1753
|
-
var Button = (props) => {
|
|
1754
|
-
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
1755
|
-
const style = useStyle();
|
|
1756
|
-
return (() => {
|
|
1757
|
-
var _el$ = _tmpl$27();
|
|
1758
|
-
spread(_el$, mergeProps({
|
|
1759
|
-
get ["data-variant"]() {
|
|
1760
|
-
return props.variant;
|
|
1761
|
-
},
|
|
1762
|
-
get ["data-size"]() {
|
|
1763
|
-
return props.size;
|
|
1764
|
-
},
|
|
1765
|
-
get ["class"]() {
|
|
1766
|
-
return style(local.appearanceKey || "button", cn(buttonVariants({
|
|
1767
|
-
variant: props.variant,
|
|
1768
|
-
size: props.size
|
|
1769
|
-
}), local.class));
|
|
1770
|
-
}
|
|
1771
|
-
}, rest), false, false);
|
|
1772
|
-
return _el$;
|
|
1773
|
-
})();
|
|
1774
|
-
};
|
|
1775
|
-
var _tmpl$28 = /* @__PURE__ */ template(`<button>`);
|
|
1776
|
-
var PopoverClose = (props) => {
|
|
1777
|
-
const {
|
|
1778
|
-
onClose
|
|
1779
|
-
} = usePopover();
|
|
1780
|
-
const style = useStyle();
|
|
1781
|
-
const [local, rest] = splitProps(props, ["onClick", "asChild", "appearanceKey", "class"]);
|
|
1782
|
-
const handleClick = (e) => {
|
|
1783
|
-
if (typeof local.onClick === "function") {
|
|
1784
|
-
local.onClick(e);
|
|
1785
|
-
}
|
|
1786
|
-
onClose();
|
|
1787
|
-
};
|
|
1788
|
-
if (local.asChild) {
|
|
1789
|
-
return createComponent(Dynamic, mergeProps({
|
|
1790
|
-
get component() {
|
|
1791
|
-
return local.asChild;
|
|
1792
|
-
},
|
|
1793
|
-
onClick: handleClick
|
|
1794
|
-
}, rest));
|
|
1795
|
-
}
|
|
1664
|
+
var _tmpl$25 = /* @__PURE__ */ template(`<svg width=6 height=6 viewBox="0 0 6 6"fill=none xmlns=http://www.w3.org/2000/svg><path d="M5.00175 1.70402L0.705765 6L0 5.29424L4.29548 0.998253H0.509608V0H6V5.49039H5.00175V1.70402Z"fill=currentColor>`);
|
|
1665
|
+
var ArrowUpRight = (props) => {
|
|
1796
1666
|
return (() => {
|
|
1797
|
-
var _el$ = _tmpl$
|
|
1798
|
-
_el
|
|
1799
|
-
spread(_el$, mergeProps({
|
|
1800
|
-
get ["class"]() {
|
|
1801
|
-
return style(local.appearanceKey || "popoverClose", local.class);
|
|
1802
|
-
}
|
|
1803
|
-
}, rest), false, false);
|
|
1667
|
+
var _el$ = _tmpl$25();
|
|
1668
|
+
spread(_el$, props, true, true);
|
|
1804
1669
|
return _el$;
|
|
1805
1670
|
})();
|
|
1806
1671
|
};
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
var Portal = (props) => {
|
|
1810
|
-
const appearance = useAppearance();
|
|
1811
|
-
let currentElement;
|
|
1812
|
-
return [(() => {
|
|
1813
|
-
var _el$ = _tmpl$29();
|
|
1814
|
-
use((el) => {
|
|
1815
|
-
currentElement = el;
|
|
1816
|
-
}, _el$);
|
|
1817
|
-
_el$.style.setProperty("display", "none");
|
|
1818
|
-
return _el$;
|
|
1819
|
-
})(), createComponent(Portal$1, mergeProps({
|
|
1820
|
-
get mount() {
|
|
1821
|
-
return closestNovuRootParent(currentElement, appearance.id());
|
|
1822
|
-
}
|
|
1823
|
-
}, props))];
|
|
1824
|
-
};
|
|
1825
|
-
var closestNovuRootParent = (el, id) => {
|
|
1826
|
-
let element = el;
|
|
1827
|
-
while (element && element.id !== `novu-root-${id}`) {
|
|
1828
|
-
element = element.parentElement;
|
|
1829
|
-
}
|
|
1830
|
-
if (element && element.id === `novu-root-${id}`) {
|
|
1831
|
-
return element;
|
|
1832
|
-
}
|
|
1833
|
-
return void 0;
|
|
1834
|
-
};
|
|
1835
|
-
var PopoverContext = createContext(void 0);
|
|
1836
|
-
function PopoverRoot(props) {
|
|
1672
|
+
var TooltipContext = createContext(void 0);
|
|
1673
|
+
function TooltipRoot(props) {
|
|
1837
1674
|
var _a;
|
|
1838
|
-
const [uncontrolledIsOpen, setUncontrolledIsOpen] = createSignal((_a = props.open) != null ? _a : false);
|
|
1839
|
-
const onOpenChange = () => {
|
|
1840
|
-
var _a2;
|
|
1841
|
-
return (_a2 = props.onOpenChange) != null ? _a2 : setUncontrolledIsOpen;
|
|
1842
|
-
};
|
|
1843
|
-
const open = () => {
|
|
1844
|
-
var _a2;
|
|
1845
|
-
return (_a2 = props.open) != null ? _a2 : uncontrolledIsOpen();
|
|
1846
|
-
};
|
|
1847
1675
|
const [reference, setReference] = createSignal(null);
|
|
1848
1676
|
const [floating, setFloating] = createSignal(null);
|
|
1677
|
+
const {
|
|
1678
|
+
animations
|
|
1679
|
+
} = useAppearance();
|
|
1680
|
+
const defaultAnimationDuration = 0.2;
|
|
1681
|
+
const actualAnimationDuration = () => {
|
|
1682
|
+
var _a2;
|
|
1683
|
+
return (_a2 = props.animationDuration) != null ? _a2 : defaultAnimationDuration;
|
|
1684
|
+
};
|
|
1685
|
+
const effectiveAnimationDuration = createMemo(() => animations() ? actualAnimationDuration() : 0);
|
|
1849
1686
|
const position = useFloating(reference, floating, {
|
|
1850
|
-
|
|
1851
|
-
|
|
1687
|
+
placement: props.placement || "top",
|
|
1688
|
+
strategy: "fixed",
|
|
1852
1689
|
whileElementsMounted: autoUpdate,
|
|
1853
1690
|
middleware: [offset(10), flip({
|
|
1854
|
-
fallbackPlacements: props.fallbackPlacements
|
|
1691
|
+
fallbackPlacements: props.fallbackPlacements || ["bottom"]
|
|
1855
1692
|
}), shift()]
|
|
1856
1693
|
});
|
|
1857
|
-
const
|
|
1858
|
-
|
|
1859
|
-
return
|
|
1860
|
-
position: position.strategy,
|
|
1861
|
-
top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
|
|
1862
|
-
left: `${(_b = position.x) != null ? _b : 0}px`
|
|
1863
|
-
};
|
|
1694
|
+
const [uncontrolledOpen, setUncontrolledOpen] = createSignal((_a = props.open) != null ? _a : false);
|
|
1695
|
+
const openAccessor = createMemo(() => {
|
|
1696
|
+
return props.open !== void 0 ? !!props.open : uncontrolledOpen();
|
|
1864
1697
|
});
|
|
1865
|
-
const
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
onOpenChange()((prev) => !prev);
|
|
1698
|
+
const setOpenSetter = (valueOrFn) => {
|
|
1699
|
+
if (props.open === void 0) {
|
|
1700
|
+
setUncontrolledOpen(valueOrFn);
|
|
1701
|
+
}
|
|
1870
1702
|
};
|
|
1871
|
-
|
|
1703
|
+
const [shouldRenderTooltip, setShouldRenderTooltip] = createSignal(openAccessor());
|
|
1704
|
+
let renderTimeoutId;
|
|
1705
|
+
createEffect(() => {
|
|
1706
|
+
const isOpen = openAccessor();
|
|
1707
|
+
if (renderTimeoutId) {
|
|
1708
|
+
clearTimeout(renderTimeoutId);
|
|
1709
|
+
renderTimeoutId = void 0;
|
|
1710
|
+
}
|
|
1711
|
+
if (isOpen) {
|
|
1712
|
+
setShouldRenderTooltip(true);
|
|
1713
|
+
} else if (effectiveAnimationDuration() > 0) {
|
|
1714
|
+
renderTimeoutId = window.setTimeout(() => {
|
|
1715
|
+
setShouldRenderTooltip(false);
|
|
1716
|
+
}, effectiveAnimationDuration() * 1e3);
|
|
1717
|
+
} else {
|
|
1718
|
+
setShouldRenderTooltip(false);
|
|
1719
|
+
}
|
|
1720
|
+
});
|
|
1721
|
+
createEffect(() => {
|
|
1722
|
+
if (openAccessor()) {
|
|
1723
|
+
setShouldRenderTooltip(true);
|
|
1724
|
+
}
|
|
1725
|
+
});
|
|
1726
|
+
return createComponent(TooltipContext.Provider, {
|
|
1872
1727
|
value: {
|
|
1873
|
-
onToggle,
|
|
1874
|
-
onClose,
|
|
1875
1728
|
reference,
|
|
1876
1729
|
setReference,
|
|
1877
1730
|
floating,
|
|
1878
1731
|
setFloating,
|
|
1879
|
-
open,
|
|
1880
|
-
|
|
1732
|
+
open: openAccessor,
|
|
1733
|
+
shouldRender: shouldRenderTooltip,
|
|
1734
|
+
setOpen: setOpenSetter,
|
|
1735
|
+
floatingStyles: () => {
|
|
1736
|
+
var _a2, _b;
|
|
1737
|
+
return {
|
|
1738
|
+
position: position.strategy,
|
|
1739
|
+
top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
|
|
1740
|
+
left: `${(_b = position.x) != null ? _b : 0}px`
|
|
1741
|
+
};
|
|
1742
|
+
},
|
|
1743
|
+
effectiveAnimationDuration
|
|
1881
1744
|
},
|
|
1882
1745
|
get children() {
|
|
1883
1746
|
return props.children;
|
|
1884
1747
|
}
|
|
1885
1748
|
});
|
|
1886
1749
|
}
|
|
1887
|
-
function
|
|
1888
|
-
const context = useContext(
|
|
1750
|
+
function useTooltip() {
|
|
1751
|
+
const context = useContext(TooltipContext);
|
|
1889
1752
|
if (!context) {
|
|
1890
|
-
throw new Error("
|
|
1753
|
+
throw new Error("useTooltip must be used within Tooltip.Root component");
|
|
1891
1754
|
}
|
|
1892
1755
|
return context;
|
|
1893
1756
|
}
|
|
1757
|
+
var Motion = new Proxy(Motion$1, {
|
|
1758
|
+
get: (_, tag) => (props) => {
|
|
1759
|
+
const {
|
|
1760
|
+
animations
|
|
1761
|
+
} = useAppearance();
|
|
1762
|
+
return createComponent(Motion$1, mergeProps(props, {
|
|
1763
|
+
tag,
|
|
1764
|
+
get transition() {
|
|
1765
|
+
return animations() ? props.transition : {
|
|
1766
|
+
duration: 0
|
|
1767
|
+
};
|
|
1768
|
+
}
|
|
1769
|
+
}));
|
|
1770
|
+
}
|
|
1771
|
+
});
|
|
1894
1772
|
|
|
1895
|
-
// src/ui/components/primitives/
|
|
1896
|
-
var
|
|
1897
|
-
var
|
|
1898
|
-
var PopoverContentBody = (props) => {
|
|
1773
|
+
// src/ui/components/primitives/Tooltip/TooltipContent.tsx
|
|
1774
|
+
var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
|
|
1775
|
+
var TooltipContentBody = (props) => {
|
|
1899
1776
|
const {
|
|
1900
1777
|
open,
|
|
1901
1778
|
setFloating,
|
|
1902
1779
|
floating,
|
|
1903
|
-
floatingStyles
|
|
1904
|
-
|
|
1780
|
+
floatingStyles,
|
|
1781
|
+
effectiveAnimationDuration
|
|
1782
|
+
} = useTooltip();
|
|
1905
1783
|
const {
|
|
1906
1784
|
setActive,
|
|
1907
1785
|
removeActive
|
|
@@ -1910,80 +1788,72 @@ var PopoverContentBody = (props) => {
|
|
|
1910
1788
|
const style = useStyle();
|
|
1911
1789
|
onMount(() => {
|
|
1912
1790
|
const floatingEl = floating();
|
|
1913
|
-
setActive(floatingEl);
|
|
1791
|
+
if (floatingEl) setActive(floatingEl);
|
|
1914
1792
|
onCleanup(() => {
|
|
1915
|
-
removeActive(floatingEl);
|
|
1793
|
+
if (floatingEl) removeActive(floatingEl);
|
|
1916
1794
|
});
|
|
1917
1795
|
});
|
|
1918
|
-
return ((
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
}
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
}
|
|
1931
|
-
},
|
|
1932
|
-
|
|
1933
|
-
|
|
1796
|
+
return createComponent(Motion.div, mergeProps({
|
|
1797
|
+
initial: {
|
|
1798
|
+
opacity: 0,
|
|
1799
|
+
scale: 0.95
|
|
1800
|
+
},
|
|
1801
|
+
get animate() {
|
|
1802
|
+
return open() ? {
|
|
1803
|
+
opacity: 1,
|
|
1804
|
+
scale: 1
|
|
1805
|
+
} : {
|
|
1806
|
+
opacity: 0,
|
|
1807
|
+
scale: 0.95
|
|
1808
|
+
};
|
|
1809
|
+
},
|
|
1810
|
+
get transition() {
|
|
1811
|
+
return {
|
|
1812
|
+
duration: effectiveAnimationDuration(),
|
|
1813
|
+
easing: "ease-in-out"
|
|
1814
|
+
};
|
|
1815
|
+
},
|
|
1816
|
+
ref: setFloating,
|
|
1817
|
+
get ["class"]() {
|
|
1818
|
+
return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
|
|
1819
|
+
},
|
|
1820
|
+
get style() {
|
|
1821
|
+
return __spreadProps(__spreadValues({}, floatingStyles()), {
|
|
1822
|
+
"z-index": 99999
|
|
1823
|
+
});
|
|
1824
|
+
}
|
|
1825
|
+
}, rest, {
|
|
1826
|
+
get children() {
|
|
1827
|
+
return props.children;
|
|
1828
|
+
}
|
|
1829
|
+
}));
|
|
1934
1830
|
};
|
|
1935
|
-
var
|
|
1936
|
-
const {
|
|
1937
|
-
open,
|
|
1938
|
-
onClose,
|
|
1939
|
-
reference,
|
|
1940
|
-
floating
|
|
1941
|
-
} = usePopover();
|
|
1831
|
+
var TooltipContent = (props) => {
|
|
1942
1832
|
const {
|
|
1943
|
-
|
|
1944
|
-
} =
|
|
1833
|
+
shouldRender
|
|
1834
|
+
} = useTooltip();
|
|
1945
1835
|
const {
|
|
1946
1836
|
container
|
|
1947
1837
|
} = useAppearance();
|
|
1948
|
-
const
|
|
1949
|
-
var _a, _b;
|
|
1950
|
-
if ((_a = reference()) == null ? void 0 : _a.contains(e.target)) {
|
|
1951
|
-
return;
|
|
1952
|
-
}
|
|
1953
|
-
const containerElement = container();
|
|
1954
|
-
if (active() !== floating() || ((_b = floating()) == null ? void 0 : _b.contains(e.target)) || containerElement && e.target.shadowRoot === containerElement) {
|
|
1955
|
-
return;
|
|
1956
|
-
}
|
|
1957
|
-
onClose();
|
|
1958
|
-
};
|
|
1959
|
-
const handleEscapeKey = (e) => {
|
|
1960
|
-
if (active() !== floating()) {
|
|
1961
|
-
return;
|
|
1962
|
-
}
|
|
1963
|
-
if (e instanceof KeyboardEvent && e.key === "Escape") {
|
|
1964
|
-
onClose();
|
|
1965
|
-
}
|
|
1966
|
-
};
|
|
1967
|
-
onMount(() => {
|
|
1968
|
-
var _a;
|
|
1969
|
-
document.body.addEventListener("click", handleClickOutside);
|
|
1970
|
-
(_a = container()) == null ? void 0 : _a.addEventListener("click", handleClickOutside);
|
|
1971
|
-
document.body.addEventListener("keydown", handleEscapeKey);
|
|
1972
|
-
});
|
|
1973
|
-
onCleanup(() => {
|
|
1838
|
+
const portalContainer = () => {
|
|
1974
1839
|
var _a;
|
|
1975
|
-
document.body
|
|
1976
|
-
|
|
1977
|
-
document.body.removeEventListener("keydown", handleEscapeKey);
|
|
1978
|
-
});
|
|
1840
|
+
return (_a = container()) != null ? _a : document.body;
|
|
1841
|
+
};
|
|
1979
1842
|
return createComponent(Show, {
|
|
1980
1843
|
get when() {
|
|
1981
|
-
return
|
|
1844
|
+
return shouldRender();
|
|
1982
1845
|
},
|
|
1983
1846
|
get children() {
|
|
1984
1847
|
return createComponent(Portal, {
|
|
1848
|
+
get mount() {
|
|
1849
|
+
return portalContainer();
|
|
1850
|
+
},
|
|
1985
1851
|
get children() {
|
|
1986
|
-
return createComponent(
|
|
1852
|
+
return createComponent(Root, {
|
|
1853
|
+
get children() {
|
|
1854
|
+
return createComponent(TooltipContentBody, props);
|
|
1855
|
+
}
|
|
1856
|
+
});
|
|
1987
1857
|
}
|
|
1988
1858
|
});
|
|
1989
1859
|
}
|
|
@@ -2000,22 +1870,28 @@ function mergeRefs(...refs) {
|
|
|
2000
1870
|
return chain(refs);
|
|
2001
1871
|
}
|
|
2002
1872
|
|
|
2003
|
-
// src/ui/components/primitives/
|
|
2004
|
-
var _tmpl$
|
|
2005
|
-
var
|
|
1873
|
+
// src/ui/components/primitives/Tooltip/TooltipTrigger.tsx
|
|
1874
|
+
var _tmpl$26 = /* @__PURE__ */ template(`<button>`);
|
|
1875
|
+
var TooltipTrigger = (props) => {
|
|
2006
1876
|
const {
|
|
2007
1877
|
setReference,
|
|
2008
|
-
|
|
2009
|
-
} =
|
|
1878
|
+
setOpen
|
|
1879
|
+
} = useTooltip();
|
|
2010
1880
|
const style = useStyle();
|
|
2011
|
-
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
|
|
2012
|
-
const
|
|
2013
|
-
if (typeof local.
|
|
2014
|
-
local.
|
|
1881
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "onMouseEnter", "onMouseLeave", "ref"]);
|
|
1882
|
+
const handleMouseEnter = (e) => {
|
|
1883
|
+
if (typeof local.onMouseEnter === "function") {
|
|
1884
|
+
local.onMouseEnter(e);
|
|
2015
1885
|
}
|
|
2016
|
-
|
|
1886
|
+
setOpen(true);
|
|
2017
1887
|
};
|
|
2018
1888
|
const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
1889
|
+
const handleMouseLeave = (e) => {
|
|
1890
|
+
if (typeof local.onMouseLeave === "function") {
|
|
1891
|
+
local.onMouseLeave(e);
|
|
1892
|
+
}
|
|
1893
|
+
setOpen(false);
|
|
1894
|
+
};
|
|
2019
1895
|
if (local.asChild) {
|
|
2020
1896
|
return createComponent(Dynamic, mergeProps({
|
|
2021
1897
|
get component() {
|
|
@@ -2025,244 +1901,329 @@ var PopoverTrigger = (props) => {
|
|
|
2025
1901
|
var _ref$ = ref();
|
|
2026
1902
|
typeof _ref$ === "function" && _ref$(r$);
|
|
2027
1903
|
},
|
|
2028
|
-
|
|
1904
|
+
onMouseEnter: handleMouseEnter,
|
|
1905
|
+
onMouseLeave: handleMouseLeave
|
|
2029
1906
|
}, rest));
|
|
2030
1907
|
}
|
|
2031
1908
|
return (() => {
|
|
2032
|
-
var _el$ = _tmpl$
|
|
2033
|
-
_el
|
|
1909
|
+
var _el$ = _tmpl$26();
|
|
1910
|
+
_el$.addEventListener("mouseleave", () => {
|
|
1911
|
+
setOpen(false);
|
|
1912
|
+
});
|
|
1913
|
+
_el$.addEventListener("mouseenter", () => {
|
|
1914
|
+
setOpen(true);
|
|
1915
|
+
});
|
|
2034
1916
|
var _ref$2 = ref();
|
|
2035
1917
|
typeof _ref$2 === "function" && use(_ref$2, _el$);
|
|
2036
1918
|
spread(_el$, mergeProps({
|
|
2037
1919
|
get ["class"]() {
|
|
2038
|
-
return style(local.appearanceKey || "
|
|
1920
|
+
return style(local.appearanceKey || "tooltipTrigger");
|
|
2039
1921
|
}
|
|
2040
1922
|
}, rest), false, true);
|
|
2041
1923
|
insert(_el$, () => props.children);
|
|
2042
1924
|
return _el$;
|
|
2043
1925
|
})();
|
|
2044
1926
|
};
|
|
2045
|
-
delegateEvents(["click"]);
|
|
2046
1927
|
|
|
2047
|
-
// src/ui/components/primitives/
|
|
2048
|
-
var
|
|
2049
|
-
Root:
|
|
2050
|
-
/**
|
|
2051
|
-
* Popover.Trigger renders a `button` and has no default styling.
|
|
2052
|
-
*/
|
|
2053
|
-
Trigger: PopoverTrigger,
|
|
1928
|
+
// src/ui/components/primitives/Tooltip/index.ts
|
|
1929
|
+
var Tooltip = {
|
|
1930
|
+
Root: TooltipRoot,
|
|
2054
1931
|
/**
|
|
2055
|
-
*
|
|
1932
|
+
* Tooltip.Trigger renders a `button` and has no default styling.
|
|
2056
1933
|
*/
|
|
2057
|
-
|
|
1934
|
+
Trigger: TooltipTrigger,
|
|
2058
1935
|
/**
|
|
2059
|
-
*
|
|
2060
|
-
* Closes the popover when clicked.
|
|
2061
|
-
* `onClick` function is propagated.
|
|
1936
|
+
* Tooltip.Content renders a `div` and has popover specific styling.
|
|
2062
1937
|
*/
|
|
2063
|
-
|
|
1938
|
+
Content: TooltipContent
|
|
2064
1939
|
};
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
1940
|
+
|
|
1941
|
+
// src/ui/components/primitives/CopyToClipboard.tsx
|
|
1942
|
+
var _tmpl$27 = /* @__PURE__ */ template(`<button type=button>`);
|
|
1943
|
+
function CopyToClipboard(props) {
|
|
1944
|
+
const [isCopied, setIsCopied] = createSignal(false);
|
|
1945
|
+
const style = useStyle();
|
|
1946
|
+
let timeoutId;
|
|
1947
|
+
const defaultTooltipText = "Copied!";
|
|
1948
|
+
const defaultTooltipDuration = 2e3;
|
|
1949
|
+
function handleCopy() {
|
|
1950
|
+
return __async(this, null, function* () {
|
|
1951
|
+
var _a;
|
|
1952
|
+
if (timeoutId) {
|
|
1953
|
+
clearTimeout(timeoutId);
|
|
1954
|
+
}
|
|
1955
|
+
try {
|
|
1956
|
+
yield navigator.clipboard.writeText(props.textToCopy);
|
|
1957
|
+
setIsCopied(true);
|
|
1958
|
+
timeoutId = window.setTimeout(() => {
|
|
1959
|
+
setIsCopied(false);
|
|
1960
|
+
timeoutId = void 0;
|
|
1961
|
+
}, (_a = props.tooltipDuration) != null ? _a : defaultTooltipDuration);
|
|
1962
|
+
} catch (err) {
|
|
1963
|
+
console.error("Failed to copy text: ", err);
|
|
1964
|
+
}
|
|
1965
|
+
});
|
|
1966
|
+
}
|
|
1967
|
+
return createComponent(Tooltip.Root, {
|
|
1968
|
+
get open() {
|
|
1969
|
+
return isCopied();
|
|
2071
1970
|
},
|
|
2072
|
-
|
|
2073
|
-
|
|
1971
|
+
placement: "top",
|
|
1972
|
+
animationDuration: 0.15,
|
|
1973
|
+
get children() {
|
|
1974
|
+
return [createComponent(Tooltip.Trigger, {
|
|
1975
|
+
asChild: (triggerProps) => (() => {
|
|
1976
|
+
var _el$ = _tmpl$27();
|
|
1977
|
+
spread(_el$, mergeProps(triggerProps, {
|
|
1978
|
+
"onClick": handleCopy,
|
|
1979
|
+
get ["class"]() {
|
|
1980
|
+
return style("button", "nt-cursor-pointer");
|
|
1981
|
+
}
|
|
1982
|
+
}), false, true);
|
|
1983
|
+
insert(_el$, () => props.children);
|
|
1984
|
+
return _el$;
|
|
1985
|
+
})()
|
|
1986
|
+
}), createComponent(Tooltip.Content, {
|
|
1987
|
+
get children() {
|
|
1988
|
+
var _a;
|
|
1989
|
+
return (_a = props.tooltipText) != null ? _a : defaultTooltipText;
|
|
1990
|
+
}
|
|
1991
|
+
})];
|
|
2074
1992
|
}
|
|
2075
|
-
}
|
|
2076
|
-
}
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
1993
|
+
});
|
|
1994
|
+
}
|
|
1995
|
+
|
|
1996
|
+
// src/ui/components/elements/Footer.tsx
|
|
1997
|
+
var _tmpl$28 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">`);
|
|
1998
|
+
var _tmpl$29 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
|
|
1999
|
+
var _tmpl$32 = /* @__PURE__ */ template(`<a target=_blank class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-justify-center"><span class=nt-text-xs>Inbox by</span><span class=nt-text-xs>Novu`);
|
|
2000
|
+
var _tmpl$42 = /* @__PURE__ */ template(`<span class=nt-underline>Copy cURL`);
|
|
2001
|
+
var _tmpl$52 = /* @__PURE__ */ template(`<div class="nt-z-10 nt-flex nt-items-center nt-gap-1 nt-text-xs nt-text-secondary-foreground"><a href="https://go.novu.co/keyless?utm_campaign=footer-get_api_key"class="nt-underline nt-flex nt-items-center nt-gap-0.5"target=_blank rel="noopener noreferrer">Get API key</a><span>\u2022</span><span>\u2022</span><button type=button class=nt-underline>Send notification`);
|
|
2002
|
+
var _tmpl$62 = /* @__PURE__ */ template(`<div><div class="nt-flex nt-items-center nt-gap-1">`);
|
|
2003
|
+
var _tmpl$72 = /* @__PURE__ */ template(`<a href="https://go.novu.co/keyless?utm_campaign=keyless-mode"target=_blank rel="noopener noreferrer">Keyless mode`);
|
|
2004
|
+
var _tmpl$82 = /* @__PURE__ */ template(`<br>`);
|
|
2005
|
+
var stripes = `before:nt-content-[""] before:nt-absolute before:nt-inset-0 before:-nt-right-[calc(0+var(--stripes-size))] before:[mask-image:linear-gradient(transparent_0%,black)] before:nt-bg-dev-stripes-gradient before:nt-bg-[length:var(--stripes-size)_var(--stripes-size)] before:nt-animate-stripes before:hover:[animation-play-state:running]`;
|
|
2006
|
+
var commonAfter = 'after:nt-content-[""] after:nt-absolute after:nt-inset-0 after:-nt-top-12';
|
|
2007
|
+
var devModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-stripes)_l_c_h_/_0.07)_55%,transparent),linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
|
|
2008
|
+
var prodModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
|
|
2009
|
+
var Footer = () => {
|
|
2080
2010
|
const {
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
onClick: handleClick
|
|
2095
|
-
}, rest));
|
|
2011
|
+
hideBranding,
|
|
2012
|
+
isDevelopmentMode,
|
|
2013
|
+
isKeyless
|
|
2014
|
+
} = useInboxContext();
|
|
2015
|
+
const novu = useNovu();
|
|
2016
|
+
function handleTriggerHelloWorld() {
|
|
2017
|
+
return __async(this, null, function* () {
|
|
2018
|
+
try {
|
|
2019
|
+
yield novu.notifications.triggerHelloWorldEvent();
|
|
2020
|
+
} catch (error) {
|
|
2021
|
+
console.error("Failed to send Hello World from UI via novu.notifications:", error);
|
|
2022
|
+
}
|
|
2023
|
+
});
|
|
2096
2024
|
}
|
|
2097
|
-
return createComponent(
|
|
2098
|
-
get
|
|
2099
|
-
return
|
|
2100
|
-
},
|
|
2101
|
-
get ["class"]() {
|
|
2102
|
-
return cn(dropdownItemVariants(), local.class);
|
|
2025
|
+
return createComponent(Show, {
|
|
2026
|
+
get when() {
|
|
2027
|
+
return !hideBranding() || isDevelopmentMode();
|
|
2103
2028
|
},
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2029
|
+
get children() {
|
|
2030
|
+
var _el$ = _tmpl$62(), _el$2 = _el$.firstChild;
|
|
2031
|
+
_el$.style.setProperty("--stripes-size", "15px");
|
|
2032
|
+
insert(_el$2, createComponent(Show, {
|
|
2033
|
+
get when() {
|
|
2034
|
+
return isDevelopmentMode();
|
|
2035
|
+
},
|
|
2036
|
+
get children() {
|
|
2037
|
+
var _el$3 = _tmpl$28();
|
|
2038
|
+
insert(_el$3, (() => {
|
|
2039
|
+
var _c$ = memo(() => !!isKeyless());
|
|
2040
|
+
return () => _c$() ? createComponent(Tooltip.Root, {
|
|
2041
|
+
get children() {
|
|
2042
|
+
return [createComponent(Tooltip.Trigger, {
|
|
2043
|
+
"class": "",
|
|
2044
|
+
get children() {
|
|
2045
|
+
return _tmpl$72();
|
|
2046
|
+
}
|
|
2047
|
+
}), createComponent(Tooltip.Content, {
|
|
2048
|
+
get children() {
|
|
2049
|
+
return ["Temporary <Inbox />. All data will expire in 24 hours.", _tmpl$82(), "Connect API key to persist."];
|
|
2050
|
+
}
|
|
2051
|
+
})];
|
|
2052
|
+
}
|
|
2053
|
+
}) : "Development mode";
|
|
2054
|
+
})());
|
|
2055
|
+
return _el$3;
|
|
2056
|
+
}
|
|
2057
|
+
}), null);
|
|
2058
|
+
insert(_el$2, createComponent(Show, {
|
|
2059
|
+
get when() {
|
|
2060
|
+
return memo(() => !!isDevelopmentMode())() && !hideBranding();
|
|
2061
|
+
},
|
|
2062
|
+
get children() {
|
|
2063
|
+
return _tmpl$29();
|
|
2064
|
+
}
|
|
2065
|
+
}), null);
|
|
2066
|
+
insert(_el$2, createComponent(Show, {
|
|
2067
|
+
get when() {
|
|
2068
|
+
return !hideBranding();
|
|
2069
|
+
},
|
|
2070
|
+
get children() {
|
|
2071
|
+
var _el$5 = _tmpl$32(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
|
|
2072
|
+
insert(_el$5, createComponent(Novu2, {
|
|
2073
|
+
"class": "nt-size-2.5"
|
|
2074
|
+
}), _el$7);
|
|
2075
|
+
effect(() => setAttribute(_el$5, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
|
|
2076
|
+
return _el$5;
|
|
2077
|
+
}
|
|
2078
|
+
}), null);
|
|
2079
|
+
insert(_el$, createComponent(Show, {
|
|
2080
|
+
get when() {
|
|
2081
|
+
return isKeyless();
|
|
2082
|
+
},
|
|
2083
|
+
get children() {
|
|
2084
|
+
var _el$8 = _tmpl$52(), _el$9 = _el$8.firstChild; _el$9.firstChild; var _el$11 = _el$9.nextSibling, _el$13 = _el$11.nextSibling, _el$14 = _el$13.nextSibling;
|
|
2085
|
+
insert(_el$9, createComponent(ArrowUpRight, {
|
|
2086
|
+
"class": "nt-ml-1"
|
|
2087
|
+
}), null);
|
|
2088
|
+
insert(_el$8, createComponent(CopyToClipboard, {
|
|
2089
|
+
get textToCopy() {
|
|
2090
|
+
return getCurlCommand();
|
|
2091
|
+
},
|
|
2092
|
+
get children() {
|
|
2093
|
+
return _tmpl$42();
|
|
2094
|
+
}
|
|
2095
|
+
}), _el$13);
|
|
2096
|
+
_el$14.$$click = (e) => {
|
|
2097
|
+
e.preventDefault();
|
|
2098
|
+
handleTriggerHelloWorld();
|
|
2099
|
+
};
|
|
2100
|
+
return _el$8;
|
|
2101
|
+
}
|
|
2102
|
+
}), null);
|
|
2103
|
+
effect(() => className(_el$, cn(`nt-relative nt-flex nt-shrink-0 nt-flex-col nt-justify-center nt-items-center nt-gap-1 nt-mt-auto nt-py-3 nt-text-foreground-alpha-400`, {
|
|
2104
|
+
[stripes]: isDevelopmentMode(),
|
|
2105
|
+
[devModeGradient]: isDevelopmentMode(),
|
|
2106
|
+
"nt-bg-[oklch(from_var(--nv-color-stripes)_l_c_h_/_0.1)]": isDevelopmentMode(),
|
|
2107
|
+
[prodModeGradient]: !isDevelopmentMode()
|
|
2108
|
+
})));
|
|
2109
|
+
return _el$;
|
|
2109
2110
|
}
|
|
2110
|
-
}
|
|
2111
|
-
};
|
|
2112
|
-
var DropdownRoot = (props) => {
|
|
2113
|
-
return createComponent(Popover.Root, mergeProps({
|
|
2114
|
-
placement: "bottom",
|
|
2115
|
-
fallbackPlacements: ["top"]
|
|
2116
|
-
}, props));
|
|
2111
|
+
});
|
|
2117
2112
|
};
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
return
|
|
2123
|
-
|
|
2124
|
-
|
|
2113
|
+
function getCurrentDomain() {
|
|
2114
|
+
if (isBrowser()) {
|
|
2115
|
+
return window.location.hostname;
|
|
2116
|
+
}
|
|
2117
|
+
return "";
|
|
2118
|
+
}
|
|
2119
|
+
function getCurlCommand() {
|
|
2120
|
+
const identifier = window.localStorage.getItem("novu_keyless_application_identifier");
|
|
2121
|
+
if (!identifier) {
|
|
2122
|
+
console.error("Novu application identifier not found for cURL command.");
|
|
2123
|
+
return "";
|
|
2124
|
+
}
|
|
2125
|
+
const DEFAULT_BACKEND_URL = typeof window !== "undefined" && window.NOVU_LOCAL_BACKEND_URL || "https://api.novu.co";
|
|
2126
|
+
return `curl -X POST ${DEFAULT_BACKEND_URL}/${DEFAULT_API_VERSION}/events/trigger -H 'Authorization: Keyless ${identifier}' -H 'Content-Type: application/json' -d '{
|
|
2127
|
+
"name": "hello-world",
|
|
2128
|
+
"to": {
|
|
2129
|
+
"subscriberId": "keyless-subscriber-id"
|
|
2130
|
+
},
|
|
2131
|
+
"payload": {
|
|
2132
|
+
"body": "New From Keyless Environment",
|
|
2133
|
+
"subject": "Hello World!"
|
|
2125
2134
|
}
|
|
2126
|
-
}
|
|
2127
|
-
}
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
var
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
};
|
|
2151
|
-
var Motion = new Proxy(Motion$1, {
|
|
2152
|
-
get: (_, tag) => (props) => {
|
|
2153
|
-
const {
|
|
2154
|
-
animations
|
|
2155
|
-
} = useAppearance();
|
|
2156
|
-
return createComponent(Motion$1, mergeProps(props, {
|
|
2157
|
-
tag,
|
|
2158
|
-
get transition() {
|
|
2159
|
-
return animations() ? props.transition : {
|
|
2160
|
-
duration: 0
|
|
2161
|
-
};
|
|
2162
|
-
}
|
|
2163
|
-
}));
|
|
2135
|
+
}'`;
|
|
2136
|
+
}
|
|
2137
|
+
delegateEvents(["click"]);
|
|
2138
|
+
var _tmpl$30 = /* @__PURE__ */ template(`<button>`);
|
|
2139
|
+
var buttonVariants = cva(cn('nt-inline-flex nt-gap-4 nt-items-center nt-justify-center nt-whitespace-nowrap nt-text-sm nt-font-medium nt-transition-colors disabled:nt-pointer-events-none disabled:nt-opacity-50 after:nt-absolute after:nt-content-[""] before:nt-content-[""] before:nt-absolute [&_svg]:nt-pointer-events-none [&_svg]:nt-shrink-0', `focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
|
|
2140
|
+
variants: {
|
|
2141
|
+
variant: {
|
|
2142
|
+
default: "nt-bg-gradient-to-b nt-from-20% nt-from-primary-foreground-alpha-200 nt-to-transparent nt-bg-primary nt-text-primary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-primary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-primary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-primary-foreground-alpha-50 after:nt-to-transparent",
|
|
2143
|
+
secondary: "nt-bg-secondary nt-text-secondary-foreground nt-shadow-[0_0_0_0.5px_var(--nv-color-secondary-600)] nt-relative before:nt-absolute before:nt-inset-0 before:nt-border before:nt-border-secondary-foreground-alpha-100 after:nt-absolute after:nt-inset-0 after:nt-opacity-0 hover:after:nt-opacity-100 after:nt-transition-opacity after:nt-bg-gradient-to-b after:nt-from-secondary-foreground-alpha-50 after:nt-to-transparent",
|
|
2144
|
+
ghost: "hover:nt-bg-neutral-alpha-100 nt-text-foreground-alpha-600 hover:nt-text-foreground-alpha-800",
|
|
2145
|
+
unstyled: ""
|
|
2146
|
+
},
|
|
2147
|
+
size: {
|
|
2148
|
+
none: "",
|
|
2149
|
+
iconSm: "nt-p-1 nt-rounded-md after:nt-rounded-md before:nt-rounded-md focus-visible:nt-rounded-md",
|
|
2150
|
+
icon: "nt-p-2.5 nt-rounded-xl before:nt-rounded-xl after:nt-rounded-xl focus-visible:nt-rounded-xl",
|
|
2151
|
+
default: "nt-px-2 nt-py-1 nt-rounded-lg focus-visible:nt-rounded-lg before:nt-rounded-lg after:nt-rounded-lg",
|
|
2152
|
+
sm: "nt-px-1 nt-py-px nt-rounded-md nt-text-xs nt-px-1 before:nt-rounded-md focus-visible:nt-rounded-md after:nt-rounded-md",
|
|
2153
|
+
lg: "nt-px-8 nt-py-2 nt-text-base before:nt-rounded-lg after:nt-rounded-lg focus-visible:nt-rounded-lg"
|
|
2154
|
+
}
|
|
2155
|
+
},
|
|
2156
|
+
defaultVariants: {
|
|
2157
|
+
variant: "default",
|
|
2158
|
+
size: "default"
|
|
2164
2159
|
}
|
|
2165
2160
|
});
|
|
2166
|
-
var
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
}
|
|
2184
|
-
const tabs = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]');
|
|
2185
|
-
if (!tabs || !root.activeElement) {
|
|
2186
|
-
return;
|
|
2187
|
-
}
|
|
2188
|
-
setKeyboardNavigation(Array.from(tabs).includes(root.activeElement));
|
|
2189
|
-
};
|
|
2190
|
-
root.addEventListener("keyup", handleTabKey);
|
|
2191
|
-
return onCleanup(() => root.removeEventListener("keyup", handleTabKey));
|
|
2192
|
-
});
|
|
2193
|
-
createEffect(() => {
|
|
2194
|
-
const root = getRoot();
|
|
2195
|
-
const handleArrowKeys = (event) => {
|
|
2196
|
-
var _a, _b;
|
|
2197
|
-
if (!keyboardNavigation() || !(event instanceof KeyboardEvent) || event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
|
|
2198
|
-
return;
|
|
2199
|
-
}
|
|
2200
|
-
const tabElements = Array.from((_b = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]')) != null ? _b : []);
|
|
2201
|
-
const tabIds = tabElements.map((tab) => tab.id);
|
|
2202
|
-
const currentIndex = tabIds.indexOf(activeTab());
|
|
2203
|
-
const { length } = tabIds;
|
|
2204
|
-
let activeIndex = currentIndex;
|
|
2205
|
-
let newTab = activeTab();
|
|
2206
|
-
if (event.key === "ArrowLeft") {
|
|
2207
|
-
activeIndex = currentIndex === 0 ? length - 1 : currentIndex - 1;
|
|
2208
|
-
newTab = tabIds[activeIndex];
|
|
2209
|
-
} else if (event.key === "ArrowRight") {
|
|
2210
|
-
activeIndex = currentIndex === length - 1 ? 0 : currentIndex + 1;
|
|
2211
|
-
newTab = tabIds[activeIndex];
|
|
2161
|
+
var Button = (props) => {
|
|
2162
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
2163
|
+
const style = useStyle();
|
|
2164
|
+
return (() => {
|
|
2165
|
+
var _el$ = _tmpl$30();
|
|
2166
|
+
spread(_el$, mergeProps({
|
|
2167
|
+
get ["data-variant"]() {
|
|
2168
|
+
return props.variant;
|
|
2169
|
+
},
|
|
2170
|
+
get ["data-size"]() {
|
|
2171
|
+
return props.size;
|
|
2172
|
+
},
|
|
2173
|
+
get ["class"]() {
|
|
2174
|
+
return style(local.appearanceKey || "button", cn(buttonVariants({
|
|
2175
|
+
variant: props.variant,
|
|
2176
|
+
size: props.size
|
|
2177
|
+
}), local.class));
|
|
2212
2178
|
}
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
root.addEventListener("keydown", handleArrowKeys);
|
|
2217
|
-
return onCleanup(() => root.removeEventListener("keydown", handleArrowKeys));
|
|
2218
|
-
});
|
|
2219
|
-
};
|
|
2220
|
-
|
|
2221
|
-
// src/ui/components/primitives/Tabs/TabsRoot.tsx
|
|
2222
|
-
var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
|
|
2223
|
-
var TabsContext = createContext(void 0);
|
|
2224
|
-
var useTabsContext = () => {
|
|
2225
|
-
const context = useContext(TabsContext);
|
|
2226
|
-
if (!context) {
|
|
2227
|
-
throw new Error("useTabsContext must be used within an TabsContext.Provider");
|
|
2228
|
-
}
|
|
2229
|
-
return context;
|
|
2179
|
+
}, rest), false, false);
|
|
2180
|
+
return _el$;
|
|
2181
|
+
})();
|
|
2230
2182
|
};
|
|
2231
|
-
var
|
|
2232
|
-
var
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2183
|
+
var _tmpl$31 = /* @__PURE__ */ template(`<div>`);
|
|
2184
|
+
var _tmpl$210 = /* @__PURE__ */ template(`<div><span>`);
|
|
2185
|
+
var DatePickerContext = createContext({
|
|
2186
|
+
currentDate: () => /* @__PURE__ */ new Date(),
|
|
2187
|
+
setCurrentDate: () => {
|
|
2188
|
+
},
|
|
2189
|
+
viewMonth: () => /* @__PURE__ */ new Date(),
|
|
2190
|
+
setViewMonth: () => {
|
|
2191
|
+
},
|
|
2192
|
+
selectedDate: () => null,
|
|
2193
|
+
setSelectedDate: () => {
|
|
2194
|
+
},
|
|
2195
|
+
maxDays: () => 0
|
|
2196
|
+
});
|
|
2197
|
+
var useDatePicker = () => useContext(DatePickerContext);
|
|
2198
|
+
var DatePicker = (props) => {
|
|
2199
|
+
const [local, rest] = splitProps(props, ["children", "value", "onDateChange", "class", "maxDays"]);
|
|
2238
2200
|
const style = useStyle();
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2201
|
+
const today = /* @__PURE__ */ new Date();
|
|
2202
|
+
today.setHours(0, 0, 0, 0);
|
|
2203
|
+
const [currentDate, setCurrentDate] = createSignal(today);
|
|
2204
|
+
const [viewMonth, setViewMonth] = createSignal(today);
|
|
2205
|
+
const [selectedDate, setSelectedDate] = createSignal(local.value ? new Date(local.value) : null);
|
|
2206
|
+
const handleDateSelect = (date) => {
|
|
2207
|
+
setSelectedDate(date);
|
|
2208
|
+
if (local.onDateChange) {
|
|
2209
|
+
local.onDateChange(date);
|
|
2247
2210
|
}
|
|
2248
|
-
}
|
|
2249
|
-
|
|
2250
|
-
var _a2;
|
|
2251
|
-
(_a2 = local.onChange) == null ? void 0 : _a2.call(local, activeTab());
|
|
2252
|
-
});
|
|
2253
|
-
return createComponent(TabsContext.Provider, {
|
|
2211
|
+
};
|
|
2212
|
+
return createComponent(DatePickerContext.Provider, {
|
|
2254
2213
|
value: {
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2214
|
+
currentDate,
|
|
2215
|
+
setCurrentDate,
|
|
2216
|
+
viewMonth,
|
|
2217
|
+
setViewMonth,
|
|
2218
|
+
selectedDate,
|
|
2219
|
+
setSelectedDate: handleDateSelect,
|
|
2220
|
+
maxDays: () => props.maxDays
|
|
2259
2221
|
},
|
|
2260
2222
|
get children() {
|
|
2261
|
-
var _el$ = _tmpl$
|
|
2262
|
-
use(setTabsContainer, _el$);
|
|
2223
|
+
var _el$ = _tmpl$31();
|
|
2263
2224
|
spread(_el$, mergeProps({
|
|
2264
2225
|
get ["class"]() {
|
|
2265
|
-
return style(
|
|
2226
|
+
return style("datePicker", cn("nt-p-2", local.class));
|
|
2266
2227
|
}
|
|
2267
2228
|
}, rest), false, true);
|
|
2268
2229
|
insert(_el$, () => local.children);
|
|
@@ -2270,48 +2231,743 @@ var TabsRoot = (props) => {
|
|
|
2270
2231
|
}
|
|
2271
2232
|
});
|
|
2272
2233
|
};
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
var _tmpl$34 = /* @__PURE__ */ template(`<div role=tabpanel>`);
|
|
2276
|
-
var TabsContent = (props) => {
|
|
2277
|
-
const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
|
|
2234
|
+
var DatePickerHeader = (props) => {
|
|
2235
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "children"]);
|
|
2278
2236
|
const style = useStyle();
|
|
2279
2237
|
const {
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
spread(_el$, mergeProps({
|
|
2289
|
-
get ["class"]() {
|
|
2290
|
-
return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
|
|
2291
|
-
},
|
|
2292
|
-
get id() {
|
|
2293
|
-
return `tabpanel-${local.value}`;
|
|
2294
|
-
},
|
|
2295
|
-
get ["aria-labelledby"]() {
|
|
2296
|
-
return local.value;
|
|
2297
|
-
},
|
|
2298
|
-
get ["data-state"]() {
|
|
2299
|
-
return activeTab() === local.value ? "active" : "inactive";
|
|
2300
|
-
}
|
|
2301
|
-
}, rest), false, true);
|
|
2302
|
-
insert(_el$, () => local.children);
|
|
2303
|
-
return _el$;
|
|
2304
|
-
}
|
|
2238
|
+
viewMonth,
|
|
2239
|
+
setViewMonth,
|
|
2240
|
+
currentDate,
|
|
2241
|
+
maxDays
|
|
2242
|
+
} = useDatePicker();
|
|
2243
|
+
useAppearance();
|
|
2244
|
+
const prevIconClass = style("datePickerControlPrevTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
|
|
2245
|
+
iconKey: "arrowLeft"
|
|
2305
2246
|
});
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2247
|
+
const nextIconClass = style("datePickerControlNextTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
|
|
2248
|
+
iconKey: "arrowRight"
|
|
2249
|
+
});
|
|
2250
|
+
const handlePrevMonth = () => {
|
|
2251
|
+
const date = new Date(viewMonth());
|
|
2252
|
+
date.setMonth(date.getMonth() - 1);
|
|
2253
|
+
const currentMonth = currentDate();
|
|
2254
|
+
if (date.getFullYear() < currentMonth.getFullYear() || date.getFullYear() === currentMonth.getFullYear() && date.getMonth() < currentMonth.getMonth()) {
|
|
2255
|
+
return;
|
|
2256
|
+
}
|
|
2257
|
+
setViewMonth(date);
|
|
2258
|
+
};
|
|
2259
|
+
const handleNextMonth = () => {
|
|
2260
|
+
const date = new Date(viewMonth());
|
|
2261
|
+
date.setMonth(date.getMonth() + 1);
|
|
2262
|
+
const maxDaysValue = maxDays();
|
|
2263
|
+
if (maxDaysValue > 0) {
|
|
2264
|
+
const maxDate = new Date(currentDate());
|
|
2265
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
2266
|
+
if (date.getFullYear() > maxDate.getFullYear() || date.getFullYear() === maxDate.getFullYear() && date.getMonth() > maxDate.getMonth()) {
|
|
2267
|
+
return;
|
|
2268
|
+
}
|
|
2269
|
+
}
|
|
2270
|
+
setViewMonth(date);
|
|
2271
|
+
};
|
|
2272
|
+
const isPrevDisabled = () => {
|
|
2273
|
+
const current = currentDate();
|
|
2274
|
+
const view = viewMonth();
|
|
2275
|
+
return view.getFullYear() === current.getFullYear() && view.getMonth() === current.getMonth();
|
|
2276
|
+
};
|
|
2277
|
+
const isNextDisabled = () => {
|
|
2278
|
+
const maxDaysValue = maxDays();
|
|
2279
|
+
if (maxDaysValue === 0) return false;
|
|
2280
|
+
const view = viewMonth();
|
|
2281
|
+
const maxDate = new Date(currentDate());
|
|
2282
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
2283
|
+
return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
|
|
2284
|
+
};
|
|
2285
|
+
return (() => {
|
|
2286
|
+
var _el$2 = _tmpl$210(), _el$3 = _el$2.firstChild;
|
|
2287
|
+
spread(_el$2, mergeProps({
|
|
2288
|
+
get ["class"]() {
|
|
2289
|
+
return style(local.appearanceKey || "datePickerControl", cn("nt-flex nt-items-center nt-justify-between nt-gap-1.5 nt-h-7 nt-p-1 nt-mb-2 nt-rounded-lg nt-bg-background", local.class));
|
|
2290
|
+
}
|
|
2291
|
+
}, rest), false, true);
|
|
2292
|
+
insert(_el$2, createComponent(Button, {
|
|
2293
|
+
appearanceKey: "datePickerControlPrevTrigger",
|
|
2294
|
+
variant: "ghost",
|
|
2295
|
+
onClick: (e) => {
|
|
2296
|
+
e.stopPropagation();
|
|
2297
|
+
handlePrevMonth();
|
|
2298
|
+
},
|
|
2299
|
+
get disabled() {
|
|
2300
|
+
return isPrevDisabled();
|
|
2301
|
+
},
|
|
2302
|
+
"class": "nt-flex nt-justify-center nt-items-center nt-gap-0.5 nt-w-5 nt-h-5 nt-p-0 nt-rounded-md nt-bg-background nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
|
|
2303
|
+
get children() {
|
|
2304
|
+
return createComponent(IconRendererWrapper, {
|
|
2305
|
+
iconKey: "arrowLeft",
|
|
2306
|
+
"class": prevIconClass,
|
|
2307
|
+
get fallback() {
|
|
2308
|
+
return createComponent(ArrowLeft, {
|
|
2309
|
+
"class": prevIconClass
|
|
2310
|
+
});
|
|
2311
|
+
}
|
|
2312
|
+
});
|
|
2313
|
+
}
|
|
2314
|
+
}), _el$3);
|
|
2315
|
+
insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
|
|
2316
|
+
month: "long",
|
|
2317
|
+
year: "numeric"
|
|
2318
|
+
}));
|
|
2319
|
+
insert(_el$2, createComponent(Button, {
|
|
2320
|
+
appearanceKey: "datePickerControlNextTrigger",
|
|
2321
|
+
variant: "ghost",
|
|
2322
|
+
onClick: (e) => {
|
|
2323
|
+
e.stopPropagation();
|
|
2324
|
+
handleNextMonth();
|
|
2325
|
+
},
|
|
2326
|
+
get disabled() {
|
|
2327
|
+
return isNextDisabled();
|
|
2328
|
+
},
|
|
2329
|
+
"class": "nt-flex nt-justify-center nt-items-center nt-gap-0.5 nt-w-5 nt-h-5 nt-p-0 nt-rounded-md nt-bg-background nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
|
|
2330
|
+
get children() {
|
|
2331
|
+
return createComponent(IconRendererWrapper, {
|
|
2332
|
+
iconKey: "arrowRight",
|
|
2333
|
+
"class": nextIconClass,
|
|
2334
|
+
get fallback() {
|
|
2335
|
+
return createComponent(ArrowRight, {
|
|
2336
|
+
"class": nextIconClass
|
|
2337
|
+
});
|
|
2338
|
+
}
|
|
2339
|
+
});
|
|
2340
|
+
}
|
|
2341
|
+
}), null);
|
|
2342
|
+
effect(() => className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
|
|
2343
|
+
return _el$2;
|
|
2344
|
+
})();
|
|
2345
|
+
};
|
|
2346
|
+
var DatePickerGridCellTrigger = (props) => {
|
|
2347
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "date"]);
|
|
2348
|
+
const {
|
|
2349
|
+
selectedDate,
|
|
2350
|
+
viewMonth,
|
|
2351
|
+
setSelectedDate,
|
|
2352
|
+
currentDate,
|
|
2353
|
+
maxDays
|
|
2354
|
+
} = useDatePicker();
|
|
2355
|
+
const {
|
|
2356
|
+
t
|
|
2357
|
+
} = useLocalization();
|
|
2358
|
+
const isCurrentMonth = props.date.getMonth() === viewMonth().getMonth();
|
|
2359
|
+
const isPastDate = () => {
|
|
2360
|
+
const today = currentDate();
|
|
2361
|
+
return props.date < today;
|
|
2362
|
+
};
|
|
2363
|
+
const isFutureDate = () => {
|
|
2364
|
+
const maxDaysValue = maxDays();
|
|
2365
|
+
if (maxDaysValue === 0) return false;
|
|
2366
|
+
const maxDate = new Date(currentDate());
|
|
2367
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
2368
|
+
return props.date > maxDate;
|
|
2369
|
+
};
|
|
2370
|
+
const isDisabled = !isCurrentMonth || isPastDate() || isFutureDate();
|
|
2371
|
+
const isExceedingLimit = () => {
|
|
2372
|
+
return isCurrentMonth && isFutureDate();
|
|
2373
|
+
};
|
|
2374
|
+
const buttonElement = createComponent(Button, mergeProps({
|
|
2375
|
+
appearanceKey: "datePickerCalendarDay__button",
|
|
2376
|
+
variant: "ghost",
|
|
2377
|
+
disabled: isDisabled,
|
|
2378
|
+
onClick: (e) => {
|
|
2379
|
+
e.stopPropagation();
|
|
2380
|
+
setSelectedDate(local.date);
|
|
2381
|
+
},
|
|
2382
|
+
get ["class"]() {
|
|
2383
|
+
var _a;
|
|
2384
|
+
return cn("nt-size-8 nt-w-full nt-rounded-md nt-flex nt-items-center nt-justify-center", {
|
|
2385
|
+
"nt-text-muted-foreground disabled:nt-opacity-20": !isCurrentMonth || isPastDate(),
|
|
2386
|
+
"nt-text-foreground-alpha-700": isCurrentMonth && !isPastDate() && !isFutureDate()
|
|
2387
|
+
}, {
|
|
2388
|
+
"nt-bg-primary-alpha-300 hover:nt-bg-primary-alpha-400": ((_a = selectedDate()) == null ? void 0 : _a.toDateString()) === local.date.toDateString()
|
|
2389
|
+
});
|
|
2390
|
+
}
|
|
2391
|
+
}, rest, {
|
|
2392
|
+
get children() {
|
|
2393
|
+
return local.date.getDate();
|
|
2394
|
+
}
|
|
2395
|
+
}));
|
|
2396
|
+
if (isExceedingLimit()) {
|
|
2397
|
+
return createComponent(Tooltip.Root, {
|
|
2398
|
+
get children() {
|
|
2399
|
+
return [createComponent(Tooltip.Trigger, {
|
|
2400
|
+
children: buttonElement
|
|
2401
|
+
}), createComponent(Tooltip.Content, {
|
|
2402
|
+
get children() {
|
|
2403
|
+
return t("snooze.datePicker.exceedingLimitTooltip", {
|
|
2404
|
+
days: maxDays()
|
|
2405
|
+
});
|
|
2406
|
+
}
|
|
2407
|
+
})];
|
|
2408
|
+
}
|
|
2409
|
+
});
|
|
2410
|
+
}
|
|
2411
|
+
return buttonElement;
|
|
2412
|
+
};
|
|
2413
|
+
var DatePickerCalendar = (props) => {
|
|
2414
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
2415
|
+
const style = useStyle();
|
|
2416
|
+
const {
|
|
2417
|
+
viewMonth
|
|
2418
|
+
} = useDatePicker();
|
|
2419
|
+
const getDaysInMonth = () => {
|
|
2420
|
+
const year = viewMonth().getFullYear();
|
|
2421
|
+
const month = viewMonth().getMonth();
|
|
2422
|
+
const firstDay = new Date(year, month, 1);
|
|
2423
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
2424
|
+
const startingDay = firstDay.getDay();
|
|
2425
|
+
const days = [];
|
|
2426
|
+
for (let i = 0; i < startingDay; i += 1) {
|
|
2427
|
+
const prevMonthDay = new Date(year, month, -i);
|
|
2428
|
+
days.unshift(prevMonthDay);
|
|
2429
|
+
}
|
|
2430
|
+
for (let i = 1; i <= daysInMonth; i += 1) {
|
|
2431
|
+
days.push(new Date(year, month, i));
|
|
2432
|
+
}
|
|
2433
|
+
const remainingCells = 7 - days.length % 7;
|
|
2434
|
+
if (remainingCells < 7) {
|
|
2435
|
+
for (let i = 1; i <= remainingCells; i += 1) {
|
|
2436
|
+
days.push(new Date(year, month + 1, i));
|
|
2437
|
+
}
|
|
2438
|
+
}
|
|
2439
|
+
return days;
|
|
2440
|
+
};
|
|
2441
|
+
return (() => {
|
|
2442
|
+
var _el$8 = _tmpl$31();
|
|
2443
|
+
_el$8.$$click = (e) => e.stopPropagation();
|
|
2444
|
+
spread(_el$8, mergeProps({
|
|
2445
|
+
get ["class"]() {
|
|
2446
|
+
return style(local.appearanceKey || "datePickerCalendar", cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class));
|
|
2447
|
+
}
|
|
2448
|
+
}, rest), false, true);
|
|
2449
|
+
insert(_el$8, () => getDaysInMonth().map((date) => {
|
|
2450
|
+
return createComponent(DatePickerGridCellTrigger, {
|
|
2451
|
+
date
|
|
2452
|
+
});
|
|
2453
|
+
}));
|
|
2454
|
+
return _el$8;
|
|
2455
|
+
})();
|
|
2456
|
+
};
|
|
2457
|
+
delegateEvents(["click"]);
|
|
2458
|
+
var _tmpl$33 = /* @__PURE__ */ template(`<button>`);
|
|
2459
|
+
var PopoverClose = (props) => {
|
|
2460
|
+
const {
|
|
2461
|
+
onClose
|
|
2462
|
+
} = usePopover();
|
|
2463
|
+
const style = useStyle();
|
|
2464
|
+
const [local, rest] = splitProps(props, ["onClick", "asChild", "appearanceKey", "class"]);
|
|
2465
|
+
const handleClick = (e) => {
|
|
2466
|
+
if (typeof local.onClick === "function") {
|
|
2467
|
+
local.onClick(e);
|
|
2468
|
+
}
|
|
2469
|
+
onClose();
|
|
2470
|
+
};
|
|
2471
|
+
if (local.asChild) {
|
|
2472
|
+
return createComponent(Dynamic, mergeProps({
|
|
2473
|
+
get component() {
|
|
2474
|
+
return local.asChild;
|
|
2475
|
+
},
|
|
2476
|
+
onClick: handleClick
|
|
2477
|
+
}, rest));
|
|
2478
|
+
}
|
|
2479
|
+
return (() => {
|
|
2480
|
+
var _el$ = _tmpl$33();
|
|
2481
|
+
_el$.$$click = handleClick;
|
|
2482
|
+
spread(_el$, mergeProps({
|
|
2483
|
+
get ["class"]() {
|
|
2484
|
+
return style(local.appearanceKey || "popoverClose", local.class);
|
|
2485
|
+
}
|
|
2486
|
+
}, rest), false, false);
|
|
2487
|
+
return _el$;
|
|
2488
|
+
})();
|
|
2489
|
+
};
|
|
2490
|
+
delegateEvents(["click"]);
|
|
2491
|
+
var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
|
|
2492
|
+
var Portal2 = (props) => {
|
|
2493
|
+
const appearance = useAppearance();
|
|
2494
|
+
let currentElement;
|
|
2495
|
+
return [(() => {
|
|
2496
|
+
var _el$ = _tmpl$34();
|
|
2497
|
+
use((el) => {
|
|
2498
|
+
currentElement = el;
|
|
2499
|
+
}, _el$);
|
|
2500
|
+
_el$.style.setProperty("display", "none");
|
|
2501
|
+
return _el$;
|
|
2502
|
+
})(), createComponent(Portal, mergeProps({
|
|
2503
|
+
get mount() {
|
|
2504
|
+
return closestNovuRootParent(currentElement, appearance.id());
|
|
2505
|
+
}
|
|
2506
|
+
}, props))];
|
|
2507
|
+
};
|
|
2508
|
+
var closestNovuRootParent = (el, id) => {
|
|
2509
|
+
let element = el;
|
|
2510
|
+
while (element && element.id !== `novu-root-${id}`) {
|
|
2511
|
+
element = element.parentElement;
|
|
2512
|
+
}
|
|
2513
|
+
if (element && element.id === `novu-root-${id}`) {
|
|
2514
|
+
return element;
|
|
2515
|
+
}
|
|
2516
|
+
return void 0;
|
|
2517
|
+
};
|
|
2518
|
+
var PopoverContext = createContext(void 0);
|
|
2519
|
+
function PopoverRoot(props) {
|
|
2520
|
+
var _a;
|
|
2521
|
+
const [uncontrolledIsOpen, setUncontrolledIsOpen] = createSignal((_a = props.open) != null ? _a : false);
|
|
2522
|
+
const onOpenChange = () => {
|
|
2523
|
+
var _a2;
|
|
2524
|
+
return (_a2 = props.onOpenChange) != null ? _a2 : setUncontrolledIsOpen;
|
|
2525
|
+
};
|
|
2526
|
+
const open = () => {
|
|
2527
|
+
var _a2;
|
|
2528
|
+
return (_a2 = props.open) != null ? _a2 : uncontrolledIsOpen();
|
|
2529
|
+
};
|
|
2530
|
+
const [reference, setReference] = createSignal(null);
|
|
2531
|
+
const [floating, setFloating] = createSignal(null);
|
|
2532
|
+
const position = useFloating(reference, floating, {
|
|
2533
|
+
strategy: "absolute",
|
|
2534
|
+
placement: props.placement,
|
|
2535
|
+
whileElementsMounted: autoUpdate,
|
|
2536
|
+
middleware: [offset(10), flip({
|
|
2537
|
+
fallbackPlacements: props.fallbackPlacements
|
|
2538
|
+
}), shift()]
|
|
2539
|
+
});
|
|
2540
|
+
const floatingStyles = createMemo(() => {
|
|
2541
|
+
var _a2, _b;
|
|
2542
|
+
return {
|
|
2543
|
+
position: position.strategy,
|
|
2544
|
+
top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
|
|
2545
|
+
left: `${(_b = position.x) != null ? _b : 0}px`
|
|
2546
|
+
};
|
|
2547
|
+
});
|
|
2548
|
+
const onClose = () => {
|
|
2549
|
+
onOpenChange()(false);
|
|
2550
|
+
};
|
|
2551
|
+
const onToggle = () => {
|
|
2552
|
+
onOpenChange()((prev) => !prev);
|
|
2553
|
+
};
|
|
2554
|
+
return createComponent(PopoverContext.Provider, {
|
|
2555
|
+
value: {
|
|
2556
|
+
onToggle,
|
|
2557
|
+
onClose,
|
|
2558
|
+
reference,
|
|
2559
|
+
setReference,
|
|
2560
|
+
floating,
|
|
2561
|
+
setFloating,
|
|
2562
|
+
open,
|
|
2563
|
+
floatingStyles
|
|
2564
|
+
},
|
|
2565
|
+
get children() {
|
|
2566
|
+
return props.children;
|
|
2567
|
+
}
|
|
2568
|
+
});
|
|
2569
|
+
}
|
|
2570
|
+
function usePopover() {
|
|
2571
|
+
const context = useContext(PopoverContext);
|
|
2572
|
+
if (!context) {
|
|
2573
|
+
throw new Error("usePopover must be used within Popover.Root component");
|
|
2574
|
+
}
|
|
2575
|
+
return context;
|
|
2576
|
+
}
|
|
2577
|
+
|
|
2578
|
+
// src/ui/components/primitives/Popover/PopoverContent.tsx
|
|
2579
|
+
var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
|
|
2580
|
+
var popoverContentVariants = () => cn("nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background", "nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden nt-border nt-border-border nt-z-10");
|
|
2581
|
+
var PopoverContentBody = (props) => {
|
|
2582
|
+
const {
|
|
2583
|
+
open,
|
|
2584
|
+
setFloating,
|
|
2585
|
+
floating,
|
|
2586
|
+
floatingStyles
|
|
2587
|
+
} = usePopover();
|
|
2588
|
+
const {
|
|
2589
|
+
setActive,
|
|
2590
|
+
removeActive
|
|
2591
|
+
} = useFocusManager();
|
|
2592
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "style"]);
|
|
2593
|
+
const style = useStyle();
|
|
2594
|
+
onMount(() => {
|
|
2595
|
+
const floatingEl = floating();
|
|
2596
|
+
setActive(floatingEl);
|
|
2597
|
+
onCleanup(() => {
|
|
2598
|
+
removeActive(floatingEl);
|
|
2599
|
+
});
|
|
2600
|
+
});
|
|
2601
|
+
return (() => {
|
|
2602
|
+
var _el$ = _tmpl$35();
|
|
2603
|
+
use(setFloating, _el$);
|
|
2604
|
+
spread(_el$, mergeProps({
|
|
2605
|
+
get ["class"]() {
|
|
2606
|
+
return style(local.appearanceKey || "popoverContent", cn(popoverContentVariants(), local.class));
|
|
2607
|
+
},
|
|
2608
|
+
get style() {
|
|
2609
|
+
return floatingStyles();
|
|
2610
|
+
},
|
|
2611
|
+
get ["data-open"]() {
|
|
2612
|
+
return open();
|
|
2613
|
+
}
|
|
2614
|
+
}, rest), false, false);
|
|
2615
|
+
return _el$;
|
|
2616
|
+
})();
|
|
2617
|
+
};
|
|
2618
|
+
var PopoverContent = (props) => {
|
|
2619
|
+
const {
|
|
2620
|
+
open,
|
|
2621
|
+
onClose,
|
|
2622
|
+
reference,
|
|
2623
|
+
floating
|
|
2624
|
+
} = usePopover();
|
|
2625
|
+
const {
|
|
2626
|
+
active
|
|
2627
|
+
} = useFocusManager();
|
|
2628
|
+
const {
|
|
2629
|
+
container
|
|
2630
|
+
} = useAppearance();
|
|
2631
|
+
const handleClickOutside = (e) => {
|
|
2632
|
+
var _a, _b;
|
|
2633
|
+
if ((_a = reference()) == null ? void 0 : _a.contains(e.target)) {
|
|
2634
|
+
return;
|
|
2635
|
+
}
|
|
2636
|
+
const containerElement = container();
|
|
2637
|
+
if (active() !== floating() || ((_b = floating()) == null ? void 0 : _b.contains(e.target)) || containerElement && e.target.shadowRoot === containerElement) {
|
|
2638
|
+
return;
|
|
2639
|
+
}
|
|
2640
|
+
onClose();
|
|
2641
|
+
};
|
|
2642
|
+
const handleEscapeKey = (e) => {
|
|
2643
|
+
if (active() !== floating()) {
|
|
2644
|
+
return;
|
|
2645
|
+
}
|
|
2646
|
+
if (e instanceof KeyboardEvent && e.key === "Escape") {
|
|
2647
|
+
onClose();
|
|
2648
|
+
}
|
|
2649
|
+
};
|
|
2650
|
+
onMount(() => {
|
|
2651
|
+
var _a;
|
|
2652
|
+
document.body.addEventListener("click", handleClickOutside);
|
|
2653
|
+
(_a = container()) == null ? void 0 : _a.addEventListener("click", handleClickOutside);
|
|
2654
|
+
document.body.addEventListener("keydown", handleEscapeKey);
|
|
2655
|
+
});
|
|
2656
|
+
onCleanup(() => {
|
|
2657
|
+
var _a;
|
|
2658
|
+
document.body.removeEventListener("click", handleClickOutside);
|
|
2659
|
+
(_a = container()) == null ? void 0 : _a.removeEventListener("click", handleClickOutside);
|
|
2660
|
+
document.body.removeEventListener("keydown", handleEscapeKey);
|
|
2661
|
+
});
|
|
2662
|
+
return createComponent(Show, {
|
|
2663
|
+
get when() {
|
|
2664
|
+
return open();
|
|
2665
|
+
},
|
|
2666
|
+
get children() {
|
|
2667
|
+
return createComponent(Portal2, {
|
|
2668
|
+
get children() {
|
|
2669
|
+
return createComponent(PopoverContentBody, props);
|
|
2670
|
+
}
|
|
2671
|
+
});
|
|
2672
|
+
}
|
|
2673
|
+
});
|
|
2674
|
+
};
|
|
2675
|
+
var _tmpl$36 = /* @__PURE__ */ template(`<button>`);
|
|
2676
|
+
var PopoverTrigger = (props) => {
|
|
2677
|
+
const {
|
|
2678
|
+
setReference,
|
|
2679
|
+
onToggle
|
|
2680
|
+
} = usePopover();
|
|
2681
|
+
const style = useStyle();
|
|
2682
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
|
|
2683
|
+
const handleClick = (e) => {
|
|
2684
|
+
if (typeof local.onClick === "function") {
|
|
2685
|
+
local.onClick(e);
|
|
2686
|
+
}
|
|
2687
|
+
onToggle();
|
|
2688
|
+
};
|
|
2689
|
+
const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
2690
|
+
if (local.asChild) {
|
|
2691
|
+
return createComponent(Dynamic, mergeProps({
|
|
2692
|
+
get component() {
|
|
2693
|
+
return local.asChild;
|
|
2694
|
+
},
|
|
2695
|
+
ref(r$) {
|
|
2696
|
+
var _ref$ = ref();
|
|
2697
|
+
typeof _ref$ === "function" && _ref$(r$);
|
|
2698
|
+
},
|
|
2699
|
+
onClick: handleClick
|
|
2700
|
+
}, rest));
|
|
2701
|
+
}
|
|
2702
|
+
return (() => {
|
|
2703
|
+
var _el$ = _tmpl$36();
|
|
2704
|
+
_el$.$$click = handleClick;
|
|
2705
|
+
var _ref$2 = ref();
|
|
2706
|
+
typeof _ref$2 === "function" && use(_ref$2, _el$);
|
|
2707
|
+
spread(_el$, mergeProps({
|
|
2708
|
+
get ["class"]() {
|
|
2709
|
+
return style(local.appearanceKey || "dropdownTrigger");
|
|
2710
|
+
}
|
|
2711
|
+
}, rest), false, true);
|
|
2712
|
+
insert(_el$, () => props.children);
|
|
2713
|
+
return _el$;
|
|
2714
|
+
})();
|
|
2715
|
+
};
|
|
2716
|
+
delegateEvents(["click"]);
|
|
2717
|
+
|
|
2718
|
+
// src/ui/components/primitives/Popover/index.ts
|
|
2719
|
+
var Popover = {
|
|
2720
|
+
Root: PopoverRoot,
|
|
2721
|
+
/**
|
|
2722
|
+
* Popover.Trigger renders a `button` and has no default styling.
|
|
2723
|
+
*/
|
|
2724
|
+
Trigger: PopoverTrigger,
|
|
2725
|
+
/**
|
|
2726
|
+
* Popover.Content renders a `div` and has popover specific styling.
|
|
2727
|
+
*/
|
|
2728
|
+
Content: PopoverContent,
|
|
2729
|
+
/**
|
|
2730
|
+
* Popover.Close renders a `button` and has no styling.
|
|
2731
|
+
* Closes the popover when clicked.
|
|
2732
|
+
* `onClick` function is propagated.
|
|
2733
|
+
*/
|
|
2734
|
+
Close: PopoverClose
|
|
2735
|
+
};
|
|
2736
|
+
var dropdownContentVariants = () => "nt-p-1 nt-text-sm nt-min-w-52 nt-shadow-dropdown nt-h-fit nt-min-w-52 nt-w-max";
|
|
2737
|
+
var DropdownContent = (props) => {
|
|
2738
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
|
|
2739
|
+
return createComponent(Popover.Content, mergeProps({
|
|
2740
|
+
get appearanceKey() {
|
|
2741
|
+
return local.appearanceKey || "dropdownContent";
|
|
2742
|
+
},
|
|
2743
|
+
get ["class"]() {
|
|
2744
|
+
return cn(dropdownContentVariants(), local.class);
|
|
2745
|
+
}
|
|
2746
|
+
}, rest));
|
|
2747
|
+
};
|
|
2748
|
+
var dropdownItemVariants = () => "focus:nt-outline-none nt-flex nt-items-center nt-gap-1.5 nt-text-sm nt-rounded-lg nt-items-center hover:nt-bg-neutral-alpha-50 focus-visible:nt-bg-neutral-alpha-50 nt-py-1 nt-px-2";
|
|
2749
|
+
var DropdownItem = (props) => {
|
|
2750
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "onClick", "class", "asChild"]);
|
|
2751
|
+
const {
|
|
2752
|
+
onClose
|
|
2753
|
+
} = usePopover();
|
|
2754
|
+
const handleClick = (e) => {
|
|
2755
|
+
if (typeof local.onClick === "function") {
|
|
2756
|
+
local.onClick(e);
|
|
2757
|
+
}
|
|
2758
|
+
onClose();
|
|
2759
|
+
};
|
|
2760
|
+
if (local.asChild) {
|
|
2761
|
+
return createComponent(Dynamic, mergeProps({
|
|
2762
|
+
get component() {
|
|
2763
|
+
return local.asChild;
|
|
2764
|
+
},
|
|
2765
|
+
onClick: handleClick
|
|
2766
|
+
}, rest));
|
|
2767
|
+
}
|
|
2768
|
+
return createComponent(Popover.Close, mergeProps({
|
|
2769
|
+
get appearanceKey() {
|
|
2770
|
+
return local.appearanceKey || "dropdownItem";
|
|
2771
|
+
},
|
|
2772
|
+
get ["class"]() {
|
|
2773
|
+
return cn(dropdownItemVariants(), local.class);
|
|
2774
|
+
},
|
|
2775
|
+
onClick: (e) => {
|
|
2776
|
+
if (typeof local.onClick === "function") {
|
|
2777
|
+
local.onClick(e);
|
|
2778
|
+
}
|
|
2779
|
+
onClose();
|
|
2780
|
+
}
|
|
2781
|
+
}, rest));
|
|
2782
|
+
};
|
|
2783
|
+
var DropdownRoot = (props) => {
|
|
2784
|
+
return createComponent(Popover.Root, mergeProps({
|
|
2785
|
+
placement: "bottom",
|
|
2786
|
+
fallbackPlacements: ["top"]
|
|
2787
|
+
}, props));
|
|
2788
|
+
};
|
|
2789
|
+
var dropdownTriggerButtonVariants = () => `nt-relative nt-transition nt-outline-none focus-visible:nt-outline-nonefocus-visible:nt-ring-2 focus-visible:nt-ring-primary focus-visible:nt-ring-offset-2`;
|
|
2790
|
+
var DropdownTrigger = (props) => {
|
|
2791
|
+
const style = useStyle();
|
|
2792
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
|
|
2793
|
+
return createComponent(Popover.Trigger, mergeProps({
|
|
2794
|
+
get ["class"]() {
|
|
2795
|
+
return style(local.appearanceKey || "dropdownTrigger", cn(dropdownTriggerButtonVariants(), local.class));
|
|
2796
|
+
}
|
|
2797
|
+
}, rest));
|
|
2798
|
+
};
|
|
2799
|
+
|
|
2800
|
+
// src/ui/components/primitives/Dropdown/index.ts
|
|
2801
|
+
var Dropdown = {
|
|
2802
|
+
Root: DropdownRoot,
|
|
2803
|
+
/**
|
|
2804
|
+
* Dropdown.Trigger renders a `button` and has no default styling.
|
|
2805
|
+
*/
|
|
2806
|
+
Trigger: DropdownTrigger,
|
|
2807
|
+
/**
|
|
2808
|
+
* Dropdown.Content renders a `Popover.Content` by default.
|
|
2809
|
+
*/
|
|
2810
|
+
Content: DropdownContent,
|
|
2811
|
+
/**
|
|
2812
|
+
* Dropdown.Close renders a `Popover.Close` by default.
|
|
2813
|
+
*/
|
|
2814
|
+
Close: Popover.Close,
|
|
2815
|
+
/**
|
|
2816
|
+
* Dropdown.Item renders a `Popover.Close` with dropdown specific styling.
|
|
2817
|
+
* Closes the popover when clicked.
|
|
2818
|
+
* `onClick` function is propagated.
|
|
2819
|
+
*/
|
|
2820
|
+
Item: DropdownItem
|
|
2821
|
+
};
|
|
2822
|
+
var useKeyboardNavigation = ({
|
|
2823
|
+
activeTab,
|
|
2824
|
+
setActiveTab,
|
|
2825
|
+
tabsContainer
|
|
2826
|
+
}) => {
|
|
2827
|
+
const { container } = useAppearance();
|
|
2828
|
+
const [keyboardNavigation, setKeyboardNavigation] = createSignal(false);
|
|
2829
|
+
const getRoot = () => {
|
|
2830
|
+
const containerElement = container();
|
|
2831
|
+
return containerElement instanceof ShadowRoot ? containerElement : document;
|
|
2832
|
+
};
|
|
2833
|
+
createEffect(() => {
|
|
2834
|
+
const root = getRoot();
|
|
2835
|
+
const handleTabKey = (event) => {
|
|
2836
|
+
var _a;
|
|
2837
|
+
if (!(event instanceof KeyboardEvent) || event.key !== "Tab") {
|
|
2838
|
+
return;
|
|
2839
|
+
}
|
|
2840
|
+
const tabs = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]');
|
|
2841
|
+
if (!tabs || !root.activeElement) {
|
|
2842
|
+
return;
|
|
2843
|
+
}
|
|
2844
|
+
setKeyboardNavigation(Array.from(tabs).includes(root.activeElement));
|
|
2845
|
+
};
|
|
2846
|
+
root.addEventListener("keyup", handleTabKey);
|
|
2847
|
+
return onCleanup(() => root.removeEventListener("keyup", handleTabKey));
|
|
2848
|
+
});
|
|
2849
|
+
createEffect(() => {
|
|
2850
|
+
const root = getRoot();
|
|
2851
|
+
const handleArrowKeys = (event) => {
|
|
2852
|
+
var _a, _b;
|
|
2853
|
+
if (!keyboardNavigation() || !(event instanceof KeyboardEvent) || event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
|
|
2854
|
+
return;
|
|
2855
|
+
}
|
|
2856
|
+
const tabElements = Array.from((_b = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]')) != null ? _b : []);
|
|
2857
|
+
const tabIds = tabElements.map((tab) => tab.id);
|
|
2858
|
+
const currentIndex = tabIds.indexOf(activeTab());
|
|
2859
|
+
const { length } = tabIds;
|
|
2860
|
+
let activeIndex = currentIndex;
|
|
2861
|
+
let newTab = activeTab();
|
|
2862
|
+
if (event.key === "ArrowLeft") {
|
|
2863
|
+
activeIndex = currentIndex === 0 ? length - 1 : currentIndex - 1;
|
|
2864
|
+
newTab = tabIds[activeIndex];
|
|
2865
|
+
} else if (event.key === "ArrowRight") {
|
|
2866
|
+
activeIndex = currentIndex === length - 1 ? 0 : currentIndex + 1;
|
|
2867
|
+
newTab = tabIds[activeIndex];
|
|
2868
|
+
}
|
|
2869
|
+
tabElements[activeIndex].focus();
|
|
2870
|
+
setActiveTab(newTab);
|
|
2871
|
+
};
|
|
2872
|
+
root.addEventListener("keydown", handleArrowKeys);
|
|
2873
|
+
return onCleanup(() => root.removeEventListener("keydown", handleArrowKeys));
|
|
2874
|
+
});
|
|
2875
|
+
};
|
|
2876
|
+
|
|
2877
|
+
// src/ui/components/primitives/Tabs/TabsRoot.tsx
|
|
2878
|
+
var _tmpl$37 = /* @__PURE__ */ template(`<div>`);
|
|
2879
|
+
var TabsContext = createContext(void 0);
|
|
2880
|
+
var useTabsContext = () => {
|
|
2881
|
+
const context = useContext(TabsContext);
|
|
2882
|
+
if (!context) {
|
|
2883
|
+
throw new Error("useTabsContext must be used within an TabsContext.Provider");
|
|
2884
|
+
}
|
|
2885
|
+
return context;
|
|
2886
|
+
};
|
|
2887
|
+
var tabsRootVariants = () => "nt-flex nt-flex-col";
|
|
2888
|
+
var TabsRoot = (props) => {
|
|
2889
|
+
var _a;
|
|
2890
|
+
const [local, rest] = splitProps(props, ["defaultValue", "value", "class", "appearanceKey", "onChange", "children"]);
|
|
2891
|
+
const [tabsContainer, setTabsContainer] = createSignal();
|
|
2892
|
+
const [visibleTabs, setVisibleTabs] = createSignal([]);
|
|
2893
|
+
const [activeTab, setActiveTab] = createSignal((_a = local.defaultValue) != null ? _a : "");
|
|
2894
|
+
const style = useStyle();
|
|
2895
|
+
useKeyboardNavigation({
|
|
2896
|
+
tabsContainer,
|
|
2897
|
+
activeTab,
|
|
2898
|
+
setActiveTab
|
|
2899
|
+
});
|
|
2900
|
+
createEffect(() => {
|
|
2901
|
+
if (local.value) {
|
|
2902
|
+
setActiveTab(local.value);
|
|
2903
|
+
}
|
|
2904
|
+
});
|
|
2905
|
+
createEffect(() => {
|
|
2906
|
+
var _a2;
|
|
2907
|
+
(_a2 = local.onChange) == null ? void 0 : _a2.call(local, activeTab());
|
|
2908
|
+
});
|
|
2909
|
+
return createComponent(TabsContext.Provider, {
|
|
2910
|
+
value: {
|
|
2911
|
+
activeTab,
|
|
2912
|
+
setActiveTab,
|
|
2913
|
+
visibleTabs,
|
|
2914
|
+
setVisibleTabs
|
|
2915
|
+
},
|
|
2916
|
+
get children() {
|
|
2917
|
+
var _el$ = _tmpl$37();
|
|
2918
|
+
use(setTabsContainer, _el$);
|
|
2919
|
+
spread(_el$, mergeProps({
|
|
2920
|
+
get ["class"]() {
|
|
2921
|
+
return style(local.appearanceKey || "tabsRoot", cn(tabsRootVariants(), local.class));
|
|
2922
|
+
}
|
|
2923
|
+
}, rest), false, true);
|
|
2924
|
+
insert(_el$, () => local.children);
|
|
2925
|
+
return _el$;
|
|
2926
|
+
}
|
|
2927
|
+
});
|
|
2928
|
+
};
|
|
2929
|
+
|
|
2930
|
+
// src/ui/components/primitives/Tabs/TabsContent.tsx
|
|
2931
|
+
var _tmpl$38 = /* @__PURE__ */ template(`<div role=tabpanel>`);
|
|
2932
|
+
var TabsContent = (props) => {
|
|
2933
|
+
const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
|
|
2934
|
+
const style = useStyle();
|
|
2935
|
+
const {
|
|
2936
|
+
activeTab
|
|
2937
|
+
} = useTabsContext();
|
|
2938
|
+
return createComponent(Show, {
|
|
2939
|
+
get when() {
|
|
2940
|
+
return activeTab() === local.value;
|
|
2941
|
+
},
|
|
2942
|
+
get children() {
|
|
2943
|
+
var _el$ = _tmpl$38();
|
|
2944
|
+
spread(_el$, mergeProps({
|
|
2945
|
+
get ["class"]() {
|
|
2946
|
+
return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
|
|
2947
|
+
},
|
|
2948
|
+
get id() {
|
|
2949
|
+
return `tabpanel-${local.value}`;
|
|
2950
|
+
},
|
|
2951
|
+
get ["aria-labelledby"]() {
|
|
2952
|
+
return local.value;
|
|
2953
|
+
},
|
|
2954
|
+
get ["data-state"]() {
|
|
2955
|
+
return activeTab() === local.value ? "active" : "inactive";
|
|
2956
|
+
}
|
|
2957
|
+
}, rest), false, true);
|
|
2958
|
+
insert(_el$, () => local.children);
|
|
2959
|
+
return _el$;
|
|
2960
|
+
}
|
|
2961
|
+
});
|
|
2962
|
+
};
|
|
2963
|
+
var _tmpl$39 = /* @__PURE__ */ template(`<div role=tablist>`);
|
|
2964
|
+
var _tmpl$211 = /* @__PURE__ */ template(`<div class="nt-relative nt-z-[-1]">`);
|
|
2965
|
+
var tabsListVariants = () => "nt-flex nt-gap-6";
|
|
2310
2966
|
var TabsList = (props) => {
|
|
2311
2967
|
const [local, rest] = splitProps(props, ["class", "appearanceKey", "ref", "children"]);
|
|
2312
2968
|
const style = useStyle();
|
|
2313
2969
|
return [(() => {
|
|
2314
|
-
var _el$ = _tmpl$
|
|
2970
|
+
var _el$ = _tmpl$39();
|
|
2315
2971
|
var _ref$ = local.ref;
|
|
2316
2972
|
typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
|
|
2317
2973
|
spread(_el$, mergeProps({
|
|
@@ -2321,7 +2977,7 @@ var TabsList = (props) => {
|
|
|
2321
2977
|
}, rest), false, true);
|
|
2322
2978
|
insert(_el$, () => local.children);
|
|
2323
2979
|
return _el$;
|
|
2324
|
-
})(), _tmpl$
|
|
2980
|
+
})(), _tmpl$211()];
|
|
2325
2981
|
};
|
|
2326
2982
|
var tabsTriggerVariants = () => cn("nt-relative nt-transition nt-outline-none nt-text-foreground-alpha-600 nt-pb-[0.625rem]", `after:nt-absolute after:nt-content-[''] after:nt-bottom-0 after:nt-left-0 after:nt-w-full after:nt-h-[2px]`, "after:nt-transition-opacity after:nt-duration-200", "data-[state=active]:after:nt-border-b-2 data-[state=active]:after:nt-border-primary data-[state=active]:after:nt-opacity-100", "data-[state=active]:nt-text-foreground after:nt-border-b-transparent after:nt-opacity-0", "focus-visible:nt-outline-none focus-visible:nt-rounded-lg focus-visible:nt-ring-2 focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2");
|
|
2327
2983
|
var TabsTrigger = (props) => {
|
|
@@ -2392,8 +3048,8 @@ var inboxFilterLocalizationKeys = {
|
|
|
2392
3048
|
archived: "inbox.filters.labels.archived",
|
|
2393
3049
|
snoozed: "inbox.filters.labels.snoozed"
|
|
2394
3050
|
};
|
|
2395
|
-
var _tmpl$
|
|
2396
|
-
var _tmpl$
|
|
3051
|
+
var _tmpl$40 = /* @__PURE__ */ template(`<span><span>`);
|
|
3052
|
+
var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
|
|
2397
3053
|
var cases = [{
|
|
2398
3054
|
status: "unreadRead" /* UNREAD_READ */,
|
|
2399
3055
|
iconKey: "unread",
|
|
@@ -2461,7 +3117,7 @@ var StatusItem = (props) => {
|
|
|
2461
3117
|
},
|
|
2462
3118
|
get children() {
|
|
2463
3119
|
return [(() => {
|
|
2464
|
-
var _el$ = _tmpl$
|
|
3120
|
+
var _el$ = _tmpl$40(), _el$2 = _el$.firstChild;
|
|
2465
3121
|
insert(_el$, createComponent(IconRendererWrapper, {
|
|
2466
3122
|
get iconKey() {
|
|
2467
3123
|
return props.iconKey;
|
|
@@ -2469,7 +3125,7 @@ var StatusItem = (props) => {
|
|
|
2469
3125
|
"class": itemIconClass,
|
|
2470
3126
|
get fallback() {
|
|
2471
3127
|
return (() => {
|
|
2472
|
-
var _el$3 = _tmpl$
|
|
3128
|
+
var _el$3 = _tmpl$212();
|
|
2473
3129
|
className(_el$3, itemIconClass);
|
|
2474
3130
|
insert(_el$3, () => props.icon());
|
|
2475
3131
|
return _el$3;
|
|
@@ -2510,7 +3166,7 @@ var StatusItem = (props) => {
|
|
|
2510
3166
|
};
|
|
2511
3167
|
|
|
2512
3168
|
// src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
|
|
2513
|
-
var _tmpl$
|
|
3169
|
+
var _tmpl$41 = /* @__PURE__ */ template(`<span>`);
|
|
2514
3170
|
var StatusDropdown = () => {
|
|
2515
3171
|
const style = useStyle();
|
|
2516
3172
|
const {
|
|
@@ -2538,7 +3194,7 @@ var StatusDropdown = () => {
|
|
|
2538
3194
|
}, triggerProps, {
|
|
2539
3195
|
get children() {
|
|
2540
3196
|
return [(() => {
|
|
2541
|
-
var _el$ = _tmpl$
|
|
3197
|
+
var _el$ = _tmpl$41();
|
|
2542
3198
|
insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
|
|
2543
3199
|
effect((_p$) => {
|
|
2544
3200
|
var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
|
|
@@ -2696,7 +3352,7 @@ var useReadAll = (props) => {
|
|
|
2696
3352
|
};
|
|
2697
3353
|
|
|
2698
3354
|
// src/ui/components/elements/Header/MoreActionsOptions.tsx
|
|
2699
|
-
var _tmpl$
|
|
3355
|
+
var _tmpl$43 = /* @__PURE__ */ template(`<span>`);
|
|
2700
3356
|
var iconKeyToComponentMap = {
|
|
2701
3357
|
markAsRead: MarkAsRead,
|
|
2702
3358
|
markAsArchived: MarkAsArchived,
|
|
@@ -2766,7 +3422,7 @@ var ActionsItem = (props) => {
|
|
|
2766
3422
|
});
|
|
2767
3423
|
}
|
|
2768
3424
|
}), (() => {
|
|
2769
|
-
var _el$ = _tmpl$
|
|
3425
|
+
var _el$ = _tmpl$43();
|
|
2770
3426
|
insert(_el$, () => t(props.localizationKey));
|
|
2771
3427
|
effect((_p$) => {
|
|
2772
3428
|
var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
|
|
@@ -2832,14 +3488,14 @@ var MoreActionsDropdown = () => {
|
|
|
2832
3488
|
};
|
|
2833
3489
|
|
|
2834
3490
|
// src/ui/components/elements/Header/ActionsContainer.tsx
|
|
2835
|
-
var _tmpl$
|
|
3491
|
+
var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
|
|
2836
3492
|
var ActionsContainer = (props) => {
|
|
2837
3493
|
const style = useStyle();
|
|
2838
3494
|
const cogsIconClass = style("icon", "nt-size-5", {
|
|
2839
3495
|
iconKey: "cogs"
|
|
2840
3496
|
});
|
|
2841
3497
|
return (() => {
|
|
2842
|
-
var _el$ = _tmpl$
|
|
3498
|
+
var _el$ = _tmpl$44();
|
|
2843
3499
|
insert(_el$, createComponent(MoreActionsDropdown, {}), null);
|
|
2844
3500
|
insert(_el$, createComponent(Show, {
|
|
2845
3501
|
get when() {
|
|
@@ -2871,11 +3527,11 @@ var ActionsContainer = (props) => {
|
|
|
2871
3527
|
};
|
|
2872
3528
|
|
|
2873
3529
|
// src/ui/components/elements/Header/Header.tsx
|
|
2874
|
-
var _tmpl$
|
|
3530
|
+
var _tmpl$45 = /* @__PURE__ */ template(`<div>`);
|
|
2875
3531
|
var Header = (props) => {
|
|
2876
3532
|
const style = useStyle();
|
|
2877
3533
|
return (() => {
|
|
2878
|
-
var _el$ = _tmpl$
|
|
3534
|
+
var _el$ = _tmpl$45();
|
|
2879
3535
|
insert(_el$, createComponent(StatusDropdown, {}), null);
|
|
2880
3536
|
insert(_el$, createComponent(ActionsContainer, {
|
|
2881
3537
|
get showPreferences() {
|
|
@@ -2886,7 +3542,7 @@ var Header = (props) => {
|
|
|
2886
3542
|
return _el$;
|
|
2887
3543
|
})();
|
|
2888
3544
|
};
|
|
2889
|
-
var _tmpl$
|
|
3545
|
+
var _tmpl$46 = /* @__PURE__ */ template(`<div>`);
|
|
2890
3546
|
var Root = (props) => {
|
|
2891
3547
|
const [_, rest] = splitProps(props, ["class"]);
|
|
2892
3548
|
const {
|
|
@@ -2902,7 +3558,7 @@ var Root = (props) => {
|
|
|
2902
3558
|
},
|
|
2903
3559
|
children: new Comment(" Powered by Novu - https://novu.co ")
|
|
2904
3560
|
}), (() => {
|
|
2905
|
-
var _el$ = _tmpl$
|
|
3561
|
+
var _el$ = _tmpl$46();
|
|
2906
3562
|
spread(_el$, mergeProps({
|
|
2907
3563
|
get id() {
|
|
2908
3564
|
return `novu-root-${id()}`;
|
|
@@ -2914,15 +3570,15 @@ var Root = (props) => {
|
|
|
2914
3570
|
return _el$;
|
|
2915
3571
|
})()];
|
|
2916
3572
|
};
|
|
2917
|
-
var _tmpl$
|
|
3573
|
+
var _tmpl$47 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 14 14"><path fill=currentColor d="M2.8 8.575V5.162a2.362 2.362 0 1 1 4.725 0v3.675a1.313 1.313 0 1 0 2.625 0V5.335a1.575 1.575 0 1 1 1.05 0v3.502a2.362 2.362 0 1 1-4.725 0V5.162a1.312 1.312 0 1 0-2.625 0v3.413h1.575l-2.1 2.625-2.1-2.625H2.8Z"></path><path fill=url(#a) d="M2.8 8.575V5.162a2.362 2.362 0 1 1 4.725 0v3.675a1.313 1.313 0 1 0 2.625 0V5.335a1.575 1.575 0 1 1 1.05 0v3.502a2.362 2.362 0 1 1-4.725 0V5.162a1.312 1.312 0 1 0-2.625 0v3.413h1.575l-2.1 2.625-2.1-2.625H2.8Z"></path><defs><linearGradient id=a x1=1.225 x2=12.251 y1=6.722 y2=6.779 gradientUnits=userSpaceOnUse><stop stop-color=currentColor></stop><stop offset=1 stop-color=currentColor>`);
|
|
2918
3574
|
var RouteFill = (props) => {
|
|
2919
3575
|
return (() => {
|
|
2920
|
-
var _el$ = _tmpl$
|
|
3576
|
+
var _el$ = _tmpl$47();
|
|
2921
3577
|
spread(_el$, props, true, true);
|
|
2922
3578
|
return _el$;
|
|
2923
3579
|
})();
|
|
2924
3580
|
};
|
|
2925
|
-
var _tmpl$
|
|
3581
|
+
var _tmpl$48 = /* @__PURE__ */ template(`<div><div>`);
|
|
2926
3582
|
var isInterpolateSizeSupported = () => {
|
|
2927
3583
|
return CSS.supports("interpolate-size", "allow-keywords");
|
|
2928
3584
|
};
|
|
@@ -2955,7 +3611,7 @@ var Collapsible = (props) => {
|
|
|
2955
3611
|
return props.open ? `${scrollHeight()}px` : "0px";
|
|
2956
3612
|
};
|
|
2957
3613
|
return (() => {
|
|
2958
|
-
var _el$ = _tmpl$
|
|
3614
|
+
var _el$ = _tmpl$48(), _el$2 = _el$.firstChild;
|
|
2959
3615
|
spread(_el$, mergeProps({
|
|
2960
3616
|
get ["class"]() {
|
|
2961
3617
|
return style("collapsible", props.class);
|
|
@@ -2975,7 +3631,7 @@ var Collapsible = (props) => {
|
|
|
2975
3631
|
return _el$;
|
|
2976
3632
|
})();
|
|
2977
3633
|
};
|
|
2978
|
-
var _tmpl$
|
|
3634
|
+
var _tmpl$49 = /* @__PURE__ */ template(`<label><input type=checkbox class=nt-sr-only><div>`);
|
|
2979
3635
|
var Switch = (props) => {
|
|
2980
3636
|
const style = useStyle();
|
|
2981
3637
|
const handleChange = () => {
|
|
@@ -3001,7 +3657,7 @@ var Switch = (props) => {
|
|
|
3001
3657
|
const state = () => props.state;
|
|
3002
3658
|
const disabled = () => props.disabled;
|
|
3003
3659
|
return (() => {
|
|
3004
|
-
var _el$ = _tmpl$
|
|
3660
|
+
var _el$ = _tmpl$49(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
3005
3661
|
_el$2.addEventListener("change", handleChange);
|
|
3006
3662
|
effect((_p$) => {
|
|
3007
3663
|
var _v$ = style("channelSwitch", cn("nt-relative nt-inline-flex nt-cursor-pointer nt-items-center", {
|
|
@@ -3027,7 +3683,7 @@ var Switch = (props) => {
|
|
|
3027
3683
|
};
|
|
3028
3684
|
|
|
3029
3685
|
// src/ui/components/elements/Preferences/ChannelRow.tsx
|
|
3030
|
-
var _tmpl$
|
|
3686
|
+
var _tmpl$50 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
|
|
3031
3687
|
var ChannelRow = (props) => {
|
|
3032
3688
|
const style = useStyle();
|
|
3033
3689
|
const updatePreference = (enabled) => __async(void 0, null, function* () {
|
|
@@ -3041,7 +3697,7 @@ var ChannelRow = (props) => {
|
|
|
3041
3697
|
const state = () => props.channel.state;
|
|
3042
3698
|
const channel = () => props.channel.channel;
|
|
3043
3699
|
return (() => {
|
|
3044
|
-
var _el$ = _tmpl$
|
|
3700
|
+
var _el$ = _tmpl$50(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
|
|
3045
3701
|
insert(_el$3, createComponent(ChannelIcon, {
|
|
3046
3702
|
appearanceKey: "channel__icon",
|
|
3047
3703
|
get channel() {
|
|
@@ -3164,8 +3820,8 @@ var getLabel = (channel) => {
|
|
|
3164
3820
|
};
|
|
3165
3821
|
|
|
3166
3822
|
// src/ui/components/elements/Preferences/PreferencesRow.tsx
|
|
3167
|
-
var _tmpl$
|
|
3168
|
-
var _tmpl$
|
|
3823
|
+
var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
|
|
3824
|
+
var _tmpl$213 = /* @__PURE__ */ template(`<div><div><div><div><span></span></div></div><span>`);
|
|
3169
3825
|
var _tmpl$310 = /* @__PURE__ */ template(`<span>`);
|
|
3170
3826
|
var iconKeyToComponentMap2 = {
|
|
3171
3827
|
cogs: Cogs,
|
|
@@ -3199,7 +3855,7 @@ var PreferencesRow = (props) => {
|
|
|
3199
3855
|
return channels().length > 0;
|
|
3200
3856
|
},
|
|
3201
3857
|
get children() {
|
|
3202
|
-
var _el$ = _tmpl$
|
|
3858
|
+
var _el$ = _tmpl$213(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$3.nextSibling;
|
|
3203
3859
|
_el$2.$$click = () => {
|
|
3204
3860
|
setIsOpenChannels((prev) => !prev);
|
|
3205
3861
|
};
|
|
@@ -3247,7 +3903,7 @@ var PreferencesRow = (props) => {
|
|
|
3247
3903
|
return isOpenChannels();
|
|
3248
3904
|
},
|
|
3249
3905
|
get children() {
|
|
3250
|
-
var _el$7 = _tmpl$
|
|
3906
|
+
var _el$7 = _tmpl$51();
|
|
3251
3907
|
insert(_el$7, createComponent(Index, {
|
|
3252
3908
|
get each() {
|
|
3253
3909
|
return channels();
|
|
@@ -3320,19 +3976,19 @@ var WorkflowDescription = (props) => {
|
|
|
3320
3976
|
return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
|
|
3321
3977
|
};
|
|
3322
3978
|
return (() => {
|
|
3323
|
-
var _el$9 = _tmpl$
|
|
3979
|
+
var _el$9 = _tmpl$51();
|
|
3324
3980
|
insert(_el$9, channelNames);
|
|
3325
3981
|
effect(() => className(_el$9, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
|
|
3326
3982
|
return _el$9;
|
|
3327
3983
|
})();
|
|
3328
3984
|
};
|
|
3329
3985
|
delegateEvents(["click"]);
|
|
3330
|
-
var _tmpl$
|
|
3331
|
-
var _tmpl$
|
|
3986
|
+
var _tmpl$53 = /* @__PURE__ */ template(`<div>`);
|
|
3987
|
+
var _tmpl$214 = /* @__PURE__ */ template(`<div><div></div><div>`);
|
|
3332
3988
|
var SkeletonText = (props) => {
|
|
3333
3989
|
const style = useStyle();
|
|
3334
3990
|
return (() => {
|
|
3335
|
-
var _el$ = _tmpl$
|
|
3991
|
+
var _el$ = _tmpl$53();
|
|
3336
3992
|
effect(() => className(_el$, style(props.appearanceKey, cn("nt-w-full nt-h-3 nt-rounded nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
|
|
3337
3993
|
return _el$;
|
|
3338
3994
|
})();
|
|
@@ -3340,7 +3996,7 @@ var SkeletonText = (props) => {
|
|
|
3340
3996
|
var SkeletonAvatar = (props) => {
|
|
3341
3997
|
const style = useStyle();
|
|
3342
3998
|
return (() => {
|
|
3343
|
-
var _el$2 = _tmpl$
|
|
3999
|
+
var _el$2 = _tmpl$53();
|
|
3344
4000
|
effect(() => className(_el$2, style(props.appearanceKey, cn("nt-size-8 nt-rounded-lg nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent", props.class))));
|
|
3345
4001
|
return _el$2;
|
|
3346
4002
|
})();
|
|
@@ -3348,7 +4004,7 @@ var SkeletonAvatar = (props) => {
|
|
|
3348
4004
|
var SkeletonSwitch = (props) => {
|
|
3349
4005
|
const style = useStyle();
|
|
3350
4006
|
return (() => {
|
|
3351
|
-
var _el$3 = _tmpl$
|
|
4007
|
+
var _el$3 = _tmpl$214(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
|
|
3352
4008
|
effect((_p$) => {
|
|
3353
4009
|
var _v$ = style(props.appearanceKey, cn("nt-relative nt-inline-flex nt-items-center", props.class)), _v$2 = style(props.appearanceKey, "nt-h-4 nt-w-7 nt-rounded-full nt-bg-gradient-to-r nt-from-foreground-alpha-50 nt-to-transparent"), _v$3 = style(props.thumbAppearanceKey, "nt-absolute nt-top-0.5 nt-left-0.5 nt-size-3 nt-rounded-full nt-bg-background nt-shadow");
|
|
3354
4010
|
_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
|
|
@@ -3365,7 +4021,7 @@ var SkeletonSwitch = (props) => {
|
|
|
3365
4021
|
};
|
|
3366
4022
|
|
|
3367
4023
|
// src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
|
|
3368
|
-
var _tmpl$
|
|
4024
|
+
var _tmpl$54 = /* @__PURE__ */ template(`<div>`);
|
|
3369
4025
|
var channelIcons = [InApp, Email, Sms, Push, Chat];
|
|
3370
4026
|
var PreferencesListSkeleton = (props) => {
|
|
3371
4027
|
const style = useStyle();
|
|
@@ -3373,7 +4029,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
3373
4029
|
t
|
|
3374
4030
|
} = useLocalization();
|
|
3375
4031
|
return (() => {
|
|
3376
|
-
var _el$ = _tmpl$
|
|
4032
|
+
var _el$ = _tmpl$54();
|
|
3377
4033
|
insert(_el$, createComponent(Motion.div, {
|
|
3378
4034
|
get animate() {
|
|
3379
4035
|
return {
|
|
@@ -3415,7 +4071,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
3415
4071
|
return style("preferencesList__skeletonIcon", "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100");
|
|
3416
4072
|
}
|
|
3417
4073
|
}), (() => {
|
|
3418
|
-
var _el$3 = _tmpl$
|
|
4074
|
+
var _el$3 = _tmpl$54();
|
|
3419
4075
|
insert(_el$3, createComponent(SkeletonText, {
|
|
3420
4076
|
appearanceKey: "notificationList__skeletonText",
|
|
3421
4077
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -3433,7 +4089,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
3433
4089
|
}
|
|
3434
4090
|
});
|
|
3435
4091
|
})), (() => {
|
|
3436
|
-
var _el$2 = _tmpl$
|
|
4092
|
+
var _el$2 = _tmpl$54();
|
|
3437
4093
|
effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
|
|
3438
4094
|
return _el$2;
|
|
3439
4095
|
})()];
|
|
@@ -3519,26 +4175,26 @@ var DefaultPreferences = (props) => {
|
|
|
3519
4175
|
}
|
|
3520
4176
|
});
|
|
3521
4177
|
};
|
|
3522
|
-
var _tmpl$
|
|
4178
|
+
var _tmpl$55 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 14 14"><path fill=currentColor d="M5.95 1.75c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H4.9v1.05h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V7H4.9v3.15h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V11.2h-3.15a.525.525 0 0 1-.525-.525V4.9H2.8a.525.525 0 0 1-.525-.525v-2.1c0-.29.235-.525.525-.525h3.15Zm4.725 8.4h-2.1v1.05h2.1v-1.05Zm0-4.2h-2.1V7h2.1V5.95ZM5.425 2.8h-2.1v1.05h2.1V2.8Z"></path><path fill=url(#a) d="M5.95 1.75c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H4.9v1.05h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V7H4.9v3.15h2.625v-.525c0-.29.235-.525.525-.525h3.15c.29 0 .525.235.525.525v2.1c0 .29-.235.525-.525.525H8.05a.525.525 0 0 1-.525-.525V11.2h-3.15a.525.525 0 0 1-.525-.525V4.9H2.8a.525.525 0 0 1-.525-.525v-2.1c0-.29.235-.525.525-.525h3.15Zm4.725 8.4h-2.1v1.05h2.1v-1.05Zm0-4.2h-2.1V7h2.1V5.95ZM5.425 2.8h-2.1v1.05h2.1V2.8Z"></path><defs><linearGradient id=a x1=2.275 x2=11.725 y1=6.982 y2=7.018 gradientUnits=userSpaceOnUse><stop stop-color=currentColor></stop><stop offset=1 stop-color=currentColor>`);
|
|
3523
4179
|
var NodeTree = (props) => {
|
|
3524
4180
|
return (() => {
|
|
3525
|
-
var _el$ = _tmpl$
|
|
4181
|
+
var _el$ = _tmpl$55();
|
|
3526
4182
|
spread(_el$, props, true, true);
|
|
3527
4183
|
return _el$;
|
|
3528
4184
|
})();
|
|
3529
4185
|
};
|
|
3530
|
-
var _tmpl$
|
|
4186
|
+
var _tmpl$56 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 16 16"><path fill=currentColor d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10Zm0-1a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm.5-4.75V9.5H9v1H7v-1h.5V8.25H7v-1h1.5ZM8.75 6a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z">`);
|
|
3531
4187
|
var Info = (props) => {
|
|
3532
4188
|
return (() => {
|
|
3533
|
-
var _el$ = _tmpl$
|
|
4189
|
+
var _el$ = _tmpl$56();
|
|
3534
4190
|
spread(_el$, props, true, true);
|
|
3535
4191
|
return _el$;
|
|
3536
4192
|
})();
|
|
3537
4193
|
};
|
|
3538
4194
|
|
|
3539
4195
|
// src/ui/components/elements/Preferences/GroupedPreferencesRow.tsx
|
|
3540
|
-
var _tmpl$
|
|
3541
|
-
var _tmpl$
|
|
4196
|
+
var _tmpl$57 = /* @__PURE__ */ template(`<div><div><span data-localization=preferences.group.info></span></div><div>`);
|
|
4197
|
+
var _tmpl$215 = /* @__PURE__ */ template(`<div><div><div><span></span></div><div><span>`);
|
|
3542
4198
|
var GroupedPreferencesRow = (props) => {
|
|
3543
4199
|
const style = useStyle();
|
|
3544
4200
|
const {
|
|
@@ -3603,7 +4259,7 @@ var GroupedPreferencesRow = (props) => {
|
|
|
3603
4259
|
return Object.keys(uniqueChannels()).length > 0;
|
|
3604
4260
|
},
|
|
3605
4261
|
get children() {
|
|
3606
|
-
var _el$ = _tmpl$
|
|
4262
|
+
var _el$ = _tmpl$215(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
|
|
3607
4263
|
_el$2.$$click = () => {
|
|
3608
4264
|
setIsOpened((prev) => !prev);
|
|
3609
4265
|
};
|
|
@@ -3637,7 +4293,7 @@ var GroupedPreferencesRow = (props) => {
|
|
|
3637
4293
|
return isOpened();
|
|
3638
4294
|
},
|
|
3639
4295
|
get children() {
|
|
3640
|
-
var _el$7 = _tmpl$
|
|
4296
|
+
var _el$7 = _tmpl$57(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$8.nextSibling;
|
|
3641
4297
|
insert(_el$8, createComponent(Index, {
|
|
3642
4298
|
get each() {
|
|
3643
4299
|
return Object.keys(uniqueChannels());
|
|
@@ -3761,7 +4417,7 @@ var GroupedPreferences = (props) => {
|
|
|
3761
4417
|
};
|
|
3762
4418
|
|
|
3763
4419
|
// src/ui/components/elements/Preferences/Preferences.tsx
|
|
3764
|
-
var _tmpl$
|
|
4420
|
+
var _tmpl$58 = /* @__PURE__ */ template(`<div>`);
|
|
3765
4421
|
var Preferences = () => {
|
|
3766
4422
|
var _a;
|
|
3767
4423
|
const novu = useNovu();
|
|
@@ -3848,7 +4504,7 @@ var Preferences = () => {
|
|
|
3848
4504
|
})) != null ? _c : [];
|
|
3849
4505
|
});
|
|
3850
4506
|
return (() => {
|
|
3851
|
-
var _el$ = _tmpl$
|
|
4507
|
+
var _el$ = _tmpl$58();
|
|
3852
4508
|
insert(_el$, createComponent(PreferencesRow, {
|
|
3853
4509
|
iconKey: "cogs",
|
|
3854
4510
|
get preference() {
|
|
@@ -3887,648 +4543,188 @@ var Preferences = () => {
|
|
|
3887
4543
|
});
|
|
3888
4544
|
},
|
|
3889
4545
|
get children() {
|
|
3890
|
-
return createComponent(GroupedPreferences, {
|
|
3891
|
-
get groups() {
|
|
3892
|
-
return groupedPreferences();
|
|
3893
|
-
},
|
|
3894
|
-
get loading() {
|
|
3895
|
-
return loading();
|
|
3896
|
-
},
|
|
3897
|
-
updatePreference,
|
|
3898
|
-
bulkUpdatePreferences
|
|
3899
|
-
});
|
|
3900
|
-
}
|
|
3901
|
-
}), null);
|
|
3902
|
-
effect(() => className(_el$, style("preferencesContainer", "nt-px-3 nt-py-4 nt-flex nt-flex-col nt-gap-1 nt-overflow-y-auto nt-h-full nt-pr-0 [scrollbar-gutter:stable]")));
|
|
3903
|
-
return _el$;
|
|
3904
|
-
})();
|
|
3905
|
-
};
|
|
3906
|
-
var _tmpl$54 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
|
|
3907
|
-
var PreferencesHeader = (props) => {
|
|
3908
|
-
const style = useStyle();
|
|
3909
|
-
const {
|
|
3910
|
-
t
|
|
3911
|
-
} = useLocalization();
|
|
3912
|
-
const arrowLeftIconClass = style("preferencesHeader__back__button__icon", "nt-size-4", {
|
|
3913
|
-
iconKey: "arrowLeft"
|
|
3914
|
-
});
|
|
3915
|
-
return (() => {
|
|
3916
|
-
var _el$ = _tmpl$54(), _el$2 = _el$.firstChild;
|
|
3917
|
-
insert(_el$, createComponent(Show, {
|
|
3918
|
-
get when() {
|
|
3919
|
-
return props.navigateToNotifications;
|
|
3920
|
-
},
|
|
3921
|
-
children: (navigateToNotifications) => createComponent(Button, {
|
|
3922
|
-
appearanceKey: "preferencesHeader__back__button",
|
|
3923
|
-
"class": "nt-text-foreground-alpha-600",
|
|
3924
|
-
variant: "unstyled",
|
|
3925
|
-
size: "none",
|
|
3926
|
-
get onClick() {
|
|
3927
|
-
return navigateToNotifications();
|
|
3928
|
-
},
|
|
3929
|
-
get children() {
|
|
3930
|
-
return createComponent(IconRendererWrapper, {
|
|
3931
|
-
iconKey: "arrowLeft",
|
|
3932
|
-
"class": arrowLeftIconClass,
|
|
3933
|
-
get fallback() {
|
|
3934
|
-
return createComponent(ArrowLeft, {
|
|
3935
|
-
"class": arrowLeftIconClass
|
|
3936
|
-
});
|
|
3937
|
-
}
|
|
3938
|
-
});
|
|
3939
|
-
}
|
|
3940
|
-
})
|
|
3941
|
-
}), _el$2);
|
|
3942
|
-
insert(_el$2, () => t("preferences.title"));
|
|
3943
|
-
effect((_p$) => {
|
|
3944
|
-
var _v$ = style("preferencesHeader", "nt-flex nt-bg-neutral-alpha-25 nt-shrink-0 nt-border-b nt-border-border nt-items-center nt-py-3.5 nt-px-4 nt-gap-2"), _v$2 = style("preferencesHeader__title", "nt-text-base nt-font-medium");
|
|
3945
|
-
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
3946
|
-
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
|
|
3947
|
-
return _p$;
|
|
3948
|
-
}, {
|
|
3949
|
-
e: void 0,
|
|
3950
|
-
t: void 0
|
|
3951
|
-
});
|
|
3952
|
-
return _el$;
|
|
3953
|
-
})();
|
|
3954
|
-
};
|
|
3955
|
-
var useTabsDropdown = ({ tabs }) => {
|
|
3956
|
-
const [tabsList, setTabsList] = createSignal();
|
|
3957
|
-
const [visibleTabs, setVisibleTabs] = createSignal([]);
|
|
3958
|
-
const [dropdownTabs, setDropdownTabs] = createSignal([]);
|
|
3959
|
-
onMount(() => {
|
|
3960
|
-
const tabsListEl = tabsList();
|
|
3961
|
-
if (!tabsListEl) return;
|
|
3962
|
-
const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
|
|
3963
|
-
const observer = new IntersectionObserver(
|
|
3964
|
-
(entries) => {
|
|
3965
|
-
let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
|
|
3966
|
-
if (tabsElements.length === visibleTabIds.length) {
|
|
3967
|
-
setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
|
|
3968
|
-
observer.disconnect();
|
|
3969
|
-
return;
|
|
3970
|
-
}
|
|
3971
|
-
visibleTabIds = visibleTabIds.slice(0, -1);
|
|
3972
|
-
setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
|
|
3973
|
-
setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
|
|
3974
|
-
observer.disconnect();
|
|
3975
|
-
},
|
|
3976
|
-
{ root: tabsListEl }
|
|
3977
|
-
);
|
|
3978
|
-
for (const tabElement of tabsElements) {
|
|
3979
|
-
observer.observe(tabElement);
|
|
3980
|
-
}
|
|
3981
|
-
});
|
|
3982
|
-
return { dropdownTabs, setTabsList, visibleTabs };
|
|
3983
|
-
};
|
|
3984
|
-
var _tmpl$55 = /* @__PURE__ */ template(`<strong>`);
|
|
3985
|
-
var _tmpl$215 = /* @__PURE__ */ template(`<p>`);
|
|
3986
|
-
var Bold = (props) => {
|
|
3987
|
-
const style = useStyle();
|
|
3988
|
-
return (() => {
|
|
3989
|
-
var _el$ = _tmpl$55();
|
|
3990
|
-
insert(_el$, () => props.children);
|
|
3991
|
-
effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
|
|
3992
|
-
return _el$;
|
|
3993
|
-
})();
|
|
3994
|
-
};
|
|
3995
|
-
var Text = (props) => props.children;
|
|
3996
|
-
var Markdown = (props) => {
|
|
3997
|
-
const [local, rest] = splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey"]);
|
|
3998
|
-
const style = useStyle();
|
|
3999
|
-
const tokens = createMemo(() => parseMarkdownIntoTokens(local.children));
|
|
4000
|
-
return (() => {
|
|
4001
|
-
var _el$2 = _tmpl$215();
|
|
4002
|
-
spread(_el$2, mergeProps({
|
|
4003
|
-
get ["class"]() {
|
|
4004
|
-
return style(local.appearanceKey, cn(local.class));
|
|
4005
|
-
}
|
|
4006
|
-
}, rest), false, true);
|
|
4007
|
-
insert(_el$2, createComponent(For, {
|
|
4008
|
-
get each() {
|
|
4009
|
-
return tokens();
|
|
4010
|
-
},
|
|
4011
|
-
children: (token) => {
|
|
4012
|
-
if (token.type === "bold") {
|
|
4013
|
-
return createComponent(Bold, {
|
|
4014
|
-
get appearanceKey() {
|
|
4015
|
-
return local.strongAppearanceKey;
|
|
4016
|
-
},
|
|
4017
|
-
get children() {
|
|
4018
|
-
return token.content;
|
|
4019
|
-
}
|
|
4020
|
-
});
|
|
4021
|
-
} else {
|
|
4022
|
-
return createComponent(Text, {
|
|
4023
|
-
get children() {
|
|
4024
|
-
return token.content;
|
|
4025
|
-
}
|
|
4026
|
-
});
|
|
4027
|
-
}
|
|
4028
|
-
}
|
|
4029
|
-
}));
|
|
4030
|
-
return _el$2;
|
|
4031
|
-
})();
|
|
4032
|
-
};
|
|
4033
|
-
var Markdown_default = Markdown;
|
|
4034
|
-
var _tmpl$56 = /* @__PURE__ */ template(`<span>`);
|
|
4035
|
-
var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
|
|
4036
|
-
variants: {
|
|
4037
|
-
variant: {
|
|
4038
|
-
secondary: "nt-bg-neutral-alpha-50"
|
|
4039
|
-
},
|
|
4040
|
-
size: {
|
|
4041
|
-
default: "nt-px-1 nt-py-px nt-rounded-sm nt-text-xs nt-px-1"
|
|
4042
|
-
}
|
|
4043
|
-
},
|
|
4044
|
-
defaultVariants: {
|
|
4045
|
-
variant: "secondary",
|
|
4046
|
-
size: "default"
|
|
4047
|
-
}
|
|
4048
|
-
});
|
|
4049
|
-
var Badge = (props) => {
|
|
4050
|
-
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
4051
|
-
const style = useStyle();
|
|
4052
|
-
return (() => {
|
|
4053
|
-
var _el$ = _tmpl$56();
|
|
4054
|
-
spread(_el$, mergeProps({
|
|
4055
|
-
get ["data-variant"]() {
|
|
4056
|
-
return props.variant;
|
|
4057
|
-
},
|
|
4058
|
-
get ["data-size"]() {
|
|
4059
|
-
return props.size;
|
|
4060
|
-
},
|
|
4061
|
-
get ["class"]() {
|
|
4062
|
-
return style(local.appearanceKey || "badge", cn(badgeVariants({
|
|
4063
|
-
variant: props.variant,
|
|
4064
|
-
size: props.size
|
|
4065
|
-
}), local.class));
|
|
4066
|
-
}
|
|
4067
|
-
}, rest), false, false);
|
|
4068
|
-
return _el$;
|
|
4069
|
-
})();
|
|
4070
|
-
};
|
|
4071
|
-
var TooltipContext = createContext(void 0);
|
|
4072
|
-
function TooltipRoot(props) {
|
|
4073
|
-
const [reference, setReference] = createSignal(null);
|
|
4074
|
-
const [floating, setFloating] = createSignal(null);
|
|
4075
|
-
const position = useFloating(reference, floating, {
|
|
4076
|
-
placement: props.placement || "top",
|
|
4077
|
-
strategy: "fixed",
|
|
4078
|
-
whileElementsMounted: autoUpdate,
|
|
4079
|
-
middleware: [offset(10), flip({
|
|
4080
|
-
fallbackPlacements: props.fallbackPlacements || ["bottom"]
|
|
4081
|
-
}), shift()]
|
|
4082
|
-
});
|
|
4083
|
-
const [isOpen, setIsOpen] = useUncontrolledState({
|
|
4084
|
-
value: props.open,
|
|
4085
|
-
fallbackValue: false
|
|
4086
|
-
});
|
|
4087
|
-
return createComponent(TooltipContext.Provider, {
|
|
4088
|
-
value: {
|
|
4089
|
-
reference,
|
|
4090
|
-
setReference,
|
|
4091
|
-
floating,
|
|
4092
|
-
setFloating,
|
|
4093
|
-
open: isOpen,
|
|
4094
|
-
setOpen: setIsOpen,
|
|
4095
|
-
floatingStyles: () => {
|
|
4096
|
-
var _a, _b;
|
|
4097
|
-
return {
|
|
4098
|
-
position: position.strategy,
|
|
4099
|
-
top: `${(_a = position.y) != null ? _a : 0}px`,
|
|
4100
|
-
left: `${(_b = position.x) != null ? _b : 0}px`
|
|
4101
|
-
};
|
|
4102
|
-
}
|
|
4103
|
-
},
|
|
4104
|
-
get children() {
|
|
4105
|
-
return props.children;
|
|
4106
|
-
}
|
|
4107
|
-
});
|
|
4108
|
-
}
|
|
4109
|
-
function useTooltip() {
|
|
4110
|
-
const context = useContext(TooltipContext);
|
|
4111
|
-
if (!context) {
|
|
4112
|
-
throw new Error("useTooltip must be used within Tooltip.Root component");
|
|
4113
|
-
}
|
|
4114
|
-
return context;
|
|
4115
|
-
}
|
|
4116
|
-
|
|
4117
|
-
// src/ui/components/primitives/Tooltip/TooltipContent.tsx
|
|
4118
|
-
var _tmpl$57 = /* @__PURE__ */ template(`<div>`);
|
|
4119
|
-
var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
|
|
4120
|
-
var TooltipContentBody = (props) => {
|
|
4121
|
-
const {
|
|
4122
|
-
open,
|
|
4123
|
-
setFloating,
|
|
4124
|
-
floating,
|
|
4125
|
-
floatingStyles
|
|
4126
|
-
} = useTooltip();
|
|
4127
|
-
const {
|
|
4128
|
-
setActive,
|
|
4129
|
-
removeActive
|
|
4130
|
-
} = useFocusManager();
|
|
4131
|
-
const [local, rest] = splitProps(props, ["class", "appearanceKey", "style"]);
|
|
4132
|
-
const style = useStyle();
|
|
4133
|
-
onMount(() => {
|
|
4134
|
-
const floatingEl = floating();
|
|
4135
|
-
setActive(floatingEl);
|
|
4136
|
-
onCleanup(() => {
|
|
4137
|
-
removeActive(floatingEl);
|
|
4138
|
-
});
|
|
4139
|
-
});
|
|
4140
|
-
return (() => {
|
|
4141
|
-
var _el$ = _tmpl$57();
|
|
4142
|
-
use(setFloating, _el$);
|
|
4143
|
-
spread(_el$, mergeProps({
|
|
4144
|
-
get ["class"]() {
|
|
4145
|
-
return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
|
|
4146
|
-
},
|
|
4147
|
-
get style() {
|
|
4148
|
-
return __spreadProps(__spreadValues({}, floatingStyles()), {
|
|
4149
|
-
"z-index": 99999
|
|
4546
|
+
return createComponent(GroupedPreferences, {
|
|
4547
|
+
get groups() {
|
|
4548
|
+
return groupedPreferences();
|
|
4549
|
+
},
|
|
4550
|
+
get loading() {
|
|
4551
|
+
return loading();
|
|
4552
|
+
},
|
|
4553
|
+
updatePreference,
|
|
4554
|
+
bulkUpdatePreferences
|
|
4150
4555
|
});
|
|
4151
|
-
},
|
|
4152
|
-
get ["data-open"]() {
|
|
4153
|
-
return open();
|
|
4154
4556
|
}
|
|
4155
|
-
}
|
|
4557
|
+
}), null);
|
|
4558
|
+
effect(() => className(_el$, style("preferencesContainer", "nt-px-3 nt-py-4 nt-flex nt-flex-col nt-gap-1 nt-overflow-y-auto nt-h-full nt-pr-0 [scrollbar-gutter:stable]")));
|
|
4156
4559
|
return _el$;
|
|
4157
4560
|
})();
|
|
4158
4561
|
};
|
|
4159
|
-
var
|
|
4160
|
-
|
|
4161
|
-
|
|
4162
|
-
} = useTooltip();
|
|
4562
|
+
var _tmpl$59 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
|
|
4563
|
+
var PreferencesHeader = (props) => {
|
|
4564
|
+
const style = useStyle();
|
|
4163
4565
|
const {
|
|
4164
|
-
|
|
4165
|
-
} =
|
|
4166
|
-
const
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
|
|
4566
|
+
t
|
|
4567
|
+
} = useLocalization();
|
|
4568
|
+
const arrowLeftIconClass = style("preferencesHeader__back__button__icon", "nt-size-4", {
|
|
4569
|
+
iconKey: "arrowLeft"
|
|
4570
|
+
});
|
|
4571
|
+
return (() => {
|
|
4572
|
+
var _el$ = _tmpl$59(), _el$2 = _el$.firstChild;
|
|
4573
|
+
insert(_el$, createComponent(Show, {
|
|
4574
|
+
get when() {
|
|
4575
|
+
return props.navigateToNotifications;
|
|
4576
|
+
},
|
|
4577
|
+
children: (navigateToNotifications) => createComponent(Button, {
|
|
4578
|
+
appearanceKey: "preferencesHeader__back__button",
|
|
4579
|
+
"class": "nt-text-foreground-alpha-600",
|
|
4580
|
+
variant: "unstyled",
|
|
4581
|
+
size: "none",
|
|
4582
|
+
get onClick() {
|
|
4583
|
+
return navigateToNotifications();
|
|
4178
4584
|
},
|
|
4179
4585
|
get children() {
|
|
4180
|
-
return createComponent(
|
|
4181
|
-
|
|
4182
|
-
|
|
4586
|
+
return createComponent(IconRendererWrapper, {
|
|
4587
|
+
iconKey: "arrowLeft",
|
|
4588
|
+
"class": arrowLeftIconClass,
|
|
4589
|
+
get fallback() {
|
|
4590
|
+
return createComponent(ArrowLeft, {
|
|
4591
|
+
"class": arrowLeftIconClass
|
|
4592
|
+
});
|
|
4183
4593
|
}
|
|
4184
4594
|
});
|
|
4185
4595
|
}
|
|
4186
|
-
})
|
|
4187
|
-
}
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
var
|
|
4191
|
-
|
|
4192
|
-
|
|
4193
|
-
|
|
4194
|
-
|
|
4195
|
-
|
|
4196
|
-
|
|
4197
|
-
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "onMouseEnter", "onMouseLeave", "ref"]);
|
|
4198
|
-
const handleMouseEnter = (e) => {
|
|
4199
|
-
if (typeof local.onMouseEnter === "function") {
|
|
4200
|
-
local.onMouseEnter(e);
|
|
4201
|
-
}
|
|
4202
|
-
setOpen(true);
|
|
4203
|
-
};
|
|
4204
|
-
const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
4205
|
-
const handleMouseLeave = (e) => {
|
|
4206
|
-
if (typeof local.onMouseLeave === "function") {
|
|
4207
|
-
local.onMouseLeave(e);
|
|
4208
|
-
}
|
|
4209
|
-
setOpen(false);
|
|
4210
|
-
};
|
|
4211
|
-
if (local.asChild) {
|
|
4212
|
-
return createComponent(Dynamic, mergeProps({
|
|
4213
|
-
get component() {
|
|
4214
|
-
return local.asChild;
|
|
4215
|
-
},
|
|
4216
|
-
ref(r$) {
|
|
4217
|
-
var _ref$ = ref();
|
|
4218
|
-
typeof _ref$ === "function" && _ref$(r$);
|
|
4219
|
-
},
|
|
4220
|
-
onMouseEnter: handleMouseEnter,
|
|
4221
|
-
onMouseLeave: handleMouseLeave
|
|
4222
|
-
}, rest));
|
|
4223
|
-
}
|
|
4224
|
-
return (() => {
|
|
4225
|
-
var _el$ = _tmpl$58();
|
|
4226
|
-
_el$.addEventListener("mouseleave", () => {
|
|
4227
|
-
setOpen(false);
|
|
4228
|
-
});
|
|
4229
|
-
_el$.addEventListener("mouseenter", () => {
|
|
4230
|
-
setOpen(true);
|
|
4596
|
+
})
|
|
4597
|
+
}), _el$2);
|
|
4598
|
+
insert(_el$2, () => t("preferences.title"));
|
|
4599
|
+
effect((_p$) => {
|
|
4600
|
+
var _v$ = style("preferencesHeader", "nt-flex nt-bg-neutral-alpha-25 nt-shrink-0 nt-border-b nt-border-border nt-items-center nt-py-3.5 nt-px-4 nt-gap-2"), _v$2 = style("preferencesHeader__title", "nt-text-base nt-font-medium");
|
|
4601
|
+
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
4602
|
+
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
|
|
4603
|
+
return _p$;
|
|
4604
|
+
}, {
|
|
4605
|
+
e: void 0,
|
|
4606
|
+
t: void 0
|
|
4231
4607
|
});
|
|
4232
|
-
var _ref$2 = ref();
|
|
4233
|
-
typeof _ref$2 === "function" && use(_ref$2, _el$);
|
|
4234
|
-
spread(_el$, mergeProps({
|
|
4235
|
-
get ["class"]() {
|
|
4236
|
-
return style(local.appearanceKey || "tooltipTrigger");
|
|
4237
|
-
}
|
|
4238
|
-
}, rest), false, true);
|
|
4239
|
-
insert(_el$, () => props.children);
|
|
4240
4608
|
return _el$;
|
|
4241
4609
|
})();
|
|
4242
4610
|
};
|
|
4243
|
-
|
|
4244
|
-
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
var DatePickerContext = createContext({
|
|
4259
|
-
currentDate: () => /* @__PURE__ */ new Date(),
|
|
4260
|
-
setCurrentDate: () => {
|
|
4261
|
-
},
|
|
4262
|
-
viewMonth: () => /* @__PURE__ */ new Date(),
|
|
4263
|
-
setViewMonth: () => {
|
|
4264
|
-
},
|
|
4265
|
-
selectedDate: () => null,
|
|
4266
|
-
setSelectedDate: () => {
|
|
4267
|
-
},
|
|
4268
|
-
maxDays: () => 0
|
|
4269
|
-
});
|
|
4270
|
-
var useDatePicker = () => useContext(DatePickerContext);
|
|
4271
|
-
var DatePicker = (props) => {
|
|
4272
|
-
const [local, rest] = splitProps(props, ["children", "value", "onDateChange", "class", "maxDays"]);
|
|
4273
|
-
const style = useStyle();
|
|
4274
|
-
const today = /* @__PURE__ */ new Date();
|
|
4275
|
-
today.setHours(0, 0, 0, 0);
|
|
4276
|
-
const [currentDate, setCurrentDate] = createSignal(today);
|
|
4277
|
-
const [viewMonth, setViewMonth] = createSignal(today);
|
|
4278
|
-
const [selectedDate, setSelectedDate] = createSignal(local.value ? new Date(local.value) : null);
|
|
4279
|
-
const handleDateSelect = (date) => {
|
|
4280
|
-
setSelectedDate(date);
|
|
4281
|
-
if (local.onDateChange) {
|
|
4282
|
-
local.onDateChange(date);
|
|
4283
|
-
}
|
|
4284
|
-
};
|
|
4285
|
-
return createComponent(DatePickerContext.Provider, {
|
|
4286
|
-
value: {
|
|
4287
|
-
currentDate,
|
|
4288
|
-
setCurrentDate,
|
|
4289
|
-
viewMonth,
|
|
4290
|
-
setViewMonth,
|
|
4291
|
-
selectedDate,
|
|
4292
|
-
setSelectedDate: handleDateSelect,
|
|
4293
|
-
maxDays: () => props.maxDays
|
|
4294
|
-
},
|
|
4295
|
-
get children() {
|
|
4296
|
-
var _el$ = _tmpl$59();
|
|
4297
|
-
spread(_el$, mergeProps({
|
|
4298
|
-
get ["class"]() {
|
|
4299
|
-
return style("datePicker", cn("nt-p-2", local.class));
|
|
4611
|
+
var useTabsDropdown = ({ tabs }) => {
|
|
4612
|
+
const [tabsList, setTabsList] = createSignal();
|
|
4613
|
+
const [visibleTabs, setVisibleTabs] = createSignal([]);
|
|
4614
|
+
const [dropdownTabs, setDropdownTabs] = createSignal([]);
|
|
4615
|
+
onMount(() => {
|
|
4616
|
+
const tabsListEl = tabsList();
|
|
4617
|
+
if (!tabsListEl) return;
|
|
4618
|
+
const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
|
|
4619
|
+
const observer = new IntersectionObserver(
|
|
4620
|
+
(entries) => {
|
|
4621
|
+
let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
|
|
4622
|
+
if (tabsElements.length === visibleTabIds.length) {
|
|
4623
|
+
setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
|
|
4624
|
+
observer.disconnect();
|
|
4625
|
+
return;
|
|
4300
4626
|
}
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
|
|
4627
|
+
visibleTabIds = visibleTabIds.slice(0, -1);
|
|
4628
|
+
setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
|
|
4629
|
+
setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
|
|
4630
|
+
observer.disconnect();
|
|
4631
|
+
},
|
|
4632
|
+
{ root: tabsListEl }
|
|
4633
|
+
);
|
|
4634
|
+
for (const tabElement of tabsElements) {
|
|
4635
|
+
observer.observe(tabElement);
|
|
4304
4636
|
}
|
|
4305
4637
|
});
|
|
4306
|
-
};
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
const
|
|
4324
|
-
const date = new Date(viewMonth());
|
|
4325
|
-
date.setMonth(date.getMonth() - 1);
|
|
4326
|
-
const currentMonth = currentDate();
|
|
4327
|
-
if (date.getFullYear() < currentMonth.getFullYear() || date.getFullYear() === currentMonth.getFullYear() && date.getMonth() < currentMonth.getMonth()) {
|
|
4328
|
-
return;
|
|
4329
|
-
}
|
|
4330
|
-
setViewMonth(date);
|
|
4331
|
-
};
|
|
4332
|
-
const handleNextMonth = () => {
|
|
4333
|
-
const date = new Date(viewMonth());
|
|
4334
|
-
date.setMonth(date.getMonth() + 1);
|
|
4335
|
-
const maxDaysValue = maxDays();
|
|
4336
|
-
if (maxDaysValue > 0) {
|
|
4337
|
-
const maxDate = new Date(currentDate());
|
|
4338
|
-
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
4339
|
-
if (date.getFullYear() > maxDate.getFullYear() || date.getFullYear() === maxDate.getFullYear() && date.getMonth() > maxDate.getMonth()) {
|
|
4340
|
-
return;
|
|
4341
|
-
}
|
|
4342
|
-
}
|
|
4343
|
-
setViewMonth(date);
|
|
4344
|
-
};
|
|
4345
|
-
const isPrevDisabled = () => {
|
|
4346
|
-
const current = currentDate();
|
|
4347
|
-
const view = viewMonth();
|
|
4348
|
-
return view.getFullYear() === current.getFullYear() && view.getMonth() === current.getMonth();
|
|
4349
|
-
};
|
|
4350
|
-
const isNextDisabled = () => {
|
|
4351
|
-
const maxDaysValue = maxDays();
|
|
4352
|
-
if (maxDaysValue === 0) return false;
|
|
4353
|
-
const view = viewMonth();
|
|
4354
|
-
const maxDate = new Date(currentDate());
|
|
4355
|
-
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
4356
|
-
return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
|
|
4357
|
-
};
|
|
4638
|
+
return { dropdownTabs, setTabsList, visibleTabs };
|
|
4639
|
+
};
|
|
4640
|
+
var _tmpl$60 = /* @__PURE__ */ template(`<strong>`);
|
|
4641
|
+
var _tmpl$216 = /* @__PURE__ */ template(`<p>`);
|
|
4642
|
+
var Bold = (props) => {
|
|
4643
|
+
const style = useStyle();
|
|
4644
|
+
return (() => {
|
|
4645
|
+
var _el$ = _tmpl$60();
|
|
4646
|
+
insert(_el$, () => props.children);
|
|
4647
|
+
effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
|
|
4648
|
+
return _el$;
|
|
4649
|
+
})();
|
|
4650
|
+
};
|
|
4651
|
+
var Text = (props) => props.children;
|
|
4652
|
+
var Markdown = (props) => {
|
|
4653
|
+
const [local, rest] = splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey"]);
|
|
4654
|
+
const style = useStyle();
|
|
4655
|
+
const tokens = createMemo(() => parseMarkdownIntoTokens(local.children));
|
|
4358
4656
|
return (() => {
|
|
4359
|
-
var _el$2 = _tmpl$216()
|
|
4657
|
+
var _el$2 = _tmpl$216();
|
|
4360
4658
|
spread(_el$2, mergeProps({
|
|
4361
4659
|
get ["class"]() {
|
|
4362
|
-
return style(local.appearanceKey
|
|
4660
|
+
return style(local.appearanceKey, cn(local.class));
|
|
4363
4661
|
}
|
|
4364
4662
|
}, rest), false, true);
|
|
4365
|
-
insert(_el$2, createComponent(
|
|
4366
|
-
|
|
4367
|
-
|
|
4368
|
-
onClick: (e) => {
|
|
4369
|
-
e.stopPropagation();
|
|
4370
|
-
handlePrevMonth();
|
|
4371
|
-
},
|
|
4372
|
-
get disabled() {
|
|
4373
|
-
return isPrevDisabled();
|
|
4663
|
+
insert(_el$2, createComponent(For, {
|
|
4664
|
+
get each() {
|
|
4665
|
+
return tokens();
|
|
4374
4666
|
},
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
}
|
|
4384
|
-
}
|
|
4385
|
-
}
|
|
4667
|
+
children: (token) => {
|
|
4668
|
+
if (token.type === "bold") {
|
|
4669
|
+
return createComponent(Bold, {
|
|
4670
|
+
get appearanceKey() {
|
|
4671
|
+
return local.strongAppearanceKey;
|
|
4672
|
+
},
|
|
4673
|
+
get children() {
|
|
4674
|
+
return token.content;
|
|
4675
|
+
}
|
|
4676
|
+
});
|
|
4677
|
+
} else {
|
|
4678
|
+
return createComponent(Text, {
|
|
4679
|
+
get children() {
|
|
4680
|
+
return token.content;
|
|
4681
|
+
}
|
|
4682
|
+
});
|
|
4683
|
+
}
|
|
4386
4684
|
}
|
|
4387
|
-
}), _el$3);
|
|
4388
|
-
insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
|
|
4389
|
-
month: "long",
|
|
4390
|
-
year: "numeric"
|
|
4391
4685
|
}));
|
|
4392
|
-
insert(_el$2, createComponent(Button, {
|
|
4393
|
-
appearanceKey: "datePickerControlNextTrigger",
|
|
4394
|
-
variant: "ghost",
|
|
4395
|
-
onClick: (e) => {
|
|
4396
|
-
e.stopPropagation();
|
|
4397
|
-
handleNextMonth();
|
|
4398
|
-
},
|
|
4399
|
-
get disabled() {
|
|
4400
|
-
return isNextDisabled();
|
|
4401
|
-
},
|
|
4402
|
-
"class": "nt-flex nt-justify-center nt-items-center nt-gap-0.5 nt-w-5 nt-h-5 nt-p-0 nt-rounded-md nt-bg-background nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
|
|
4403
|
-
get children() {
|
|
4404
|
-
return createComponent(IconRendererWrapper, {
|
|
4405
|
-
iconKey: "arrowRight",
|
|
4406
|
-
"class": nextIconClass,
|
|
4407
|
-
get fallback() {
|
|
4408
|
-
return createComponent(ArrowRight, {
|
|
4409
|
-
"class": nextIconClass
|
|
4410
|
-
});
|
|
4411
|
-
}
|
|
4412
|
-
});
|
|
4413
|
-
}
|
|
4414
|
-
}), null);
|
|
4415
|
-
effect(() => className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
|
|
4416
4686
|
return _el$2;
|
|
4417
4687
|
})();
|
|
4418
4688
|
};
|
|
4419
|
-
var
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
currentDate,
|
|
4426
|
-
maxDays
|
|
4427
|
-
} = useDatePicker();
|
|
4428
|
-
const {
|
|
4429
|
-
t
|
|
4430
|
-
} = useLocalization();
|
|
4431
|
-
const isCurrentMonth = props.date.getMonth() === viewMonth().getMonth();
|
|
4432
|
-
const isPastDate = () => {
|
|
4433
|
-
const today = currentDate();
|
|
4434
|
-
return props.date < today;
|
|
4435
|
-
};
|
|
4436
|
-
const isFutureDate = () => {
|
|
4437
|
-
const maxDaysValue = maxDays();
|
|
4438
|
-
if (maxDaysValue === 0) return false;
|
|
4439
|
-
const maxDate = new Date(currentDate());
|
|
4440
|
-
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
4441
|
-
return props.date > maxDate;
|
|
4442
|
-
};
|
|
4443
|
-
const isDisabled = !isCurrentMonth || isPastDate() || isFutureDate();
|
|
4444
|
-
const isExceedingLimit = () => {
|
|
4445
|
-
return isCurrentMonth && isFutureDate();
|
|
4446
|
-
};
|
|
4447
|
-
const buttonElement = createComponent(Button, mergeProps({
|
|
4448
|
-
appearanceKey: "datePickerCalendarDay__button",
|
|
4449
|
-
variant: "ghost",
|
|
4450
|
-
disabled: isDisabled,
|
|
4451
|
-
onClick: (e) => {
|
|
4452
|
-
e.stopPropagation();
|
|
4453
|
-
setSelectedDate(local.date);
|
|
4689
|
+
var Markdown_default = Markdown;
|
|
4690
|
+
var _tmpl$61 = /* @__PURE__ */ template(`<span>`);
|
|
4691
|
+
var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
|
|
4692
|
+
variants: {
|
|
4693
|
+
variant: {
|
|
4694
|
+
secondary: "nt-bg-neutral-alpha-50"
|
|
4454
4695
|
},
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
return cn("nt-size-8 nt-w-full nt-rounded-md nt-flex nt-items-center nt-justify-center", {
|
|
4458
|
-
"nt-text-muted-foreground disabled:nt-opacity-20": !isCurrentMonth || isPastDate(),
|
|
4459
|
-
"nt-text-foreground-alpha-700": isCurrentMonth && !isPastDate() && !isFutureDate()
|
|
4460
|
-
}, {
|
|
4461
|
-
"nt-bg-primary-alpha-300 hover:nt-bg-primary-alpha-400": ((_a = selectedDate()) == null ? void 0 : _a.toDateString()) === local.date.toDateString()
|
|
4462
|
-
});
|
|
4463
|
-
}
|
|
4464
|
-
}, rest, {
|
|
4465
|
-
get children() {
|
|
4466
|
-
return local.date.getDate();
|
|
4696
|
+
size: {
|
|
4697
|
+
default: "nt-px-1 nt-py-px nt-rounded-sm nt-text-xs nt-px-1"
|
|
4467
4698
|
}
|
|
4468
|
-
}
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
return [createComponent(Tooltip.Trigger, {
|
|
4473
|
-
children: buttonElement
|
|
4474
|
-
}), createComponent(Tooltip.Content, {
|
|
4475
|
-
get children() {
|
|
4476
|
-
return t("snooze.datePicker.exceedingLimitTooltip", {
|
|
4477
|
-
days: maxDays()
|
|
4478
|
-
});
|
|
4479
|
-
}
|
|
4480
|
-
})];
|
|
4481
|
-
}
|
|
4482
|
-
});
|
|
4699
|
+
},
|
|
4700
|
+
defaultVariants: {
|
|
4701
|
+
variant: "secondary",
|
|
4702
|
+
size: "default"
|
|
4483
4703
|
}
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
var DatePickerCalendar = (props) => {
|
|
4704
|
+
});
|
|
4705
|
+
var Badge = (props) => {
|
|
4487
4706
|
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
4488
4707
|
const style = useStyle();
|
|
4489
|
-
const {
|
|
4490
|
-
viewMonth
|
|
4491
|
-
} = useDatePicker();
|
|
4492
|
-
const getDaysInMonth = () => {
|
|
4493
|
-
const year = viewMonth().getFullYear();
|
|
4494
|
-
const month = viewMonth().getMonth();
|
|
4495
|
-
const firstDay = new Date(year, month, 1);
|
|
4496
|
-
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
4497
|
-
const startingDay = firstDay.getDay();
|
|
4498
|
-
const days = [];
|
|
4499
|
-
for (let i = 0; i < startingDay; i += 1) {
|
|
4500
|
-
const prevMonthDay = new Date(year, month, -i);
|
|
4501
|
-
days.unshift(prevMonthDay);
|
|
4502
|
-
}
|
|
4503
|
-
for (let i = 1; i <= daysInMonth; i += 1) {
|
|
4504
|
-
days.push(new Date(year, month, i));
|
|
4505
|
-
}
|
|
4506
|
-
const remainingCells = 7 - days.length % 7;
|
|
4507
|
-
if (remainingCells < 7) {
|
|
4508
|
-
for (let i = 1; i <= remainingCells; i += 1) {
|
|
4509
|
-
days.push(new Date(year, month + 1, i));
|
|
4510
|
-
}
|
|
4511
|
-
}
|
|
4512
|
-
return days;
|
|
4513
|
-
};
|
|
4514
4708
|
return (() => {
|
|
4515
|
-
var _el$
|
|
4516
|
-
_el
|
|
4517
|
-
|
|
4709
|
+
var _el$ = _tmpl$61();
|
|
4710
|
+
spread(_el$, mergeProps({
|
|
4711
|
+
get ["data-variant"]() {
|
|
4712
|
+
return props.variant;
|
|
4713
|
+
},
|
|
4714
|
+
get ["data-size"]() {
|
|
4715
|
+
return props.size;
|
|
4716
|
+
},
|
|
4518
4717
|
get ["class"]() {
|
|
4519
|
-
return style(local.appearanceKey || "
|
|
4718
|
+
return style(local.appearanceKey || "badge", cn(badgeVariants({
|
|
4719
|
+
variant: props.variant,
|
|
4720
|
+
size: props.size
|
|
4721
|
+
}), local.class));
|
|
4520
4722
|
}
|
|
4521
|
-
}, rest), false,
|
|
4522
|
-
|
|
4523
|
-
return createComponent(DatePickerGridCellTrigger, {
|
|
4524
|
-
date
|
|
4525
|
-
});
|
|
4526
|
-
}));
|
|
4527
|
-
return _el$8;
|
|
4723
|
+
}, rest), false, false);
|
|
4724
|
+
return _el$;
|
|
4528
4725
|
})();
|
|
4529
4726
|
};
|
|
4530
|
-
|
|
4531
|
-
var _tmpl$60 = /* @__PURE__ */ template(`<input>`);
|
|
4727
|
+
var _tmpl$63 = /* @__PURE__ */ template(`<input>`);
|
|
4532
4728
|
var inputVariants = cva(cn(`focus-visible:nt-outline-none focus-visible:nt-ring-2 focus-visible:nt-rounded-md focus-visible:nt-ring-ring focus-visible:nt-ring-offset-2`), {
|
|
4533
4729
|
variants: {
|
|
4534
4730
|
variant: {
|
|
@@ -4548,7 +4744,7 @@ var Input = (props) => {
|
|
|
4548
4744
|
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
4549
4745
|
const style = useStyle();
|
|
4550
4746
|
return (() => {
|
|
4551
|
-
var _el$ = _tmpl$
|
|
4747
|
+
var _el$ = _tmpl$63();
|
|
4552
4748
|
spread(_el$, mergeProps({
|
|
4553
4749
|
get ["data-variant"]() {
|
|
4554
4750
|
return props.variant;
|
|
@@ -4568,7 +4764,7 @@ var Input = (props) => {
|
|
|
4568
4764
|
};
|
|
4569
4765
|
|
|
4570
4766
|
// src/ui/components/primitives/TimePicker.tsx
|
|
4571
|
-
var _tmpl$
|
|
4767
|
+
var _tmpl$64 = /* @__PURE__ */ template(`<div><span>:</span><select><option value=AM>AM</option><option value=PM>PM`);
|
|
4572
4768
|
var TimePicker = (props) => {
|
|
4573
4769
|
const [local, rest] = splitProps(props, ["value", "onChange", "class", "appearanceKey"]);
|
|
4574
4770
|
const style = useStyle();
|
|
@@ -4608,7 +4804,7 @@ var TimePicker = (props) => {
|
|
|
4608
4804
|
}
|
|
4609
4805
|
};
|
|
4610
4806
|
return (() => {
|
|
4611
|
-
var _el$ = _tmpl$
|
|
4807
|
+
var _el$ = _tmpl$64(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
4612
4808
|
_el$.$$click = (e) => e.stopPropagation();
|
|
4613
4809
|
spread(_el$, mergeProps({
|
|
4614
4810
|
get ["class"]() {
|
|
@@ -4696,7 +4892,7 @@ var enforceMinMax = (el) => {
|
|
|
4696
4892
|
delegateEvents(["click"]);
|
|
4697
4893
|
|
|
4698
4894
|
// src/ui/components/Notification/SnoozeDateTimePicker.tsx
|
|
4699
|
-
var _tmpl$
|
|
4895
|
+
var _tmpl$65 = /* @__PURE__ */ template(`<div><div><p></p></div><div>`);
|
|
4700
4896
|
var fiveMinutesFromNow = () => {
|
|
4701
4897
|
const futureTime = new Date(Date.now() + 5 * 60 * 1e3);
|
|
4702
4898
|
const hours = futureTime.getHours();
|
|
@@ -4793,7 +4989,7 @@ var SnoozeDateTimePicker = (props) => {
|
|
|
4793
4989
|
return t("snooze.datePicker.noDateSelectedTooltip");
|
|
4794
4990
|
});
|
|
4795
4991
|
return (() => {
|
|
4796
|
-
var _el$ = _tmpl$
|
|
4992
|
+
var _el$ = _tmpl$65(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
|
|
4797
4993
|
_el$.$$click = (e) => e.stopPropagation();
|
|
4798
4994
|
insert(_el$, createComponent(DatePicker, {
|
|
4799
4995
|
onDateChange: (date) => setSelectedDate(date),
|
|
@@ -4878,7 +5074,7 @@ var SnoozeDateTimePicker = (props) => {
|
|
|
4878
5074
|
delegateEvents(["click"]);
|
|
4879
5075
|
|
|
4880
5076
|
// src/ui/components/Notification/NotificationActions.tsx
|
|
4881
|
-
var _tmpl$
|
|
5077
|
+
var _tmpl$66 = /* @__PURE__ */ template(`<div><span>`);
|
|
4882
5078
|
var _tmpl$217 = /* @__PURE__ */ template(`<span>`);
|
|
4883
5079
|
var SNOOZE_PRESETS = [{
|
|
4884
5080
|
key: "snooze.options.anHourFromNow",
|
|
@@ -4925,7 +5121,7 @@ var SnoozeDropdownItem = (props) => {
|
|
|
4925
5121
|
iconKey: "clock"
|
|
4926
5122
|
});
|
|
4927
5123
|
const content = [(() => {
|
|
4928
|
-
var _el$ = _tmpl$
|
|
5124
|
+
var _el$ = _tmpl$66(), _el$2 = _el$.firstChild;
|
|
4929
5125
|
insert(_el$, createComponent(IconRendererWrapper, {
|
|
4930
5126
|
iconKey: "clock",
|
|
4931
5127
|
"class": snoozeItemIconClass,
|
|
@@ -5322,7 +5518,7 @@ var renderNotificationActions = (notification, status) => {
|
|
|
5322
5518
|
};
|
|
5323
5519
|
|
|
5324
5520
|
// src/ui/components/Notification/DefaultNotification.tsx
|
|
5325
|
-
var _tmpl$
|
|
5521
|
+
var _tmpl$67 = /* @__PURE__ */ template(`<img>`);
|
|
5326
5522
|
var _tmpl$218 = /* @__PURE__ */ template(`<div>`);
|
|
5327
5523
|
var _tmpl$311 = /* @__PURE__ */ template(`<span>`);
|
|
5328
5524
|
var _tmpl$410 = /* @__PURE__ */ template(`<a><div><div></div><div></div><div>`);
|
|
@@ -5414,7 +5610,7 @@ var DefaultNotification = (props) => {
|
|
|
5414
5610
|
})();
|
|
5415
5611
|
},
|
|
5416
5612
|
get children() {
|
|
5417
|
-
var _el$2 = _tmpl$
|
|
5613
|
+
var _el$2 = _tmpl$67();
|
|
5418
5614
|
effect((_p$) => {
|
|
5419
5615
|
var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
|
|
5420
5616
|
_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
|
|
@@ -5665,14 +5861,30 @@ var NewMessagesCta = (props) => {
|
|
|
5665
5861
|
}
|
|
5666
5862
|
});
|
|
5667
5863
|
};
|
|
5668
|
-
var _tmpl$
|
|
5864
|
+
var _tmpl$68 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 16 16"fill=none><path fill=currentColor d="M12.1675 2.04492L11.5308 2.68164L11.1069 3.10645L12.9614 4.96094L12.7495 5.17383L10.894 3.31836L10.4692 3.74219L9.40967 4.80273L8.98486 5.22754L9.40967 5.65137L10.5747 6.81738L10.3628 7.03027L9.19775 5.86328L8.77295 5.43945L6.35889 7.85352L6.62744 8.26172C7.00257 8.83177 7.18147 9.50559 7.14111 10.1816L7.10986 10.4707C7.00656 11.1451 6.68818 11.7654 6.20557 12.2402L5.98877 12.4346C5.46027 12.8661 4.80786 13.1133 4.13135 13.1426L3.84033 13.1416C3.0614 13.1032 2.3236 12.7769 1.771 12.2266H1.77002C1.28602 11.744 0.974717 11.1186 0.877441 10.4473L0.849121 10.1572C0.814077 9.47419 1.00158 8.80051 1.38037 8.2373L1.55518 8.00293C2.04954 7.39769 2.75121 6.99767 3.52393 6.88086C4.29677 6.76406 5.0856 6.93884 5.73682 7.37109L6.146 7.64258L6.49268 7.29492L11.9546 1.83203L12.1675 2.04492ZM4.00537 7.10645C3.71967 7.11042 3.4363 7.15732 3.16553 7.24512L2.89893 7.34668C2.63748 7.46146 2.39532 7.61469 2.18018 7.80078L1.97803 7.99316C1.52375 8.46356 1.2476 9.0739 1.18994 9.71973L1.17822 9.99805C1.18392 10.6519 1.41417 11.2812 1.82568 11.7822L2.01318 11.9883C2.47551 12.4506 3.0805 12.7377 3.7251 12.8066L4.00342 12.8232C4.75062 12.8297 5.4708 12.5425 6.0083 12.0234L6.44775 11.5986L6.40186 11.5527C6.44537 11.4885 6.48869 11.4241 6.52686 11.3564L6.65479 11.1016C6.76956 10.84 6.84411 10.563 6.87646 10.2803L6.89404 9.99609C6.89801 9.71049 6.85899 9.42635 6.77881 9.15332L6.68506 8.88379C6.5776 8.61923 6.4315 8.3726 6.25146 8.15234L6.06006 7.94141C5.85804 7.73939 5.62719 7.56844 5.37549 7.43555L5.1167 7.31543C4.76396 7.17222 4.38604 7.10121 4.00537 7.10645Z"stroke=#525866 stroke-width=1.2>`);
|
|
5865
|
+
function Key(props) {
|
|
5866
|
+
return (() => {
|
|
5867
|
+
var _el$ = _tmpl$68();
|
|
5868
|
+
spread(_el$, props, true, true);
|
|
5869
|
+
return _el$;
|
|
5870
|
+
})();
|
|
5871
|
+
}
|
|
5872
|
+
|
|
5873
|
+
// src/ui/components/Notification/NotificationListSkeleton.tsx
|
|
5874
|
+
var _tmpl$69 = /* @__PURE__ */ template(`<div>`);
|
|
5875
|
+
var _tmpl$219 = /* @__PURE__ */ template(`<p data-localization=notifications.emptyNotice>`);
|
|
5876
|
+
var _tmpl$312 = /* @__PURE__ */ template(`<div><p>Trigger your notification. No setup needed.</p><p>Temporary <Inbox />. All data will expire in 24 hours. Connect API key to persists messages, enable
|
|
5877
|
+
preferences, and connect email.</p><div><div>`);
|
|
5669
5878
|
var NotificationListSkeleton = (props) => {
|
|
5670
5879
|
const style = useStyle();
|
|
5671
5880
|
const {
|
|
5672
5881
|
t
|
|
5673
5882
|
} = useLocalization();
|
|
5883
|
+
const {
|
|
5884
|
+
isKeyless
|
|
5885
|
+
} = useInboxContext();
|
|
5674
5886
|
return (() => {
|
|
5675
|
-
var _el$ = _tmpl$
|
|
5887
|
+
var _el$ = _tmpl$69();
|
|
5676
5888
|
insert(_el$, createComponent(Motion.div, {
|
|
5677
5889
|
get animate() {
|
|
5678
5890
|
return {
|
|
@@ -5711,7 +5923,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
5711
5923
|
appearanceKey: "notificationList__skeletonAvatar",
|
|
5712
5924
|
"class": "nt-w-8 nt-h-8 nt-rounded-full nt-bg-neutral-alpha-100"
|
|
5713
5925
|
}), (() => {
|
|
5714
|
-
var _el$3 = _tmpl$
|
|
5926
|
+
var _el$3 = _tmpl$69();
|
|
5715
5927
|
insert(_el$3, createComponent(SkeletonText, {
|
|
5716
5928
|
appearanceKey: "notificationList__skeletonText",
|
|
5717
5929
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -5725,7 +5937,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
5725
5937
|
})()];
|
|
5726
5938
|
}
|
|
5727
5939
|
}))), (() => {
|
|
5728
|
-
var _el$2 = _tmpl$
|
|
5940
|
+
var _el$2 = _tmpl$69();
|
|
5729
5941
|
effect(() => className(_el$2, style("notificationListEmptyNoticeOverlay", "nt-absolute nt-size-full nt-z-10 nt-inset-0 nt-bg-gradient-to-b nt-from-transparent nt-to-background")));
|
|
5730
5942
|
return _el$2;
|
|
5731
5943
|
})()];
|
|
@@ -5757,9 +5969,12 @@ var NotificationListSkeleton = (props) => {
|
|
|
5757
5969
|
get ["class"]() {
|
|
5758
5970
|
return style("notificationListEmptyNotice", "nt-text-center");
|
|
5759
5971
|
},
|
|
5760
|
-
"data-localization": "notifications.emptyNotice",
|
|
5761
5972
|
get children() {
|
|
5762
|
-
return
|
|
5973
|
+
return memo(() => !!isKeyless())() ? createComponent(KeylessEmptyState, {}) : (() => {
|
|
5974
|
+
var _el$4 = _tmpl$219();
|
|
5975
|
+
insert(_el$4, () => t("notifications.emptyNotice"));
|
|
5976
|
+
return _el$4;
|
|
5977
|
+
})();
|
|
5763
5978
|
}
|
|
5764
5979
|
});
|
|
5765
5980
|
}
|
|
@@ -5768,10 +5983,69 @@ var NotificationListSkeleton = (props) => {
|
|
|
5768
5983
|
return _el$;
|
|
5769
5984
|
})();
|
|
5770
5985
|
};
|
|
5986
|
+
function KeylessEmptyState() {
|
|
5987
|
+
const style = useStyle();
|
|
5988
|
+
const novu = useNovu();
|
|
5989
|
+
return (() => {
|
|
5990
|
+
var _el$5 = _tmpl$312(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild;
|
|
5991
|
+
insert(_el$8, createComponent(Button, {
|
|
5992
|
+
variant: "secondary",
|
|
5993
|
+
size: "sm",
|
|
5994
|
+
get ["class"]() {
|
|
5995
|
+
return style(
|
|
5996
|
+
"notificationListEmptyNotice",
|
|
5997
|
+
// eslint-disable-next-line max-len
|
|
5998
|
+
"nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-white nt-border nt-border-neutral-alpha-100 nt-shadow-sm nt-text-[12px] nt-font-medium"
|
|
5999
|
+
);
|
|
6000
|
+
},
|
|
6001
|
+
onClick: () => window.open("https://go.novu.co/keyless?utm_campaign=empty-state-get_api_key", "_blank", "noopener noreferrer"),
|
|
6002
|
+
get children() {
|
|
6003
|
+
return [createComponent(Key, {
|
|
6004
|
+
get ["class"]() {
|
|
6005
|
+
return style("lockIcon", "nt-size-4 nt-mr-2");
|
|
6006
|
+
}
|
|
6007
|
+
}), "Get API key"];
|
|
6008
|
+
}
|
|
6009
|
+
}), _el$9);
|
|
6010
|
+
insert(_el$9, createComponent(Button, {
|
|
6011
|
+
variant: "default",
|
|
6012
|
+
size: "sm",
|
|
6013
|
+
get ["class"]() {
|
|
6014
|
+
return style(
|
|
6015
|
+
"notificationListEmptyNotice",
|
|
6016
|
+
// eslint-disable-next-line max-len
|
|
6017
|
+
"nt-h-8 nt-px-4 nt-flex nt-items-center nt-justify-center nt-gap-2 nt-bg-neutral-900 nt-text-white nt-shadow-sm nt-text-[12px] nt-font-medium"
|
|
6018
|
+
);
|
|
6019
|
+
},
|
|
6020
|
+
onClick: () => novu.notifications.triggerHelloWorldEvent(),
|
|
6021
|
+
get children() {
|
|
6022
|
+
return [createComponent(Bell, {
|
|
6023
|
+
get ["class"]() {
|
|
6024
|
+
return style("bellIcon", "nt-size-4 nt-mr-2");
|
|
6025
|
+
}
|
|
6026
|
+
}), "Send 'Hello World!'"];
|
|
6027
|
+
}
|
|
6028
|
+
}));
|
|
6029
|
+
effect((_p$) => {
|
|
6030
|
+
var _v$ = style("notificationListEmptyNotice", "nt--mt-[50px]"), _v$2 = style("strong", "nt-text-[#000000] nt-mb-1"), _v$3 = style("notificationListEmptyNotice", "nt-mb-4"), _v$4 = style("notificationListEmptyNotice", "nt-flex nt-gap-4 nt-justify-center");
|
|
6031
|
+
_v$ !== _p$.e && className(_el$5, _p$.e = _v$);
|
|
6032
|
+
_v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
|
|
6033
|
+
_v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
|
|
6034
|
+
_v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
|
|
6035
|
+
return _p$;
|
|
6036
|
+
}, {
|
|
6037
|
+
e: void 0,
|
|
6038
|
+
t: void 0,
|
|
6039
|
+
a: void 0,
|
|
6040
|
+
o: void 0
|
|
6041
|
+
});
|
|
6042
|
+
return _el$5;
|
|
6043
|
+
})();
|
|
6044
|
+
}
|
|
5771
6045
|
|
|
5772
6046
|
// src/ui/components/Notification/NotificationList.tsx
|
|
5773
|
-
var _tmpl$
|
|
5774
|
-
var _tmpl$
|
|
6047
|
+
var _tmpl$70 = /* @__PURE__ */ template(`<div>`);
|
|
6048
|
+
var _tmpl$220 = /* @__PURE__ */ template(`<div><div>`);
|
|
5775
6049
|
var NotificationList = (props) => {
|
|
5776
6050
|
var _a, _b, _c, _d;
|
|
5777
6051
|
const options = createMemo(() => __spreadProps(__spreadValues({}, props.filter), {
|
|
@@ -5815,7 +6089,7 @@ var NotificationList = (props) => {
|
|
|
5815
6089
|
});
|
|
5816
6090
|
});
|
|
5817
6091
|
return (() => {
|
|
5818
|
-
var _el$ = _tmpl$
|
|
6092
|
+
var _el$ = _tmpl$220(), _el$2 = _el$.firstChild;
|
|
5819
6093
|
insert(_el$, createComponent(NewMessagesCta, {
|
|
5820
6094
|
get count() {
|
|
5821
6095
|
return count();
|
|
@@ -5872,7 +6146,7 @@ var NotificationList = (props) => {
|
|
|
5872
6146
|
return !end();
|
|
5873
6147
|
},
|
|
5874
6148
|
get children() {
|
|
5875
|
-
var _el$3 = _tmpl$
|
|
6149
|
+
var _el$3 = _tmpl$70();
|
|
5876
6150
|
use(setEl, _el$3);
|
|
5877
6151
|
insert(_el$3, createComponent(NotificationListSkeleton, {
|
|
5878
6152
|
loading: true
|
|
@@ -5894,13 +6168,13 @@ var NotificationList = (props) => {
|
|
|
5894
6168
|
return _el$;
|
|
5895
6169
|
})();
|
|
5896
6170
|
};
|
|
5897
|
-
var _tmpl$
|
|
6171
|
+
var _tmpl$71 = /* @__PURE__ */ template(`<span>`);
|
|
5898
6172
|
var getDisplayCount = (count) => count >= 100 ? "99+" : count;
|
|
5899
6173
|
var InboxTabUnreadNotificationsCount = (props) => {
|
|
5900
6174
|
const style = useStyle();
|
|
5901
6175
|
const displayCount = createMemo(() => getDisplayCount(props.count));
|
|
5902
6176
|
return (() => {
|
|
5903
|
-
var _el$ = _tmpl$
|
|
6177
|
+
var _el$ = _tmpl$71();
|
|
5904
6178
|
insert(_el$, displayCount);
|
|
5905
6179
|
effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
|
|
5906
6180
|
return _el$;
|
|
@@ -5927,7 +6201,7 @@ var InboxTab = (props) => {
|
|
|
5927
6201
|
},
|
|
5928
6202
|
get children() {
|
|
5929
6203
|
return [(() => {
|
|
5930
|
-
var _el$2 = _tmpl$
|
|
6204
|
+
var _el$2 = _tmpl$71();
|
|
5931
6205
|
insert(_el$2, () => props.label);
|
|
5932
6206
|
effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
|
|
5933
6207
|
return _el$2;
|
|
@@ -5967,7 +6241,7 @@ var InboxDropdownTab = (props) => {
|
|
|
5967
6241
|
},
|
|
5968
6242
|
get children() {
|
|
5969
6243
|
return [(() => {
|
|
5970
|
-
var _el$3 = _tmpl$
|
|
6244
|
+
var _el$3 = _tmpl$71();
|
|
5971
6245
|
insert(_el$3, () => props.label);
|
|
5972
6246
|
effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
|
|
5973
6247
|
return _el$3;
|
|
@@ -6168,7 +6442,7 @@ var InboxTabs = (props) => {
|
|
|
6168
6442
|
};
|
|
6169
6443
|
|
|
6170
6444
|
// src/ui/components/Inbox.tsx
|
|
6171
|
-
var _tmpl$
|
|
6445
|
+
var _tmpl$73 = /* @__PURE__ */ template(`<div>`);
|
|
6172
6446
|
var InboxPage = /* @__PURE__ */ function(InboxPage2) {
|
|
6173
6447
|
InboxPage2["Notifications"] = "notifications";
|
|
6174
6448
|
InboxPage2["Preferences"] = "preferences";
|
|
@@ -6193,7 +6467,7 @@ var InboxContent = (props) => {
|
|
|
6193
6467
|
};
|
|
6194
6468
|
});
|
|
6195
6469
|
return (() => {
|
|
6196
|
-
var _el$ = _tmpl$
|
|
6470
|
+
var _el$ = _tmpl$73();
|
|
6197
6471
|
insert(_el$, createComponent(Switch$1, {
|
|
6198
6472
|
get children() {
|
|
6199
6473
|
return [createComponent(Match, {
|
|
@@ -6502,7 +6776,7 @@ var Renderer = (props) => {
|
|
|
6502
6776
|
portalDivElement.style.height = "100%";
|
|
6503
6777
|
}
|
|
6504
6778
|
});
|
|
6505
|
-
return createComponent(Portal
|
|
6779
|
+
return createComponent(Portal, {
|
|
6506
6780
|
mount: node,
|
|
6507
6781
|
ref: (el) => {
|
|
6508
6782
|
portalDivElement = el;
|