@novu/js 3.5.0-rc.2 → 3.5.0
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-5P6SPWNU.js} +94 -19
- 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 +1488 -1206
- package/dist/esm/{chunk-GPGRFVOZ.mjs → chunk-MGTTV7JA.mjs} +94 -20
- 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 +1482 -1200
- 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-MGTTV7JA.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
|
+
// _5owhcajcb:/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,20 @@ var InboxProvider = (props) => {
|
|
|
1028
1023
|
eventHandler: ({
|
|
1029
1024
|
data
|
|
1030
1025
|
}) => {
|
|
1026
|
+
var _a2, _b2;
|
|
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
|
+
if (data.isDevelopmentMode && !props.applicationIdentifier) {
|
|
1035
|
+
setIsKeyless(!data.applicationIdentifier || !!(identifier == null ? void 0 : identifier.startsWith("pk_keyless_")));
|
|
1036
|
+
setApplicationIdentifier((_a2 = data.applicationIdentifier) != null ? _a2 : null);
|
|
1037
|
+
} else {
|
|
1038
|
+
setApplicationIdentifier((_b2 = props.applicationIdentifier) != null ? _b2 : null);
|
|
1039
|
+
}
|
|
1037
1040
|
}
|
|
1038
1041
|
});
|
|
1039
1042
|
return createComponent(InboxContext.Provider, {
|
|
@@ -1054,7 +1057,9 @@ var InboxProvider = (props) => {
|
|
|
1054
1057
|
preferenceGroups,
|
|
1055
1058
|
isDevelopmentMode,
|
|
1056
1059
|
maxSnoozeDurationHours,
|
|
1057
|
-
isSnoozeEnabled
|
|
1060
|
+
isSnoozeEnabled,
|
|
1061
|
+
isKeyless,
|
|
1062
|
+
applicationIdentifier
|
|
1058
1063
|
},
|
|
1059
1064
|
get children() {
|
|
1060
1065
|
return props.children;
|
|
@@ -1660,248 +1665,125 @@ var Bell2 = (props) => {
|
|
|
1660
1665
|
function isBrowser() {
|
|
1661
1666
|
return typeof window !== "undefined";
|
|
1662
1667
|
}
|
|
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
|
-
}
|
|
1668
|
+
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>`);
|
|
1669
|
+
var ArrowUpRight = (props) => {
|
|
1796
1670
|
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);
|
|
1671
|
+
var _el$ = _tmpl$25();
|
|
1672
|
+
spread(_el$, props, true, true);
|
|
1804
1673
|
return _el$;
|
|
1805
1674
|
})();
|
|
1806
1675
|
};
|
|
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) {
|
|
1676
|
+
var TooltipContext = createContext(void 0);
|
|
1677
|
+
function TooltipRoot(props) {
|
|
1837
1678
|
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
1679
|
const [reference, setReference] = createSignal(null);
|
|
1848
1680
|
const [floating, setFloating] = createSignal(null);
|
|
1681
|
+
const {
|
|
1682
|
+
animations
|
|
1683
|
+
} = useAppearance();
|
|
1684
|
+
const defaultAnimationDuration = 0.2;
|
|
1685
|
+
const actualAnimationDuration = () => {
|
|
1686
|
+
var _a2;
|
|
1687
|
+
return (_a2 = props.animationDuration) != null ? _a2 : defaultAnimationDuration;
|
|
1688
|
+
};
|
|
1689
|
+
const effectiveAnimationDuration = createMemo(() => animations() ? actualAnimationDuration() : 0);
|
|
1849
1690
|
const position = useFloating(reference, floating, {
|
|
1850
|
-
|
|
1851
|
-
|
|
1691
|
+
placement: props.placement || "top",
|
|
1692
|
+
strategy: "fixed",
|
|
1852
1693
|
whileElementsMounted: autoUpdate,
|
|
1853
1694
|
middleware: [offset(10), flip({
|
|
1854
|
-
fallbackPlacements: props.fallbackPlacements
|
|
1695
|
+
fallbackPlacements: props.fallbackPlacements || ["bottom"]
|
|
1855
1696
|
}), shift()]
|
|
1856
1697
|
});
|
|
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
|
-
};
|
|
1698
|
+
const [uncontrolledOpen, setUncontrolledOpen] = createSignal((_a = props.open) != null ? _a : false);
|
|
1699
|
+
const openAccessor = createMemo(() => {
|
|
1700
|
+
return props.open !== void 0 ? !!props.open : uncontrolledOpen();
|
|
1864
1701
|
});
|
|
1865
|
-
const
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
onOpenChange()((prev) => !prev);
|
|
1702
|
+
const setOpenSetter = (valueOrFn) => {
|
|
1703
|
+
if (props.open === void 0) {
|
|
1704
|
+
setUncontrolledOpen(valueOrFn);
|
|
1705
|
+
}
|
|
1870
1706
|
};
|
|
1871
|
-
|
|
1707
|
+
const [shouldRenderTooltip, setShouldRenderTooltip] = createSignal(openAccessor());
|
|
1708
|
+
let renderTimeoutId;
|
|
1709
|
+
createEffect(() => {
|
|
1710
|
+
const isOpen = openAccessor();
|
|
1711
|
+
if (renderTimeoutId) {
|
|
1712
|
+
clearTimeout(renderTimeoutId);
|
|
1713
|
+
renderTimeoutId = void 0;
|
|
1714
|
+
}
|
|
1715
|
+
if (isOpen) {
|
|
1716
|
+
setShouldRenderTooltip(true);
|
|
1717
|
+
} else if (effectiveAnimationDuration() > 0) {
|
|
1718
|
+
renderTimeoutId = window.setTimeout(() => {
|
|
1719
|
+
setShouldRenderTooltip(false);
|
|
1720
|
+
}, effectiveAnimationDuration() * 1e3);
|
|
1721
|
+
} else {
|
|
1722
|
+
setShouldRenderTooltip(false);
|
|
1723
|
+
}
|
|
1724
|
+
});
|
|
1725
|
+
createEffect(() => {
|
|
1726
|
+
if (openAccessor()) {
|
|
1727
|
+
setShouldRenderTooltip(true);
|
|
1728
|
+
}
|
|
1729
|
+
});
|
|
1730
|
+
return createComponent(TooltipContext.Provider, {
|
|
1872
1731
|
value: {
|
|
1873
|
-
onToggle,
|
|
1874
|
-
onClose,
|
|
1875
1732
|
reference,
|
|
1876
1733
|
setReference,
|
|
1877
1734
|
floating,
|
|
1878
1735
|
setFloating,
|
|
1879
|
-
open,
|
|
1880
|
-
|
|
1736
|
+
open: openAccessor,
|
|
1737
|
+
shouldRender: shouldRenderTooltip,
|
|
1738
|
+
setOpen: setOpenSetter,
|
|
1739
|
+
floatingStyles: () => {
|
|
1740
|
+
var _a2, _b;
|
|
1741
|
+
return {
|
|
1742
|
+
position: position.strategy,
|
|
1743
|
+
top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
|
|
1744
|
+
left: `${(_b = position.x) != null ? _b : 0}px`
|
|
1745
|
+
};
|
|
1746
|
+
},
|
|
1747
|
+
effectiveAnimationDuration
|
|
1881
1748
|
},
|
|
1882
1749
|
get children() {
|
|
1883
1750
|
return props.children;
|
|
1884
1751
|
}
|
|
1885
1752
|
});
|
|
1886
1753
|
}
|
|
1887
|
-
function
|
|
1888
|
-
const context = useContext(
|
|
1754
|
+
function useTooltip() {
|
|
1755
|
+
const context = useContext(TooltipContext);
|
|
1889
1756
|
if (!context) {
|
|
1890
|
-
throw new Error("
|
|
1757
|
+
throw new Error("useTooltip must be used within Tooltip.Root component");
|
|
1891
1758
|
}
|
|
1892
1759
|
return context;
|
|
1893
1760
|
}
|
|
1761
|
+
var Motion = new Proxy(Motion$1, {
|
|
1762
|
+
get: (_, tag) => (props) => {
|
|
1763
|
+
const {
|
|
1764
|
+
animations
|
|
1765
|
+
} = useAppearance();
|
|
1766
|
+
return createComponent(Motion$1, mergeProps(props, {
|
|
1767
|
+
tag,
|
|
1768
|
+
get transition() {
|
|
1769
|
+
return animations() ? props.transition : {
|
|
1770
|
+
duration: 0
|
|
1771
|
+
};
|
|
1772
|
+
}
|
|
1773
|
+
}));
|
|
1774
|
+
}
|
|
1775
|
+
});
|
|
1894
1776
|
|
|
1895
|
-
// src/ui/components/primitives/
|
|
1896
|
-
var
|
|
1897
|
-
var
|
|
1898
|
-
var PopoverContentBody = (props) => {
|
|
1777
|
+
// src/ui/components/primitives/Tooltip/TooltipContent.tsx
|
|
1778
|
+
var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
|
|
1779
|
+
var TooltipContentBody = (props) => {
|
|
1899
1780
|
const {
|
|
1900
1781
|
open,
|
|
1901
1782
|
setFloating,
|
|
1902
1783
|
floating,
|
|
1903
|
-
floatingStyles
|
|
1904
|
-
|
|
1784
|
+
floatingStyles,
|
|
1785
|
+
effectiveAnimationDuration
|
|
1786
|
+
} = useTooltip();
|
|
1905
1787
|
const {
|
|
1906
1788
|
setActive,
|
|
1907
1789
|
removeActive
|
|
@@ -1910,80 +1792,72 @@ var PopoverContentBody = (props) => {
|
|
|
1910
1792
|
const style = useStyle();
|
|
1911
1793
|
onMount(() => {
|
|
1912
1794
|
const floatingEl = floating();
|
|
1913
|
-
setActive(floatingEl);
|
|
1795
|
+
if (floatingEl) setActive(floatingEl);
|
|
1914
1796
|
onCleanup(() => {
|
|
1915
|
-
removeActive(floatingEl);
|
|
1797
|
+
if (floatingEl) removeActive(floatingEl);
|
|
1916
1798
|
});
|
|
1917
1799
|
});
|
|
1918
|
-
return ((
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
}
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
}
|
|
1931
|
-
},
|
|
1932
|
-
|
|
1933
|
-
|
|
1800
|
+
return createComponent(Motion.div, mergeProps({
|
|
1801
|
+
initial: {
|
|
1802
|
+
opacity: 0,
|
|
1803
|
+
scale: 0.95
|
|
1804
|
+
},
|
|
1805
|
+
get animate() {
|
|
1806
|
+
return open() ? {
|
|
1807
|
+
opacity: 1,
|
|
1808
|
+
scale: 1
|
|
1809
|
+
} : {
|
|
1810
|
+
opacity: 0,
|
|
1811
|
+
scale: 0.95
|
|
1812
|
+
};
|
|
1813
|
+
},
|
|
1814
|
+
get transition() {
|
|
1815
|
+
return {
|
|
1816
|
+
duration: effectiveAnimationDuration(),
|
|
1817
|
+
easing: "ease-in-out"
|
|
1818
|
+
};
|
|
1819
|
+
},
|
|
1820
|
+
ref: setFloating,
|
|
1821
|
+
get ["class"]() {
|
|
1822
|
+
return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tooltipContent", tooltipContentVariants());
|
|
1823
|
+
},
|
|
1824
|
+
get style() {
|
|
1825
|
+
return __spreadProps(__spreadValues({}, floatingStyles()), {
|
|
1826
|
+
"z-index": 99999
|
|
1827
|
+
});
|
|
1828
|
+
}
|
|
1829
|
+
}, rest, {
|
|
1830
|
+
get children() {
|
|
1831
|
+
return props.children;
|
|
1832
|
+
}
|
|
1833
|
+
}));
|
|
1934
1834
|
};
|
|
1935
|
-
var
|
|
1936
|
-
const {
|
|
1937
|
-
open,
|
|
1938
|
-
onClose,
|
|
1939
|
-
reference,
|
|
1940
|
-
floating
|
|
1941
|
-
} = usePopover();
|
|
1835
|
+
var TooltipContent = (props) => {
|
|
1942
1836
|
const {
|
|
1943
|
-
|
|
1944
|
-
} =
|
|
1837
|
+
shouldRender
|
|
1838
|
+
} = useTooltip();
|
|
1945
1839
|
const {
|
|
1946
1840
|
container
|
|
1947
1841
|
} = 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(() => {
|
|
1842
|
+
const portalContainer = () => {
|
|
1974
1843
|
var _a;
|
|
1975
|
-
document.body
|
|
1976
|
-
|
|
1977
|
-
document.body.removeEventListener("keydown", handleEscapeKey);
|
|
1978
|
-
});
|
|
1844
|
+
return (_a = container()) != null ? _a : document.body;
|
|
1845
|
+
};
|
|
1979
1846
|
return createComponent(Show, {
|
|
1980
1847
|
get when() {
|
|
1981
|
-
return
|
|
1848
|
+
return shouldRender();
|
|
1982
1849
|
},
|
|
1983
1850
|
get children() {
|
|
1984
1851
|
return createComponent(Portal, {
|
|
1852
|
+
get mount() {
|
|
1853
|
+
return portalContainer();
|
|
1854
|
+
},
|
|
1985
1855
|
get children() {
|
|
1986
|
-
return createComponent(
|
|
1856
|
+
return createComponent(Root, {
|
|
1857
|
+
get children() {
|
|
1858
|
+
return createComponent(TooltipContentBody, props);
|
|
1859
|
+
}
|
|
1860
|
+
});
|
|
1987
1861
|
}
|
|
1988
1862
|
});
|
|
1989
1863
|
}
|
|
@@ -2000,22 +1874,28 @@ function mergeRefs(...refs) {
|
|
|
2000
1874
|
return chain(refs);
|
|
2001
1875
|
}
|
|
2002
1876
|
|
|
2003
|
-
// src/ui/components/primitives/
|
|
2004
|
-
var _tmpl$
|
|
2005
|
-
var
|
|
1877
|
+
// src/ui/components/primitives/Tooltip/TooltipTrigger.tsx
|
|
1878
|
+
var _tmpl$26 = /* @__PURE__ */ template(`<button>`);
|
|
1879
|
+
var TooltipTrigger = (props) => {
|
|
2006
1880
|
const {
|
|
2007
1881
|
setReference,
|
|
2008
|
-
|
|
2009
|
-
} =
|
|
1882
|
+
setOpen
|
|
1883
|
+
} = useTooltip();
|
|
2010
1884
|
const style = useStyle();
|
|
2011
|
-
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
|
|
2012
|
-
const
|
|
2013
|
-
if (typeof local.
|
|
2014
|
-
local.
|
|
1885
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "onMouseEnter", "onMouseLeave", "ref"]);
|
|
1886
|
+
const handleMouseEnter = (e) => {
|
|
1887
|
+
if (typeof local.onMouseEnter === "function") {
|
|
1888
|
+
local.onMouseEnter(e);
|
|
2015
1889
|
}
|
|
2016
|
-
|
|
1890
|
+
setOpen(true);
|
|
2017
1891
|
};
|
|
2018
1892
|
const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
1893
|
+
const handleMouseLeave = (e) => {
|
|
1894
|
+
if (typeof local.onMouseLeave === "function") {
|
|
1895
|
+
local.onMouseLeave(e);
|
|
1896
|
+
}
|
|
1897
|
+
setOpen(false);
|
|
1898
|
+
};
|
|
2019
1899
|
if (local.asChild) {
|
|
2020
1900
|
return createComponent(Dynamic, mergeProps({
|
|
2021
1901
|
get component() {
|
|
@@ -2025,244 +1905,329 @@ var PopoverTrigger = (props) => {
|
|
|
2025
1905
|
var _ref$ = ref();
|
|
2026
1906
|
typeof _ref$ === "function" && _ref$(r$);
|
|
2027
1907
|
},
|
|
2028
|
-
|
|
1908
|
+
onMouseEnter: handleMouseEnter,
|
|
1909
|
+
onMouseLeave: handleMouseLeave
|
|
2029
1910
|
}, rest));
|
|
2030
1911
|
}
|
|
2031
1912
|
return (() => {
|
|
2032
|
-
var _el$ = _tmpl$
|
|
2033
|
-
_el
|
|
1913
|
+
var _el$ = _tmpl$26();
|
|
1914
|
+
_el$.addEventListener("mouseleave", () => {
|
|
1915
|
+
setOpen(false);
|
|
1916
|
+
});
|
|
1917
|
+
_el$.addEventListener("mouseenter", () => {
|
|
1918
|
+
setOpen(true);
|
|
1919
|
+
});
|
|
2034
1920
|
var _ref$2 = ref();
|
|
2035
1921
|
typeof _ref$2 === "function" && use(_ref$2, _el$);
|
|
2036
1922
|
spread(_el$, mergeProps({
|
|
2037
1923
|
get ["class"]() {
|
|
2038
|
-
return style(local.appearanceKey || "
|
|
1924
|
+
return style(local.appearanceKey || "tooltipTrigger");
|
|
2039
1925
|
}
|
|
2040
1926
|
}, rest), false, true);
|
|
2041
1927
|
insert(_el$, () => props.children);
|
|
2042
1928
|
return _el$;
|
|
2043
1929
|
})();
|
|
2044
1930
|
};
|
|
2045
|
-
delegateEvents(["click"]);
|
|
2046
1931
|
|
|
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,
|
|
1932
|
+
// src/ui/components/primitives/Tooltip/index.ts
|
|
1933
|
+
var Tooltip = {
|
|
1934
|
+
Root: TooltipRoot,
|
|
2054
1935
|
/**
|
|
2055
|
-
*
|
|
1936
|
+
* Tooltip.Trigger renders a `button` and has no default styling.
|
|
2056
1937
|
*/
|
|
2057
|
-
|
|
1938
|
+
Trigger: TooltipTrigger,
|
|
2058
1939
|
/**
|
|
2059
|
-
*
|
|
2060
|
-
* Closes the popover when clicked.
|
|
2061
|
-
* `onClick` function is propagated.
|
|
1940
|
+
* Tooltip.Content renders a `div` and has popover specific styling.
|
|
2062
1941
|
*/
|
|
2063
|
-
|
|
1942
|
+
Content: TooltipContent
|
|
2064
1943
|
};
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
1944
|
+
|
|
1945
|
+
// src/ui/components/primitives/CopyToClipboard.tsx
|
|
1946
|
+
var _tmpl$27 = /* @__PURE__ */ template(`<button type=button>`);
|
|
1947
|
+
function CopyToClipboard(props) {
|
|
1948
|
+
const [isCopied, setIsCopied] = createSignal(false);
|
|
1949
|
+
const style = useStyle();
|
|
1950
|
+
let timeoutId;
|
|
1951
|
+
const defaultTooltipText = "Copied!";
|
|
1952
|
+
const defaultTooltipDuration = 2e3;
|
|
1953
|
+
function handleCopy() {
|
|
1954
|
+
return __async(this, null, function* () {
|
|
1955
|
+
var _a;
|
|
1956
|
+
if (timeoutId) {
|
|
1957
|
+
clearTimeout(timeoutId);
|
|
1958
|
+
}
|
|
1959
|
+
try {
|
|
1960
|
+
yield navigator.clipboard.writeText(props.textToCopy);
|
|
1961
|
+
setIsCopied(true);
|
|
1962
|
+
timeoutId = window.setTimeout(() => {
|
|
1963
|
+
setIsCopied(false);
|
|
1964
|
+
timeoutId = void 0;
|
|
1965
|
+
}, (_a = props.tooltipDuration) != null ? _a : defaultTooltipDuration);
|
|
1966
|
+
} catch (err) {
|
|
1967
|
+
console.error("Failed to copy text: ", err);
|
|
1968
|
+
}
|
|
1969
|
+
});
|
|
1970
|
+
}
|
|
1971
|
+
return createComponent(Tooltip.Root, {
|
|
1972
|
+
get open() {
|
|
1973
|
+
return isCopied();
|
|
2071
1974
|
},
|
|
2072
|
-
|
|
2073
|
-
|
|
1975
|
+
placement: "top",
|
|
1976
|
+
animationDuration: 0.15,
|
|
1977
|
+
get children() {
|
|
1978
|
+
return [createComponent(Tooltip.Trigger, {
|
|
1979
|
+
asChild: (triggerProps) => (() => {
|
|
1980
|
+
var _el$ = _tmpl$27();
|
|
1981
|
+
spread(_el$, mergeProps(triggerProps, {
|
|
1982
|
+
"onClick": handleCopy,
|
|
1983
|
+
get ["class"]() {
|
|
1984
|
+
return style("button", "nt-cursor-pointer");
|
|
1985
|
+
}
|
|
1986
|
+
}), false, true);
|
|
1987
|
+
insert(_el$, () => props.children);
|
|
1988
|
+
return _el$;
|
|
1989
|
+
})()
|
|
1990
|
+
}), createComponent(Tooltip.Content, {
|
|
1991
|
+
get children() {
|
|
1992
|
+
var _a;
|
|
1993
|
+
return (_a = props.tooltipText) != null ? _a : defaultTooltipText;
|
|
1994
|
+
}
|
|
1995
|
+
})];
|
|
2074
1996
|
}
|
|
2075
|
-
}
|
|
2076
|
-
}
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
1997
|
+
});
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
// src/ui/components/elements/Footer.tsx
|
|
2001
|
+
var _tmpl$28 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs nt-text-stripes">`);
|
|
2002
|
+
var _tmpl$29 = /* @__PURE__ */ template(`<span class="nt-z-10 nt-text-xs">\u2022`);
|
|
2003
|
+
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`);
|
|
2004
|
+
var _tmpl$42 = /* @__PURE__ */ template(`<span class=nt-underline>Copy cURL`);
|
|
2005
|
+
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 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`);
|
|
2006
|
+
var _tmpl$62 = /* @__PURE__ */ template(`<div><div class="nt-flex nt-items-center nt-gap-1">`);
|
|
2007
|
+
var _tmpl$72 = /* @__PURE__ */ template(`<a href="https://go.novu.co/keyless?utm_campaign=keyless-mode"target=_blank rel="noopener noreferrer">Keyless mode`);
|
|
2008
|
+
var _tmpl$82 = /* @__PURE__ */ template(`<br>`);
|
|
2009
|
+
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]`;
|
|
2010
|
+
var commonAfter = 'after:nt-content-[""] after:nt-absolute after:nt-inset-0 after:-nt-top-12';
|
|
2011
|
+
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)]`;
|
|
2012
|
+
var prodModeGradient = `${commonAfter} after:nt-bg-[linear-gradient(180deg,transparent,oklch(from_var(--nv-color-background)_l_c_h_/_0.9)_55%,transparent)]`;
|
|
2013
|
+
var Footer = () => {
|
|
2080
2014
|
const {
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
onClick: handleClick
|
|
2095
|
-
}, rest));
|
|
2015
|
+
hideBranding,
|
|
2016
|
+
isDevelopmentMode,
|
|
2017
|
+
isKeyless
|
|
2018
|
+
} = useInboxContext();
|
|
2019
|
+
const novu = useNovu();
|
|
2020
|
+
function handleTriggerHelloWorld() {
|
|
2021
|
+
return __async(this, null, function* () {
|
|
2022
|
+
try {
|
|
2023
|
+
yield novu.notifications.triggerHelloWorldEvent();
|
|
2024
|
+
} catch (error) {
|
|
2025
|
+
console.error("Failed to send Hello World from UI via novu.notifications:", error);
|
|
2026
|
+
}
|
|
2027
|
+
});
|
|
2096
2028
|
}
|
|
2097
|
-
return createComponent(
|
|
2098
|
-
get
|
|
2099
|
-
return
|
|
2100
|
-
},
|
|
2101
|
-
get ["class"]() {
|
|
2102
|
-
return cn(dropdownItemVariants(), local.class);
|
|
2029
|
+
return createComponent(Show, {
|
|
2030
|
+
get when() {
|
|
2031
|
+
return !hideBranding() || isDevelopmentMode();
|
|
2103
2032
|
},
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2033
|
+
get children() {
|
|
2034
|
+
var _el$ = _tmpl$62(), _el$2 = _el$.firstChild;
|
|
2035
|
+
_el$.style.setProperty("--stripes-size", "15px");
|
|
2036
|
+
insert(_el$2, createComponent(Show, {
|
|
2037
|
+
get when() {
|
|
2038
|
+
return isDevelopmentMode();
|
|
2039
|
+
},
|
|
2040
|
+
get children() {
|
|
2041
|
+
var _el$3 = _tmpl$28();
|
|
2042
|
+
insert(_el$3, (() => {
|
|
2043
|
+
var _c$ = memo(() => !!isKeyless());
|
|
2044
|
+
return () => _c$() ? createComponent(Tooltip.Root, {
|
|
2045
|
+
get children() {
|
|
2046
|
+
return [createComponent(Tooltip.Trigger, {
|
|
2047
|
+
"class": "",
|
|
2048
|
+
get children() {
|
|
2049
|
+
return _tmpl$72();
|
|
2050
|
+
}
|
|
2051
|
+
}), createComponent(Tooltip.Content, {
|
|
2052
|
+
get children() {
|
|
2053
|
+
return ["Temporary <Inbox />. All data will expire in 24 hours.", _tmpl$82(), "Connect API key to persist."];
|
|
2054
|
+
}
|
|
2055
|
+
})];
|
|
2056
|
+
}
|
|
2057
|
+
}) : "Development mode";
|
|
2058
|
+
})());
|
|
2059
|
+
return _el$3;
|
|
2060
|
+
}
|
|
2061
|
+
}), null);
|
|
2062
|
+
insert(_el$2, createComponent(Show, {
|
|
2063
|
+
get when() {
|
|
2064
|
+
return memo(() => !!isDevelopmentMode())() && !hideBranding();
|
|
2065
|
+
},
|
|
2066
|
+
get children() {
|
|
2067
|
+
return _tmpl$29();
|
|
2068
|
+
}
|
|
2069
|
+
}), null);
|
|
2070
|
+
insert(_el$2, createComponent(Show, {
|
|
2071
|
+
get when() {
|
|
2072
|
+
return !hideBranding();
|
|
2073
|
+
},
|
|
2074
|
+
get children() {
|
|
2075
|
+
var _el$5 = _tmpl$32(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
|
|
2076
|
+
insert(_el$5, createComponent(Novu2, {
|
|
2077
|
+
"class": "nt-size-2.5"
|
|
2078
|
+
}), _el$7);
|
|
2079
|
+
effect(() => setAttribute(_el$5, "href", `https://go.novu.co/powered?ref=${getCurrentDomain()}`));
|
|
2080
|
+
return _el$5;
|
|
2081
|
+
}
|
|
2082
|
+
}), null);
|
|
2083
|
+
insert(_el$, createComponent(Show, {
|
|
2084
|
+
get when() {
|
|
2085
|
+
return isKeyless();
|
|
2086
|
+
},
|
|
2087
|
+
get children() {
|
|
2088
|
+
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;
|
|
2089
|
+
insert(_el$9, createComponent(ArrowUpRight, {
|
|
2090
|
+
"class": "nt-ml-1"
|
|
2091
|
+
}), null);
|
|
2092
|
+
insert(_el$8, createComponent(CopyToClipboard, {
|
|
2093
|
+
get textToCopy() {
|
|
2094
|
+
return getCurlCommand();
|
|
2095
|
+
},
|
|
2096
|
+
get children() {
|
|
2097
|
+
return _tmpl$42();
|
|
2098
|
+
}
|
|
2099
|
+
}), _el$13);
|
|
2100
|
+
_el$14.$$click = (e) => {
|
|
2101
|
+
e.preventDefault();
|
|
2102
|
+
handleTriggerHelloWorld();
|
|
2103
|
+
};
|
|
2104
|
+
return _el$8;
|
|
2105
|
+
}
|
|
2106
|
+
}), null);
|
|
2107
|
+
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`, {
|
|
2108
|
+
[stripes]: isDevelopmentMode(),
|
|
2109
|
+
[devModeGradient]: isDevelopmentMode(),
|
|
2110
|
+
"nt-bg-[oklch(from_var(--nv-color-stripes)_l_c_h_/_0.1)]": isDevelopmentMode(),
|
|
2111
|
+
[prodModeGradient]: !isDevelopmentMode()
|
|
2112
|
+
})));
|
|
2113
|
+
return _el$;
|
|
2109
2114
|
}
|
|
2110
|
-
}
|
|
2111
|
-
};
|
|
2112
|
-
var DropdownRoot = (props) => {
|
|
2113
|
-
return createComponent(Popover.Root, mergeProps({
|
|
2114
|
-
placement: "bottom",
|
|
2115
|
-
fallbackPlacements: ["top"]
|
|
2116
|
-
}, props));
|
|
2115
|
+
});
|
|
2117
2116
|
};
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
return
|
|
2123
|
-
|
|
2124
|
-
|
|
2117
|
+
function getCurrentDomain() {
|
|
2118
|
+
if (isBrowser()) {
|
|
2119
|
+
return window.location.hostname;
|
|
2120
|
+
}
|
|
2121
|
+
return "";
|
|
2122
|
+
}
|
|
2123
|
+
function getCurlCommand() {
|
|
2124
|
+
const identifier = window.localStorage.getItem("novu_keyless_application_identifier");
|
|
2125
|
+
if (!identifier) {
|
|
2126
|
+
console.error("Novu application identifier not found for cURL command.");
|
|
2127
|
+
return "";
|
|
2128
|
+
}
|
|
2129
|
+
const DEFAULT_BACKEND_URL = typeof window !== "undefined" && window.NOVU_LOCAL_BACKEND_URL || "https://api.novu.co";
|
|
2130
|
+
return `curl -X POST ${DEFAULT_BACKEND_URL}/${DEFAULT_API_VERSION}/events/trigger -H 'Authorization: Keyless ${identifier}' -H 'Content-Type: application/json' -d '{
|
|
2131
|
+
"name": "hello-world",
|
|
2132
|
+
"to": {
|
|
2133
|
+
"subscriberId": "keyless-subscriber-id"
|
|
2134
|
+
},
|
|
2135
|
+
"payload": {
|
|
2136
|
+
"body": "New From Keyless Environment",
|
|
2137
|
+
"subject": "Hello World!"
|
|
2125
2138
|
}
|
|
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
|
-
}));
|
|
2139
|
+
}'`;
|
|
2140
|
+
}
|
|
2141
|
+
delegateEvents(["click"]);
|
|
2142
|
+
var _tmpl$30 = /* @__PURE__ */ template(`<button>`);
|
|
2143
|
+
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`), {
|
|
2144
|
+
variants: {
|
|
2145
|
+
variant: {
|
|
2146
|
+
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",
|
|
2147
|
+
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",
|
|
2148
|
+
ghost: "hover:nt-bg-neutral-alpha-100 nt-text-foreground-alpha-600 hover:nt-text-foreground-alpha-800",
|
|
2149
|
+
unstyled: ""
|
|
2150
|
+
},
|
|
2151
|
+
size: {
|
|
2152
|
+
none: "",
|
|
2153
|
+
iconSm: "nt-p-1 nt-rounded-md after:nt-rounded-md before:nt-rounded-md focus-visible:nt-rounded-md",
|
|
2154
|
+
icon: "nt-p-2.5 nt-rounded-xl before:nt-rounded-xl after:nt-rounded-xl focus-visible:nt-rounded-xl",
|
|
2155
|
+
default: "nt-px-2 nt-py-1 nt-rounded-lg focus-visible:nt-rounded-lg before:nt-rounded-lg after:nt-rounded-lg",
|
|
2156
|
+
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",
|
|
2157
|
+
lg: "nt-px-8 nt-py-2 nt-text-base before:nt-rounded-lg after:nt-rounded-lg focus-visible:nt-rounded-lg"
|
|
2158
|
+
}
|
|
2159
|
+
},
|
|
2160
|
+
defaultVariants: {
|
|
2161
|
+
variant: "default",
|
|
2162
|
+
size: "default"
|
|
2164
2163
|
}
|
|
2165
2164
|
});
|
|
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];
|
|
2165
|
+
var Button = (props) => {
|
|
2166
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
2167
|
+
const style = useStyle();
|
|
2168
|
+
return (() => {
|
|
2169
|
+
var _el$ = _tmpl$30();
|
|
2170
|
+
spread(_el$, mergeProps({
|
|
2171
|
+
get ["data-variant"]() {
|
|
2172
|
+
return props.variant;
|
|
2173
|
+
},
|
|
2174
|
+
get ["data-size"]() {
|
|
2175
|
+
return props.size;
|
|
2176
|
+
},
|
|
2177
|
+
get ["class"]() {
|
|
2178
|
+
return style(local.appearanceKey || "button", cn(buttonVariants({
|
|
2179
|
+
variant: props.variant,
|
|
2180
|
+
size: props.size
|
|
2181
|
+
}), local.class));
|
|
2212
2182
|
}
|
|
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;
|
|
2183
|
+
}, rest), false, false);
|
|
2184
|
+
return _el$;
|
|
2185
|
+
})();
|
|
2230
2186
|
};
|
|
2231
|
-
var
|
|
2232
|
-
var
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2187
|
+
var _tmpl$31 = /* @__PURE__ */ template(`<div>`);
|
|
2188
|
+
var _tmpl$210 = /* @__PURE__ */ template(`<div><span>`);
|
|
2189
|
+
var DatePickerContext = createContext({
|
|
2190
|
+
currentDate: () => /* @__PURE__ */ new Date(),
|
|
2191
|
+
setCurrentDate: () => {
|
|
2192
|
+
},
|
|
2193
|
+
viewMonth: () => /* @__PURE__ */ new Date(),
|
|
2194
|
+
setViewMonth: () => {
|
|
2195
|
+
},
|
|
2196
|
+
selectedDate: () => null,
|
|
2197
|
+
setSelectedDate: () => {
|
|
2198
|
+
},
|
|
2199
|
+
maxDays: () => 0
|
|
2200
|
+
});
|
|
2201
|
+
var useDatePicker = () => useContext(DatePickerContext);
|
|
2202
|
+
var DatePicker = (props) => {
|
|
2203
|
+
const [local, rest] = splitProps(props, ["children", "value", "onDateChange", "class", "maxDays"]);
|
|
2238
2204
|
const style = useStyle();
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2205
|
+
const today = /* @__PURE__ */ new Date();
|
|
2206
|
+
today.setHours(0, 0, 0, 0);
|
|
2207
|
+
const [currentDate, setCurrentDate] = createSignal(today);
|
|
2208
|
+
const [viewMonth, setViewMonth] = createSignal(today);
|
|
2209
|
+
const [selectedDate, setSelectedDate] = createSignal(local.value ? new Date(local.value) : null);
|
|
2210
|
+
const handleDateSelect = (date) => {
|
|
2211
|
+
setSelectedDate(date);
|
|
2212
|
+
if (local.onDateChange) {
|
|
2213
|
+
local.onDateChange(date);
|
|
2247
2214
|
}
|
|
2248
|
-
}
|
|
2249
|
-
|
|
2250
|
-
var _a2;
|
|
2251
|
-
(_a2 = local.onChange) == null ? void 0 : _a2.call(local, activeTab());
|
|
2252
|
-
});
|
|
2253
|
-
return createComponent(TabsContext.Provider, {
|
|
2215
|
+
};
|
|
2216
|
+
return createComponent(DatePickerContext.Provider, {
|
|
2254
2217
|
value: {
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2218
|
+
currentDate,
|
|
2219
|
+
setCurrentDate,
|
|
2220
|
+
viewMonth,
|
|
2221
|
+
setViewMonth,
|
|
2222
|
+
selectedDate,
|
|
2223
|
+
setSelectedDate: handleDateSelect,
|
|
2224
|
+
maxDays: () => props.maxDays
|
|
2259
2225
|
},
|
|
2260
2226
|
get children() {
|
|
2261
|
-
var _el$ = _tmpl$
|
|
2262
|
-
use(setTabsContainer, _el$);
|
|
2227
|
+
var _el$ = _tmpl$31();
|
|
2263
2228
|
spread(_el$, mergeProps({
|
|
2264
2229
|
get ["class"]() {
|
|
2265
|
-
return style(
|
|
2230
|
+
return style("datePicker", cn("nt-p-2", local.class));
|
|
2266
2231
|
}
|
|
2267
2232
|
}, rest), false, true);
|
|
2268
2233
|
insert(_el$, () => local.children);
|
|
@@ -2270,48 +2235,743 @@ var TabsRoot = (props) => {
|
|
|
2270
2235
|
}
|
|
2271
2236
|
});
|
|
2272
2237
|
};
|
|
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"]);
|
|
2238
|
+
var DatePickerHeader = (props) => {
|
|
2239
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "children"]);
|
|
2278
2240
|
const style = useStyle();
|
|
2279
2241
|
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
|
-
}
|
|
2242
|
+
viewMonth,
|
|
2243
|
+
setViewMonth,
|
|
2244
|
+
currentDate,
|
|
2245
|
+
maxDays
|
|
2246
|
+
} = useDatePicker();
|
|
2247
|
+
useAppearance();
|
|
2248
|
+
const prevIconClass = style("datePickerControlPrevTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
|
|
2249
|
+
iconKey: "arrowLeft"
|
|
2305
2250
|
});
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2251
|
+
const nextIconClass = style("datePickerControlNextTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700", {
|
|
2252
|
+
iconKey: "arrowRight"
|
|
2253
|
+
});
|
|
2254
|
+
const handlePrevMonth = () => {
|
|
2255
|
+
const date = new Date(viewMonth());
|
|
2256
|
+
date.setMonth(date.getMonth() - 1);
|
|
2257
|
+
const currentMonth = currentDate();
|
|
2258
|
+
if (date.getFullYear() < currentMonth.getFullYear() || date.getFullYear() === currentMonth.getFullYear() && date.getMonth() < currentMonth.getMonth()) {
|
|
2259
|
+
return;
|
|
2260
|
+
}
|
|
2261
|
+
setViewMonth(date);
|
|
2262
|
+
};
|
|
2263
|
+
const handleNextMonth = () => {
|
|
2264
|
+
const date = new Date(viewMonth());
|
|
2265
|
+
date.setMonth(date.getMonth() + 1);
|
|
2266
|
+
const maxDaysValue = maxDays();
|
|
2267
|
+
if (maxDaysValue > 0) {
|
|
2268
|
+
const maxDate = new Date(currentDate());
|
|
2269
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
2270
|
+
if (date.getFullYear() > maxDate.getFullYear() || date.getFullYear() === maxDate.getFullYear() && date.getMonth() > maxDate.getMonth()) {
|
|
2271
|
+
return;
|
|
2272
|
+
}
|
|
2273
|
+
}
|
|
2274
|
+
setViewMonth(date);
|
|
2275
|
+
};
|
|
2276
|
+
const isPrevDisabled = () => {
|
|
2277
|
+
const current = currentDate();
|
|
2278
|
+
const view = viewMonth();
|
|
2279
|
+
return view.getFullYear() === current.getFullYear() && view.getMonth() === current.getMonth();
|
|
2280
|
+
};
|
|
2281
|
+
const isNextDisabled = () => {
|
|
2282
|
+
const maxDaysValue = maxDays();
|
|
2283
|
+
if (maxDaysValue === 0) return false;
|
|
2284
|
+
const view = viewMonth();
|
|
2285
|
+
const maxDate = new Date(currentDate());
|
|
2286
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
2287
|
+
return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
|
|
2288
|
+
};
|
|
2289
|
+
return (() => {
|
|
2290
|
+
var _el$2 = _tmpl$210(), _el$3 = _el$2.firstChild;
|
|
2291
|
+
spread(_el$2, mergeProps({
|
|
2292
|
+
get ["class"]() {
|
|
2293
|
+
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));
|
|
2294
|
+
}
|
|
2295
|
+
}, rest), false, true);
|
|
2296
|
+
insert(_el$2, createComponent(Button, {
|
|
2297
|
+
appearanceKey: "datePickerControlPrevTrigger",
|
|
2298
|
+
variant: "ghost",
|
|
2299
|
+
onClick: (e) => {
|
|
2300
|
+
e.stopPropagation();
|
|
2301
|
+
handlePrevMonth();
|
|
2302
|
+
},
|
|
2303
|
+
get disabled() {
|
|
2304
|
+
return isPrevDisabled();
|
|
2305
|
+
},
|
|
2306
|
+
"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)]",
|
|
2307
|
+
get children() {
|
|
2308
|
+
return createComponent(IconRendererWrapper, {
|
|
2309
|
+
iconKey: "arrowLeft",
|
|
2310
|
+
"class": prevIconClass,
|
|
2311
|
+
get fallback() {
|
|
2312
|
+
return createComponent(ArrowLeft, {
|
|
2313
|
+
"class": prevIconClass
|
|
2314
|
+
});
|
|
2315
|
+
}
|
|
2316
|
+
});
|
|
2317
|
+
}
|
|
2318
|
+
}), _el$3);
|
|
2319
|
+
insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
|
|
2320
|
+
month: "long",
|
|
2321
|
+
year: "numeric"
|
|
2322
|
+
}));
|
|
2323
|
+
insert(_el$2, createComponent(Button, {
|
|
2324
|
+
appearanceKey: "datePickerControlNextTrigger",
|
|
2325
|
+
variant: "ghost",
|
|
2326
|
+
onClick: (e) => {
|
|
2327
|
+
e.stopPropagation();
|
|
2328
|
+
handleNextMonth();
|
|
2329
|
+
},
|
|
2330
|
+
get disabled() {
|
|
2331
|
+
return isNextDisabled();
|
|
2332
|
+
},
|
|
2333
|
+
"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)]",
|
|
2334
|
+
get children() {
|
|
2335
|
+
return createComponent(IconRendererWrapper, {
|
|
2336
|
+
iconKey: "arrowRight",
|
|
2337
|
+
"class": nextIconClass,
|
|
2338
|
+
get fallback() {
|
|
2339
|
+
return createComponent(ArrowRight, {
|
|
2340
|
+
"class": nextIconClass
|
|
2341
|
+
});
|
|
2342
|
+
}
|
|
2343
|
+
});
|
|
2344
|
+
}
|
|
2345
|
+
}), null);
|
|
2346
|
+
effect(() => className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
|
|
2347
|
+
return _el$2;
|
|
2348
|
+
})();
|
|
2349
|
+
};
|
|
2350
|
+
var DatePickerGridCellTrigger = (props) => {
|
|
2351
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "date"]);
|
|
2352
|
+
const {
|
|
2353
|
+
selectedDate,
|
|
2354
|
+
viewMonth,
|
|
2355
|
+
setSelectedDate,
|
|
2356
|
+
currentDate,
|
|
2357
|
+
maxDays
|
|
2358
|
+
} = useDatePicker();
|
|
2359
|
+
const {
|
|
2360
|
+
t
|
|
2361
|
+
} = useLocalization();
|
|
2362
|
+
const isCurrentMonth = props.date.getMonth() === viewMonth().getMonth();
|
|
2363
|
+
const isPastDate = () => {
|
|
2364
|
+
const today = currentDate();
|
|
2365
|
+
return props.date < today;
|
|
2366
|
+
};
|
|
2367
|
+
const isFutureDate = () => {
|
|
2368
|
+
const maxDaysValue = maxDays();
|
|
2369
|
+
if (maxDaysValue === 0) return false;
|
|
2370
|
+
const maxDate = new Date(currentDate());
|
|
2371
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
2372
|
+
return props.date > maxDate;
|
|
2373
|
+
};
|
|
2374
|
+
const isDisabled = !isCurrentMonth || isPastDate() || isFutureDate();
|
|
2375
|
+
const isExceedingLimit = () => {
|
|
2376
|
+
return isCurrentMonth && isFutureDate();
|
|
2377
|
+
};
|
|
2378
|
+
const buttonElement = createComponent(Button, mergeProps({
|
|
2379
|
+
appearanceKey: "datePickerCalendarDay__button",
|
|
2380
|
+
variant: "ghost",
|
|
2381
|
+
disabled: isDisabled,
|
|
2382
|
+
onClick: (e) => {
|
|
2383
|
+
e.stopPropagation();
|
|
2384
|
+
setSelectedDate(local.date);
|
|
2385
|
+
},
|
|
2386
|
+
get ["class"]() {
|
|
2387
|
+
var _a;
|
|
2388
|
+
return cn("nt-size-8 nt-w-full nt-rounded-md nt-flex nt-items-center nt-justify-center", {
|
|
2389
|
+
"nt-text-muted-foreground disabled:nt-opacity-20": !isCurrentMonth || isPastDate(),
|
|
2390
|
+
"nt-text-foreground-alpha-700": isCurrentMonth && !isPastDate() && !isFutureDate()
|
|
2391
|
+
}, {
|
|
2392
|
+
"nt-bg-primary-alpha-300 hover:nt-bg-primary-alpha-400": ((_a = selectedDate()) == null ? void 0 : _a.toDateString()) === local.date.toDateString()
|
|
2393
|
+
});
|
|
2394
|
+
}
|
|
2395
|
+
}, rest, {
|
|
2396
|
+
get children() {
|
|
2397
|
+
return local.date.getDate();
|
|
2398
|
+
}
|
|
2399
|
+
}));
|
|
2400
|
+
if (isExceedingLimit()) {
|
|
2401
|
+
return createComponent(Tooltip.Root, {
|
|
2402
|
+
get children() {
|
|
2403
|
+
return [createComponent(Tooltip.Trigger, {
|
|
2404
|
+
children: buttonElement
|
|
2405
|
+
}), createComponent(Tooltip.Content, {
|
|
2406
|
+
get children() {
|
|
2407
|
+
return t("snooze.datePicker.exceedingLimitTooltip", {
|
|
2408
|
+
days: maxDays()
|
|
2409
|
+
});
|
|
2410
|
+
}
|
|
2411
|
+
})];
|
|
2412
|
+
}
|
|
2413
|
+
});
|
|
2414
|
+
}
|
|
2415
|
+
return buttonElement;
|
|
2416
|
+
};
|
|
2417
|
+
var DatePickerCalendar = (props) => {
|
|
2418
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
2419
|
+
const style = useStyle();
|
|
2420
|
+
const {
|
|
2421
|
+
viewMonth
|
|
2422
|
+
} = useDatePicker();
|
|
2423
|
+
const getDaysInMonth = () => {
|
|
2424
|
+
const year = viewMonth().getFullYear();
|
|
2425
|
+
const month = viewMonth().getMonth();
|
|
2426
|
+
const firstDay = new Date(year, month, 1);
|
|
2427
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
2428
|
+
const startingDay = firstDay.getDay();
|
|
2429
|
+
const days = [];
|
|
2430
|
+
for (let i = 0; i < startingDay; i += 1) {
|
|
2431
|
+
const prevMonthDay = new Date(year, month, -i);
|
|
2432
|
+
days.unshift(prevMonthDay);
|
|
2433
|
+
}
|
|
2434
|
+
for (let i = 1; i <= daysInMonth; i += 1) {
|
|
2435
|
+
days.push(new Date(year, month, i));
|
|
2436
|
+
}
|
|
2437
|
+
const remainingCells = 7 - days.length % 7;
|
|
2438
|
+
if (remainingCells < 7) {
|
|
2439
|
+
for (let i = 1; i <= remainingCells; i += 1) {
|
|
2440
|
+
days.push(new Date(year, month + 1, i));
|
|
2441
|
+
}
|
|
2442
|
+
}
|
|
2443
|
+
return days;
|
|
2444
|
+
};
|
|
2445
|
+
return (() => {
|
|
2446
|
+
var _el$8 = _tmpl$31();
|
|
2447
|
+
_el$8.$$click = (e) => e.stopPropagation();
|
|
2448
|
+
spread(_el$8, mergeProps({
|
|
2449
|
+
get ["class"]() {
|
|
2450
|
+
return style(local.appearanceKey || "datePickerCalendar", cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class));
|
|
2451
|
+
}
|
|
2452
|
+
}, rest), false, true);
|
|
2453
|
+
insert(_el$8, () => getDaysInMonth().map((date) => {
|
|
2454
|
+
return createComponent(DatePickerGridCellTrigger, {
|
|
2455
|
+
date
|
|
2456
|
+
});
|
|
2457
|
+
}));
|
|
2458
|
+
return _el$8;
|
|
2459
|
+
})();
|
|
2460
|
+
};
|
|
2461
|
+
delegateEvents(["click"]);
|
|
2462
|
+
var _tmpl$33 = /* @__PURE__ */ template(`<button>`);
|
|
2463
|
+
var PopoverClose = (props) => {
|
|
2464
|
+
const {
|
|
2465
|
+
onClose
|
|
2466
|
+
} = usePopover();
|
|
2467
|
+
const style = useStyle();
|
|
2468
|
+
const [local, rest] = splitProps(props, ["onClick", "asChild", "appearanceKey", "class"]);
|
|
2469
|
+
const handleClick = (e) => {
|
|
2470
|
+
if (typeof local.onClick === "function") {
|
|
2471
|
+
local.onClick(e);
|
|
2472
|
+
}
|
|
2473
|
+
onClose();
|
|
2474
|
+
};
|
|
2475
|
+
if (local.asChild) {
|
|
2476
|
+
return createComponent(Dynamic, mergeProps({
|
|
2477
|
+
get component() {
|
|
2478
|
+
return local.asChild;
|
|
2479
|
+
},
|
|
2480
|
+
onClick: handleClick
|
|
2481
|
+
}, rest));
|
|
2482
|
+
}
|
|
2483
|
+
return (() => {
|
|
2484
|
+
var _el$ = _tmpl$33();
|
|
2485
|
+
_el$.$$click = handleClick;
|
|
2486
|
+
spread(_el$, mergeProps({
|
|
2487
|
+
get ["class"]() {
|
|
2488
|
+
return style(local.appearanceKey || "popoverClose", local.class);
|
|
2489
|
+
}
|
|
2490
|
+
}, rest), false, false);
|
|
2491
|
+
return _el$;
|
|
2492
|
+
})();
|
|
2493
|
+
};
|
|
2494
|
+
delegateEvents(["click"]);
|
|
2495
|
+
var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
|
|
2496
|
+
var Portal2 = (props) => {
|
|
2497
|
+
const appearance = useAppearance();
|
|
2498
|
+
let currentElement;
|
|
2499
|
+
return [(() => {
|
|
2500
|
+
var _el$ = _tmpl$34();
|
|
2501
|
+
use((el) => {
|
|
2502
|
+
currentElement = el;
|
|
2503
|
+
}, _el$);
|
|
2504
|
+
_el$.style.setProperty("display", "none");
|
|
2505
|
+
return _el$;
|
|
2506
|
+
})(), createComponent(Portal, mergeProps({
|
|
2507
|
+
get mount() {
|
|
2508
|
+
return closestNovuRootParent(currentElement, appearance.id());
|
|
2509
|
+
}
|
|
2510
|
+
}, props))];
|
|
2511
|
+
};
|
|
2512
|
+
var closestNovuRootParent = (el, id) => {
|
|
2513
|
+
let element = el;
|
|
2514
|
+
while (element && element.id !== `novu-root-${id}`) {
|
|
2515
|
+
element = element.parentElement;
|
|
2516
|
+
}
|
|
2517
|
+
if (element && element.id === `novu-root-${id}`) {
|
|
2518
|
+
return element;
|
|
2519
|
+
}
|
|
2520
|
+
return void 0;
|
|
2521
|
+
};
|
|
2522
|
+
var PopoverContext = createContext(void 0);
|
|
2523
|
+
function PopoverRoot(props) {
|
|
2524
|
+
var _a;
|
|
2525
|
+
const [uncontrolledIsOpen, setUncontrolledIsOpen] = createSignal((_a = props.open) != null ? _a : false);
|
|
2526
|
+
const onOpenChange = () => {
|
|
2527
|
+
var _a2;
|
|
2528
|
+
return (_a2 = props.onOpenChange) != null ? _a2 : setUncontrolledIsOpen;
|
|
2529
|
+
};
|
|
2530
|
+
const open = () => {
|
|
2531
|
+
var _a2;
|
|
2532
|
+
return (_a2 = props.open) != null ? _a2 : uncontrolledIsOpen();
|
|
2533
|
+
};
|
|
2534
|
+
const [reference, setReference] = createSignal(null);
|
|
2535
|
+
const [floating, setFloating] = createSignal(null);
|
|
2536
|
+
const position = useFloating(reference, floating, {
|
|
2537
|
+
strategy: "absolute",
|
|
2538
|
+
placement: props.placement,
|
|
2539
|
+
whileElementsMounted: autoUpdate,
|
|
2540
|
+
middleware: [offset(10), flip({
|
|
2541
|
+
fallbackPlacements: props.fallbackPlacements
|
|
2542
|
+
}), shift()]
|
|
2543
|
+
});
|
|
2544
|
+
const floatingStyles = createMemo(() => {
|
|
2545
|
+
var _a2, _b;
|
|
2546
|
+
return {
|
|
2547
|
+
position: position.strategy,
|
|
2548
|
+
top: `${(_a2 = position.y) != null ? _a2 : 0}px`,
|
|
2549
|
+
left: `${(_b = position.x) != null ? _b : 0}px`
|
|
2550
|
+
};
|
|
2551
|
+
});
|
|
2552
|
+
const onClose = () => {
|
|
2553
|
+
onOpenChange()(false);
|
|
2554
|
+
};
|
|
2555
|
+
const onToggle = () => {
|
|
2556
|
+
onOpenChange()((prev) => !prev);
|
|
2557
|
+
};
|
|
2558
|
+
return createComponent(PopoverContext.Provider, {
|
|
2559
|
+
value: {
|
|
2560
|
+
onToggle,
|
|
2561
|
+
onClose,
|
|
2562
|
+
reference,
|
|
2563
|
+
setReference,
|
|
2564
|
+
floating,
|
|
2565
|
+
setFloating,
|
|
2566
|
+
open,
|
|
2567
|
+
floatingStyles
|
|
2568
|
+
},
|
|
2569
|
+
get children() {
|
|
2570
|
+
return props.children;
|
|
2571
|
+
}
|
|
2572
|
+
});
|
|
2573
|
+
}
|
|
2574
|
+
function usePopover() {
|
|
2575
|
+
const context = useContext(PopoverContext);
|
|
2576
|
+
if (!context) {
|
|
2577
|
+
throw new Error("usePopover must be used within Popover.Root component");
|
|
2578
|
+
}
|
|
2579
|
+
return context;
|
|
2580
|
+
}
|
|
2581
|
+
|
|
2582
|
+
// src/ui/components/primitives/Popover/PopoverContent.tsx
|
|
2583
|
+
var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
|
|
2584
|
+
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");
|
|
2585
|
+
var PopoverContentBody = (props) => {
|
|
2586
|
+
const {
|
|
2587
|
+
open,
|
|
2588
|
+
setFloating,
|
|
2589
|
+
floating,
|
|
2590
|
+
floatingStyles
|
|
2591
|
+
} = usePopover();
|
|
2592
|
+
const {
|
|
2593
|
+
setActive,
|
|
2594
|
+
removeActive
|
|
2595
|
+
} = useFocusManager();
|
|
2596
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "style"]);
|
|
2597
|
+
const style = useStyle();
|
|
2598
|
+
onMount(() => {
|
|
2599
|
+
const floatingEl = floating();
|
|
2600
|
+
setActive(floatingEl);
|
|
2601
|
+
onCleanup(() => {
|
|
2602
|
+
removeActive(floatingEl);
|
|
2603
|
+
});
|
|
2604
|
+
});
|
|
2605
|
+
return (() => {
|
|
2606
|
+
var _el$ = _tmpl$35();
|
|
2607
|
+
use(setFloating, _el$);
|
|
2608
|
+
spread(_el$, mergeProps({
|
|
2609
|
+
get ["class"]() {
|
|
2610
|
+
return style(local.appearanceKey || "popoverContent", cn(popoverContentVariants(), local.class));
|
|
2611
|
+
},
|
|
2612
|
+
get style() {
|
|
2613
|
+
return floatingStyles();
|
|
2614
|
+
},
|
|
2615
|
+
get ["data-open"]() {
|
|
2616
|
+
return open();
|
|
2617
|
+
}
|
|
2618
|
+
}, rest), false, false);
|
|
2619
|
+
return _el$;
|
|
2620
|
+
})();
|
|
2621
|
+
};
|
|
2622
|
+
var PopoverContent = (props) => {
|
|
2623
|
+
const {
|
|
2624
|
+
open,
|
|
2625
|
+
onClose,
|
|
2626
|
+
reference,
|
|
2627
|
+
floating
|
|
2628
|
+
} = usePopover();
|
|
2629
|
+
const {
|
|
2630
|
+
active
|
|
2631
|
+
} = useFocusManager();
|
|
2632
|
+
const {
|
|
2633
|
+
container
|
|
2634
|
+
} = useAppearance();
|
|
2635
|
+
const handleClickOutside = (e) => {
|
|
2636
|
+
var _a, _b;
|
|
2637
|
+
if ((_a = reference()) == null ? void 0 : _a.contains(e.target)) {
|
|
2638
|
+
return;
|
|
2639
|
+
}
|
|
2640
|
+
const containerElement = container();
|
|
2641
|
+
if (active() !== floating() || ((_b = floating()) == null ? void 0 : _b.contains(e.target)) || containerElement && e.target.shadowRoot === containerElement) {
|
|
2642
|
+
return;
|
|
2643
|
+
}
|
|
2644
|
+
onClose();
|
|
2645
|
+
};
|
|
2646
|
+
const handleEscapeKey = (e) => {
|
|
2647
|
+
if (active() !== floating()) {
|
|
2648
|
+
return;
|
|
2649
|
+
}
|
|
2650
|
+
if (e instanceof KeyboardEvent && e.key === "Escape") {
|
|
2651
|
+
onClose();
|
|
2652
|
+
}
|
|
2653
|
+
};
|
|
2654
|
+
onMount(() => {
|
|
2655
|
+
var _a;
|
|
2656
|
+
document.body.addEventListener("click", handleClickOutside);
|
|
2657
|
+
(_a = container()) == null ? void 0 : _a.addEventListener("click", handleClickOutside);
|
|
2658
|
+
document.body.addEventListener("keydown", handleEscapeKey);
|
|
2659
|
+
});
|
|
2660
|
+
onCleanup(() => {
|
|
2661
|
+
var _a;
|
|
2662
|
+
document.body.removeEventListener("click", handleClickOutside);
|
|
2663
|
+
(_a = container()) == null ? void 0 : _a.removeEventListener("click", handleClickOutside);
|
|
2664
|
+
document.body.removeEventListener("keydown", handleEscapeKey);
|
|
2665
|
+
});
|
|
2666
|
+
return createComponent(Show, {
|
|
2667
|
+
get when() {
|
|
2668
|
+
return open();
|
|
2669
|
+
},
|
|
2670
|
+
get children() {
|
|
2671
|
+
return createComponent(Portal2, {
|
|
2672
|
+
get children() {
|
|
2673
|
+
return createComponent(PopoverContentBody, props);
|
|
2674
|
+
}
|
|
2675
|
+
});
|
|
2676
|
+
}
|
|
2677
|
+
});
|
|
2678
|
+
};
|
|
2679
|
+
var _tmpl$36 = /* @__PURE__ */ template(`<button>`);
|
|
2680
|
+
var PopoverTrigger = (props) => {
|
|
2681
|
+
const {
|
|
2682
|
+
setReference,
|
|
2683
|
+
onToggle
|
|
2684
|
+
} = usePopover();
|
|
2685
|
+
const style = useStyle();
|
|
2686
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
|
|
2687
|
+
const handleClick = (e) => {
|
|
2688
|
+
if (typeof local.onClick === "function") {
|
|
2689
|
+
local.onClick(e);
|
|
2690
|
+
}
|
|
2691
|
+
onToggle();
|
|
2692
|
+
};
|
|
2693
|
+
const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
2694
|
+
if (local.asChild) {
|
|
2695
|
+
return createComponent(Dynamic, mergeProps({
|
|
2696
|
+
get component() {
|
|
2697
|
+
return local.asChild;
|
|
2698
|
+
},
|
|
2699
|
+
ref(r$) {
|
|
2700
|
+
var _ref$ = ref();
|
|
2701
|
+
typeof _ref$ === "function" && _ref$(r$);
|
|
2702
|
+
},
|
|
2703
|
+
onClick: handleClick
|
|
2704
|
+
}, rest));
|
|
2705
|
+
}
|
|
2706
|
+
return (() => {
|
|
2707
|
+
var _el$ = _tmpl$36();
|
|
2708
|
+
_el$.$$click = handleClick;
|
|
2709
|
+
var _ref$2 = ref();
|
|
2710
|
+
typeof _ref$2 === "function" && use(_ref$2, _el$);
|
|
2711
|
+
spread(_el$, mergeProps({
|
|
2712
|
+
get ["class"]() {
|
|
2713
|
+
return style(local.appearanceKey || "dropdownTrigger");
|
|
2714
|
+
}
|
|
2715
|
+
}, rest), false, true);
|
|
2716
|
+
insert(_el$, () => props.children);
|
|
2717
|
+
return _el$;
|
|
2718
|
+
})();
|
|
2719
|
+
};
|
|
2720
|
+
delegateEvents(["click"]);
|
|
2721
|
+
|
|
2722
|
+
// src/ui/components/primitives/Popover/index.ts
|
|
2723
|
+
var Popover = {
|
|
2724
|
+
Root: PopoverRoot,
|
|
2725
|
+
/**
|
|
2726
|
+
* Popover.Trigger renders a `button` and has no default styling.
|
|
2727
|
+
*/
|
|
2728
|
+
Trigger: PopoverTrigger,
|
|
2729
|
+
/**
|
|
2730
|
+
* Popover.Content renders a `div` and has popover specific styling.
|
|
2731
|
+
*/
|
|
2732
|
+
Content: PopoverContent,
|
|
2733
|
+
/**
|
|
2734
|
+
* Popover.Close renders a `button` and has no styling.
|
|
2735
|
+
* Closes the popover when clicked.
|
|
2736
|
+
* `onClick` function is propagated.
|
|
2737
|
+
*/
|
|
2738
|
+
Close: PopoverClose
|
|
2739
|
+
};
|
|
2740
|
+
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";
|
|
2741
|
+
var DropdownContent = (props) => {
|
|
2742
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
|
|
2743
|
+
return createComponent(Popover.Content, mergeProps({
|
|
2744
|
+
get appearanceKey() {
|
|
2745
|
+
return local.appearanceKey || "dropdownContent";
|
|
2746
|
+
},
|
|
2747
|
+
get ["class"]() {
|
|
2748
|
+
return cn(dropdownContentVariants(), local.class);
|
|
2749
|
+
}
|
|
2750
|
+
}, rest));
|
|
2751
|
+
};
|
|
2752
|
+
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";
|
|
2753
|
+
var DropdownItem = (props) => {
|
|
2754
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "onClick", "class", "asChild"]);
|
|
2755
|
+
const {
|
|
2756
|
+
onClose
|
|
2757
|
+
} = usePopover();
|
|
2758
|
+
const handleClick = (e) => {
|
|
2759
|
+
if (typeof local.onClick === "function") {
|
|
2760
|
+
local.onClick(e);
|
|
2761
|
+
}
|
|
2762
|
+
onClose();
|
|
2763
|
+
};
|
|
2764
|
+
if (local.asChild) {
|
|
2765
|
+
return createComponent(Dynamic, mergeProps({
|
|
2766
|
+
get component() {
|
|
2767
|
+
return local.asChild;
|
|
2768
|
+
},
|
|
2769
|
+
onClick: handleClick
|
|
2770
|
+
}, rest));
|
|
2771
|
+
}
|
|
2772
|
+
return createComponent(Popover.Close, mergeProps({
|
|
2773
|
+
get appearanceKey() {
|
|
2774
|
+
return local.appearanceKey || "dropdownItem";
|
|
2775
|
+
},
|
|
2776
|
+
get ["class"]() {
|
|
2777
|
+
return cn(dropdownItemVariants(), local.class);
|
|
2778
|
+
},
|
|
2779
|
+
onClick: (e) => {
|
|
2780
|
+
if (typeof local.onClick === "function") {
|
|
2781
|
+
local.onClick(e);
|
|
2782
|
+
}
|
|
2783
|
+
onClose();
|
|
2784
|
+
}
|
|
2785
|
+
}, rest));
|
|
2786
|
+
};
|
|
2787
|
+
var DropdownRoot = (props) => {
|
|
2788
|
+
return createComponent(Popover.Root, mergeProps({
|
|
2789
|
+
placement: "bottom",
|
|
2790
|
+
fallbackPlacements: ["top"]
|
|
2791
|
+
}, props));
|
|
2792
|
+
};
|
|
2793
|
+
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`;
|
|
2794
|
+
var DropdownTrigger = (props) => {
|
|
2795
|
+
const style = useStyle();
|
|
2796
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
|
|
2797
|
+
return createComponent(Popover.Trigger, mergeProps({
|
|
2798
|
+
get ["class"]() {
|
|
2799
|
+
return style(local.appearanceKey || "dropdownTrigger", cn(dropdownTriggerButtonVariants(), local.class));
|
|
2800
|
+
}
|
|
2801
|
+
}, rest));
|
|
2802
|
+
};
|
|
2803
|
+
|
|
2804
|
+
// src/ui/components/primitives/Dropdown/index.ts
|
|
2805
|
+
var Dropdown = {
|
|
2806
|
+
Root: DropdownRoot,
|
|
2807
|
+
/**
|
|
2808
|
+
* Dropdown.Trigger renders a `button` and has no default styling.
|
|
2809
|
+
*/
|
|
2810
|
+
Trigger: DropdownTrigger,
|
|
2811
|
+
/**
|
|
2812
|
+
* Dropdown.Content renders a `Popover.Content` by default.
|
|
2813
|
+
*/
|
|
2814
|
+
Content: DropdownContent,
|
|
2815
|
+
/**
|
|
2816
|
+
* Dropdown.Close renders a `Popover.Close` by default.
|
|
2817
|
+
*/
|
|
2818
|
+
Close: Popover.Close,
|
|
2819
|
+
/**
|
|
2820
|
+
* Dropdown.Item renders a `Popover.Close` with dropdown specific styling.
|
|
2821
|
+
* Closes the popover when clicked.
|
|
2822
|
+
* `onClick` function is propagated.
|
|
2823
|
+
*/
|
|
2824
|
+
Item: DropdownItem
|
|
2825
|
+
};
|
|
2826
|
+
var useKeyboardNavigation = ({
|
|
2827
|
+
activeTab,
|
|
2828
|
+
setActiveTab,
|
|
2829
|
+
tabsContainer
|
|
2830
|
+
}) => {
|
|
2831
|
+
const { container } = useAppearance();
|
|
2832
|
+
const [keyboardNavigation, setKeyboardNavigation] = createSignal(false);
|
|
2833
|
+
const getRoot = () => {
|
|
2834
|
+
const containerElement = container();
|
|
2835
|
+
return containerElement instanceof ShadowRoot ? containerElement : document;
|
|
2836
|
+
};
|
|
2837
|
+
createEffect(() => {
|
|
2838
|
+
const root = getRoot();
|
|
2839
|
+
const handleTabKey = (event) => {
|
|
2840
|
+
var _a;
|
|
2841
|
+
if (!(event instanceof KeyboardEvent) || event.key !== "Tab") {
|
|
2842
|
+
return;
|
|
2843
|
+
}
|
|
2844
|
+
const tabs = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]');
|
|
2845
|
+
if (!tabs || !root.activeElement) {
|
|
2846
|
+
return;
|
|
2847
|
+
}
|
|
2848
|
+
setKeyboardNavigation(Array.from(tabs).includes(root.activeElement));
|
|
2849
|
+
};
|
|
2850
|
+
root.addEventListener("keyup", handleTabKey);
|
|
2851
|
+
return onCleanup(() => root.removeEventListener("keyup", handleTabKey));
|
|
2852
|
+
});
|
|
2853
|
+
createEffect(() => {
|
|
2854
|
+
const root = getRoot();
|
|
2855
|
+
const handleArrowKeys = (event) => {
|
|
2856
|
+
var _a, _b;
|
|
2857
|
+
if (!keyboardNavigation() || !(event instanceof KeyboardEvent) || event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
|
|
2858
|
+
return;
|
|
2859
|
+
}
|
|
2860
|
+
const tabElements = Array.from((_b = (_a = tabsContainer()) == null ? void 0 : _a.querySelectorAll('[role="tab"]')) != null ? _b : []);
|
|
2861
|
+
const tabIds = tabElements.map((tab) => tab.id);
|
|
2862
|
+
const currentIndex = tabIds.indexOf(activeTab());
|
|
2863
|
+
const { length } = tabIds;
|
|
2864
|
+
let activeIndex = currentIndex;
|
|
2865
|
+
let newTab = activeTab();
|
|
2866
|
+
if (event.key === "ArrowLeft") {
|
|
2867
|
+
activeIndex = currentIndex === 0 ? length - 1 : currentIndex - 1;
|
|
2868
|
+
newTab = tabIds[activeIndex];
|
|
2869
|
+
} else if (event.key === "ArrowRight") {
|
|
2870
|
+
activeIndex = currentIndex === length - 1 ? 0 : currentIndex + 1;
|
|
2871
|
+
newTab = tabIds[activeIndex];
|
|
2872
|
+
}
|
|
2873
|
+
tabElements[activeIndex].focus();
|
|
2874
|
+
setActiveTab(newTab);
|
|
2875
|
+
};
|
|
2876
|
+
root.addEventListener("keydown", handleArrowKeys);
|
|
2877
|
+
return onCleanup(() => root.removeEventListener("keydown", handleArrowKeys));
|
|
2878
|
+
});
|
|
2879
|
+
};
|
|
2880
|
+
|
|
2881
|
+
// src/ui/components/primitives/Tabs/TabsRoot.tsx
|
|
2882
|
+
var _tmpl$37 = /* @__PURE__ */ template(`<div>`);
|
|
2883
|
+
var TabsContext = createContext(void 0);
|
|
2884
|
+
var useTabsContext = () => {
|
|
2885
|
+
const context = useContext(TabsContext);
|
|
2886
|
+
if (!context) {
|
|
2887
|
+
throw new Error("useTabsContext must be used within an TabsContext.Provider");
|
|
2888
|
+
}
|
|
2889
|
+
return context;
|
|
2890
|
+
};
|
|
2891
|
+
var tabsRootVariants = () => "nt-flex nt-flex-col";
|
|
2892
|
+
var TabsRoot = (props) => {
|
|
2893
|
+
var _a;
|
|
2894
|
+
const [local, rest] = splitProps(props, ["defaultValue", "value", "class", "appearanceKey", "onChange", "children"]);
|
|
2895
|
+
const [tabsContainer, setTabsContainer] = createSignal();
|
|
2896
|
+
const [visibleTabs, setVisibleTabs] = createSignal([]);
|
|
2897
|
+
const [activeTab, setActiveTab] = createSignal((_a = local.defaultValue) != null ? _a : "");
|
|
2898
|
+
const style = useStyle();
|
|
2899
|
+
useKeyboardNavigation({
|
|
2900
|
+
tabsContainer,
|
|
2901
|
+
activeTab,
|
|
2902
|
+
setActiveTab
|
|
2903
|
+
});
|
|
2904
|
+
createEffect(() => {
|
|
2905
|
+
if (local.value) {
|
|
2906
|
+
setActiveTab(local.value);
|
|
2907
|
+
}
|
|
2908
|
+
});
|
|
2909
|
+
createEffect(() => {
|
|
2910
|
+
var _a2;
|
|
2911
|
+
(_a2 = local.onChange) == null ? void 0 : _a2.call(local, activeTab());
|
|
2912
|
+
});
|
|
2913
|
+
return createComponent(TabsContext.Provider, {
|
|
2914
|
+
value: {
|
|
2915
|
+
activeTab,
|
|
2916
|
+
setActiveTab,
|
|
2917
|
+
visibleTabs,
|
|
2918
|
+
setVisibleTabs
|
|
2919
|
+
},
|
|
2920
|
+
get children() {
|
|
2921
|
+
var _el$ = _tmpl$37();
|
|
2922
|
+
use(setTabsContainer, _el$);
|
|
2923
|
+
spread(_el$, mergeProps({
|
|
2924
|
+
get ["class"]() {
|
|
2925
|
+
return style(local.appearanceKey || "tabsRoot", cn(tabsRootVariants(), local.class));
|
|
2926
|
+
}
|
|
2927
|
+
}, rest), false, true);
|
|
2928
|
+
insert(_el$, () => local.children);
|
|
2929
|
+
return _el$;
|
|
2930
|
+
}
|
|
2931
|
+
});
|
|
2932
|
+
};
|
|
2933
|
+
|
|
2934
|
+
// src/ui/components/primitives/Tabs/TabsContent.tsx
|
|
2935
|
+
var _tmpl$38 = /* @__PURE__ */ template(`<div role=tabpanel>`);
|
|
2936
|
+
var TabsContent = (props) => {
|
|
2937
|
+
const [local, rest] = splitProps(props, ["value", "class", "appearanceKey", "children"]);
|
|
2938
|
+
const style = useStyle();
|
|
2939
|
+
const {
|
|
2940
|
+
activeTab
|
|
2941
|
+
} = useTabsContext();
|
|
2942
|
+
return createComponent(Show, {
|
|
2943
|
+
get when() {
|
|
2944
|
+
return activeTab() === local.value;
|
|
2945
|
+
},
|
|
2946
|
+
get children() {
|
|
2947
|
+
var _el$ = _tmpl$38();
|
|
2948
|
+
spread(_el$, mergeProps({
|
|
2949
|
+
get ["class"]() {
|
|
2950
|
+
return memo(() => !!local.class)() ? local.class : style(local.appearanceKey || "tabsContent", activeTab() === local.value ? "nt-block" : "nt-hidden");
|
|
2951
|
+
},
|
|
2952
|
+
get id() {
|
|
2953
|
+
return `tabpanel-${local.value}`;
|
|
2954
|
+
},
|
|
2955
|
+
get ["aria-labelledby"]() {
|
|
2956
|
+
return local.value;
|
|
2957
|
+
},
|
|
2958
|
+
get ["data-state"]() {
|
|
2959
|
+
return activeTab() === local.value ? "active" : "inactive";
|
|
2960
|
+
}
|
|
2961
|
+
}, rest), false, true);
|
|
2962
|
+
insert(_el$, () => local.children);
|
|
2963
|
+
return _el$;
|
|
2964
|
+
}
|
|
2965
|
+
});
|
|
2966
|
+
};
|
|
2967
|
+
var _tmpl$39 = /* @__PURE__ */ template(`<div role=tablist>`);
|
|
2968
|
+
var _tmpl$211 = /* @__PURE__ */ template(`<div class="nt-relative nt-z-[-1]">`);
|
|
2309
2969
|
var tabsListVariants = () => "nt-flex nt-gap-6";
|
|
2310
2970
|
var TabsList = (props) => {
|
|
2311
2971
|
const [local, rest] = splitProps(props, ["class", "appearanceKey", "ref", "children"]);
|
|
2312
2972
|
const style = useStyle();
|
|
2313
2973
|
return [(() => {
|
|
2314
|
-
var _el$ = _tmpl$
|
|
2974
|
+
var _el$ = _tmpl$39();
|
|
2315
2975
|
var _ref$ = local.ref;
|
|
2316
2976
|
typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
|
|
2317
2977
|
spread(_el$, mergeProps({
|
|
@@ -2321,7 +2981,7 @@ var TabsList = (props) => {
|
|
|
2321
2981
|
}, rest), false, true);
|
|
2322
2982
|
insert(_el$, () => local.children);
|
|
2323
2983
|
return _el$;
|
|
2324
|
-
})(), _tmpl$
|
|
2984
|
+
})(), _tmpl$211()];
|
|
2325
2985
|
};
|
|
2326
2986
|
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
2987
|
var TabsTrigger = (props) => {
|
|
@@ -2392,8 +3052,8 @@ var inboxFilterLocalizationKeys = {
|
|
|
2392
3052
|
archived: "inbox.filters.labels.archived",
|
|
2393
3053
|
snoozed: "inbox.filters.labels.snoozed"
|
|
2394
3054
|
};
|
|
2395
|
-
var _tmpl$
|
|
2396
|
-
var _tmpl$
|
|
3055
|
+
var _tmpl$40 = /* @__PURE__ */ template(`<span><span>`);
|
|
3056
|
+
var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
|
|
2397
3057
|
var cases = [{
|
|
2398
3058
|
status: "unreadRead" /* UNREAD_READ */,
|
|
2399
3059
|
iconKey: "unread",
|
|
@@ -2461,7 +3121,7 @@ var StatusItem = (props) => {
|
|
|
2461
3121
|
},
|
|
2462
3122
|
get children() {
|
|
2463
3123
|
return [(() => {
|
|
2464
|
-
var _el$ = _tmpl$
|
|
3124
|
+
var _el$ = _tmpl$40(), _el$2 = _el$.firstChild;
|
|
2465
3125
|
insert(_el$, createComponent(IconRendererWrapper, {
|
|
2466
3126
|
get iconKey() {
|
|
2467
3127
|
return props.iconKey;
|
|
@@ -2469,7 +3129,7 @@ var StatusItem = (props) => {
|
|
|
2469
3129
|
"class": itemIconClass,
|
|
2470
3130
|
get fallback() {
|
|
2471
3131
|
return (() => {
|
|
2472
|
-
var _el$3 = _tmpl$
|
|
3132
|
+
var _el$3 = _tmpl$212();
|
|
2473
3133
|
className(_el$3, itemIconClass);
|
|
2474
3134
|
insert(_el$3, () => props.icon());
|
|
2475
3135
|
return _el$3;
|
|
@@ -2510,7 +3170,7 @@ var StatusItem = (props) => {
|
|
|
2510
3170
|
};
|
|
2511
3171
|
|
|
2512
3172
|
// src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
|
|
2513
|
-
var _tmpl$
|
|
3173
|
+
var _tmpl$41 = /* @__PURE__ */ template(`<span>`);
|
|
2514
3174
|
var StatusDropdown = () => {
|
|
2515
3175
|
const style = useStyle();
|
|
2516
3176
|
const {
|
|
@@ -2538,7 +3198,7 @@ var StatusDropdown = () => {
|
|
|
2538
3198
|
}, triggerProps, {
|
|
2539
3199
|
get children() {
|
|
2540
3200
|
return [(() => {
|
|
2541
|
-
var _el$ = _tmpl$
|
|
3201
|
+
var _el$ = _tmpl$41();
|
|
2542
3202
|
insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
|
|
2543
3203
|
effect((_p$) => {
|
|
2544
3204
|
var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
|
|
@@ -2696,7 +3356,7 @@ var useReadAll = (props) => {
|
|
|
2696
3356
|
};
|
|
2697
3357
|
|
|
2698
3358
|
// src/ui/components/elements/Header/MoreActionsOptions.tsx
|
|
2699
|
-
var _tmpl$
|
|
3359
|
+
var _tmpl$43 = /* @__PURE__ */ template(`<span>`);
|
|
2700
3360
|
var iconKeyToComponentMap = {
|
|
2701
3361
|
markAsRead: MarkAsRead,
|
|
2702
3362
|
markAsArchived: MarkAsArchived,
|
|
@@ -2766,7 +3426,7 @@ var ActionsItem = (props) => {
|
|
|
2766
3426
|
});
|
|
2767
3427
|
}
|
|
2768
3428
|
}), (() => {
|
|
2769
|
-
var _el$ = _tmpl$
|
|
3429
|
+
var _el$ = _tmpl$43();
|
|
2770
3430
|
insert(_el$, () => t(props.localizationKey));
|
|
2771
3431
|
effect((_p$) => {
|
|
2772
3432
|
var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
|
|
@@ -2832,14 +3492,14 @@ var MoreActionsDropdown = () => {
|
|
|
2832
3492
|
};
|
|
2833
3493
|
|
|
2834
3494
|
// src/ui/components/elements/Header/ActionsContainer.tsx
|
|
2835
|
-
var _tmpl$
|
|
3495
|
+
var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
|
|
2836
3496
|
var ActionsContainer = (props) => {
|
|
2837
3497
|
const style = useStyle();
|
|
2838
3498
|
const cogsIconClass = style("icon", "nt-size-5", {
|
|
2839
3499
|
iconKey: "cogs"
|
|
2840
3500
|
});
|
|
2841
3501
|
return (() => {
|
|
2842
|
-
var _el$ = _tmpl$
|
|
3502
|
+
var _el$ = _tmpl$44();
|
|
2843
3503
|
insert(_el$, createComponent(MoreActionsDropdown, {}), null);
|
|
2844
3504
|
insert(_el$, createComponent(Show, {
|
|
2845
3505
|
get when() {
|
|
@@ -2871,11 +3531,11 @@ var ActionsContainer = (props) => {
|
|
|
2871
3531
|
};
|
|
2872
3532
|
|
|
2873
3533
|
// src/ui/components/elements/Header/Header.tsx
|
|
2874
|
-
var _tmpl$
|
|
3534
|
+
var _tmpl$45 = /* @__PURE__ */ template(`<div>`);
|
|
2875
3535
|
var Header = (props) => {
|
|
2876
3536
|
const style = useStyle();
|
|
2877
3537
|
return (() => {
|
|
2878
|
-
var _el$ = _tmpl$
|
|
3538
|
+
var _el$ = _tmpl$45();
|
|
2879
3539
|
insert(_el$, createComponent(StatusDropdown, {}), null);
|
|
2880
3540
|
insert(_el$, createComponent(ActionsContainer, {
|
|
2881
3541
|
get showPreferences() {
|
|
@@ -2886,7 +3546,7 @@ var Header = (props) => {
|
|
|
2886
3546
|
return _el$;
|
|
2887
3547
|
})();
|
|
2888
3548
|
};
|
|
2889
|
-
var _tmpl$
|
|
3549
|
+
var _tmpl$46 = /* @__PURE__ */ template(`<div>`);
|
|
2890
3550
|
var Root = (props) => {
|
|
2891
3551
|
const [_, rest] = splitProps(props, ["class"]);
|
|
2892
3552
|
const {
|
|
@@ -2902,7 +3562,7 @@ var Root = (props) => {
|
|
|
2902
3562
|
},
|
|
2903
3563
|
children: new Comment(" Powered by Novu - https://novu.co ")
|
|
2904
3564
|
}), (() => {
|
|
2905
|
-
var _el$ = _tmpl$
|
|
3565
|
+
var _el$ = _tmpl$46();
|
|
2906
3566
|
spread(_el$, mergeProps({
|
|
2907
3567
|
get id() {
|
|
2908
3568
|
return `novu-root-${id()}`;
|
|
@@ -2914,15 +3574,15 @@ var Root = (props) => {
|
|
|
2914
3574
|
return _el$;
|
|
2915
3575
|
})()];
|
|
2916
3576
|
};
|
|
2917
|
-
var _tmpl$
|
|
3577
|
+
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
3578
|
var RouteFill = (props) => {
|
|
2919
3579
|
return (() => {
|
|
2920
|
-
var _el$ = _tmpl$
|
|
3580
|
+
var _el$ = _tmpl$47();
|
|
2921
3581
|
spread(_el$, props, true, true);
|
|
2922
3582
|
return _el$;
|
|
2923
3583
|
})();
|
|
2924
3584
|
};
|
|
2925
|
-
var _tmpl$
|
|
3585
|
+
var _tmpl$48 = /* @__PURE__ */ template(`<div><div>`);
|
|
2926
3586
|
var isInterpolateSizeSupported = () => {
|
|
2927
3587
|
return CSS.supports("interpolate-size", "allow-keywords");
|
|
2928
3588
|
};
|
|
@@ -2955,7 +3615,7 @@ var Collapsible = (props) => {
|
|
|
2955
3615
|
return props.open ? `${scrollHeight()}px` : "0px";
|
|
2956
3616
|
};
|
|
2957
3617
|
return (() => {
|
|
2958
|
-
var _el$ = _tmpl$
|
|
3618
|
+
var _el$ = _tmpl$48(), _el$2 = _el$.firstChild;
|
|
2959
3619
|
spread(_el$, mergeProps({
|
|
2960
3620
|
get ["class"]() {
|
|
2961
3621
|
return style("collapsible", props.class);
|
|
@@ -2975,7 +3635,7 @@ var Collapsible = (props) => {
|
|
|
2975
3635
|
return _el$;
|
|
2976
3636
|
})();
|
|
2977
3637
|
};
|
|
2978
|
-
var _tmpl$
|
|
3638
|
+
var _tmpl$49 = /* @__PURE__ */ template(`<label><input type=checkbox class=nt-sr-only><div>`);
|
|
2979
3639
|
var Switch = (props) => {
|
|
2980
3640
|
const style = useStyle();
|
|
2981
3641
|
const handleChange = () => {
|
|
@@ -3001,7 +3661,7 @@ var Switch = (props) => {
|
|
|
3001
3661
|
const state = () => props.state;
|
|
3002
3662
|
const disabled = () => props.disabled;
|
|
3003
3663
|
return (() => {
|
|
3004
|
-
var _el$ = _tmpl$
|
|
3664
|
+
var _el$ = _tmpl$49(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
3005
3665
|
_el$2.addEventListener("change", handleChange);
|
|
3006
3666
|
effect((_p$) => {
|
|
3007
3667
|
var _v$ = style("channelSwitch", cn("nt-relative nt-inline-flex nt-cursor-pointer nt-items-center", {
|
|
@@ -3027,7 +3687,7 @@ var Switch = (props) => {
|
|
|
3027
3687
|
};
|
|
3028
3688
|
|
|
3029
3689
|
// src/ui/components/elements/Preferences/ChannelRow.tsx
|
|
3030
|
-
var _tmpl$
|
|
3690
|
+
var _tmpl$50 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
|
|
3031
3691
|
var ChannelRow = (props) => {
|
|
3032
3692
|
const style = useStyle();
|
|
3033
3693
|
const updatePreference = (enabled) => __async(void 0, null, function* () {
|
|
@@ -3041,7 +3701,7 @@ var ChannelRow = (props) => {
|
|
|
3041
3701
|
const state = () => props.channel.state;
|
|
3042
3702
|
const channel = () => props.channel.channel;
|
|
3043
3703
|
return (() => {
|
|
3044
|
-
var _el$ = _tmpl$
|
|
3704
|
+
var _el$ = _tmpl$50(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
|
|
3045
3705
|
insert(_el$3, createComponent(ChannelIcon, {
|
|
3046
3706
|
appearanceKey: "channel__icon",
|
|
3047
3707
|
get channel() {
|
|
@@ -3164,8 +3824,8 @@ var getLabel = (channel) => {
|
|
|
3164
3824
|
};
|
|
3165
3825
|
|
|
3166
3826
|
// src/ui/components/elements/Preferences/PreferencesRow.tsx
|
|
3167
|
-
var _tmpl$
|
|
3168
|
-
var _tmpl$
|
|
3827
|
+
var _tmpl$51 = /* @__PURE__ */ template(`<div>`);
|
|
3828
|
+
var _tmpl$213 = /* @__PURE__ */ template(`<div><div><div><div><span></span></div></div><span>`);
|
|
3169
3829
|
var _tmpl$310 = /* @__PURE__ */ template(`<span>`);
|
|
3170
3830
|
var iconKeyToComponentMap2 = {
|
|
3171
3831
|
cogs: Cogs,
|
|
@@ -3199,7 +3859,7 @@ var PreferencesRow = (props) => {
|
|
|
3199
3859
|
return channels().length > 0;
|
|
3200
3860
|
},
|
|
3201
3861
|
get children() {
|
|
3202
|
-
var _el$ = _tmpl$
|
|
3862
|
+
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
3863
|
_el$2.$$click = () => {
|
|
3204
3864
|
setIsOpenChannels((prev) => !prev);
|
|
3205
3865
|
};
|
|
@@ -3247,7 +3907,7 @@ var PreferencesRow = (props) => {
|
|
|
3247
3907
|
return isOpenChannels();
|
|
3248
3908
|
},
|
|
3249
3909
|
get children() {
|
|
3250
|
-
var _el$7 = _tmpl$
|
|
3910
|
+
var _el$7 = _tmpl$51();
|
|
3251
3911
|
insert(_el$7, createComponent(Index, {
|
|
3252
3912
|
get each() {
|
|
3253
3913
|
return channels();
|
|
@@ -3320,19 +3980,19 @@ var WorkflowDescription = (props) => {
|
|
|
3320
3980
|
return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
|
|
3321
3981
|
};
|
|
3322
3982
|
return (() => {
|
|
3323
|
-
var _el$9 = _tmpl$
|
|
3983
|
+
var _el$9 = _tmpl$51();
|
|
3324
3984
|
insert(_el$9, channelNames);
|
|
3325
3985
|
effect(() => className(_el$9, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
|
|
3326
3986
|
return _el$9;
|
|
3327
3987
|
})();
|
|
3328
3988
|
};
|
|
3329
3989
|
delegateEvents(["click"]);
|
|
3330
|
-
var _tmpl$
|
|
3331
|
-
var _tmpl$
|
|
3990
|
+
var _tmpl$53 = /* @__PURE__ */ template(`<div>`);
|
|
3991
|
+
var _tmpl$214 = /* @__PURE__ */ template(`<div><div></div><div>`);
|
|
3332
3992
|
var SkeletonText = (props) => {
|
|
3333
3993
|
const style = useStyle();
|
|
3334
3994
|
return (() => {
|
|
3335
|
-
var _el$ = _tmpl$
|
|
3995
|
+
var _el$ = _tmpl$53();
|
|
3336
3996
|
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
3997
|
return _el$;
|
|
3338
3998
|
})();
|
|
@@ -3340,7 +4000,7 @@ var SkeletonText = (props) => {
|
|
|
3340
4000
|
var SkeletonAvatar = (props) => {
|
|
3341
4001
|
const style = useStyle();
|
|
3342
4002
|
return (() => {
|
|
3343
|
-
var _el$2 = _tmpl$
|
|
4003
|
+
var _el$2 = _tmpl$53();
|
|
3344
4004
|
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
4005
|
return _el$2;
|
|
3346
4006
|
})();
|
|
@@ -3348,7 +4008,7 @@ var SkeletonAvatar = (props) => {
|
|
|
3348
4008
|
var SkeletonSwitch = (props) => {
|
|
3349
4009
|
const style = useStyle();
|
|
3350
4010
|
return (() => {
|
|
3351
|
-
var _el$3 = _tmpl$
|
|
4011
|
+
var _el$3 = _tmpl$214(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
|
|
3352
4012
|
effect((_p$) => {
|
|
3353
4013
|
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
4014
|
_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
|
|
@@ -3365,7 +4025,7 @@ var SkeletonSwitch = (props) => {
|
|
|
3365
4025
|
};
|
|
3366
4026
|
|
|
3367
4027
|
// src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
|
|
3368
|
-
var _tmpl$
|
|
4028
|
+
var _tmpl$54 = /* @__PURE__ */ template(`<div>`);
|
|
3369
4029
|
var channelIcons = [InApp, Email, Sms, Push, Chat];
|
|
3370
4030
|
var PreferencesListSkeleton = (props) => {
|
|
3371
4031
|
const style = useStyle();
|
|
@@ -3373,7 +4033,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
3373
4033
|
t
|
|
3374
4034
|
} = useLocalization();
|
|
3375
4035
|
return (() => {
|
|
3376
|
-
var _el$ = _tmpl$
|
|
4036
|
+
var _el$ = _tmpl$54();
|
|
3377
4037
|
insert(_el$, createComponent(Motion.div, {
|
|
3378
4038
|
get animate() {
|
|
3379
4039
|
return {
|
|
@@ -3415,7 +4075,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
3415
4075
|
return style("preferencesList__skeletonIcon", "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100");
|
|
3416
4076
|
}
|
|
3417
4077
|
}), (() => {
|
|
3418
|
-
var _el$3 = _tmpl$
|
|
4078
|
+
var _el$3 = _tmpl$54();
|
|
3419
4079
|
insert(_el$3, createComponent(SkeletonText, {
|
|
3420
4080
|
appearanceKey: "notificationList__skeletonText",
|
|
3421
4081
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -3433,7 +4093,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
3433
4093
|
}
|
|
3434
4094
|
});
|
|
3435
4095
|
})), (() => {
|
|
3436
|
-
var _el$2 = _tmpl$
|
|
4096
|
+
var _el$2 = _tmpl$54();
|
|
3437
4097
|
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
4098
|
return _el$2;
|
|
3439
4099
|
})()];
|
|
@@ -3519,26 +4179,26 @@ var DefaultPreferences = (props) => {
|
|
|
3519
4179
|
}
|
|
3520
4180
|
});
|
|
3521
4181
|
};
|
|
3522
|
-
var _tmpl$
|
|
4182
|
+
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
4183
|
var NodeTree = (props) => {
|
|
3524
4184
|
return (() => {
|
|
3525
|
-
var _el$ = _tmpl$
|
|
4185
|
+
var _el$ = _tmpl$55();
|
|
3526
4186
|
spread(_el$, props, true, true);
|
|
3527
4187
|
return _el$;
|
|
3528
4188
|
})();
|
|
3529
4189
|
};
|
|
3530
|
-
var _tmpl$
|
|
4190
|
+
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
4191
|
var Info = (props) => {
|
|
3532
4192
|
return (() => {
|
|
3533
|
-
var _el$ = _tmpl$
|
|
4193
|
+
var _el$ = _tmpl$56();
|
|
3534
4194
|
spread(_el$, props, true, true);
|
|
3535
4195
|
return _el$;
|
|
3536
4196
|
})();
|
|
3537
4197
|
};
|
|
3538
4198
|
|
|
3539
4199
|
// src/ui/components/elements/Preferences/GroupedPreferencesRow.tsx
|
|
3540
|
-
var _tmpl$
|
|
3541
|
-
var _tmpl$
|
|
4200
|
+
var _tmpl$57 = /* @__PURE__ */ template(`<div><div><span data-localization=preferences.group.info></span></div><div>`);
|
|
4201
|
+
var _tmpl$215 = /* @__PURE__ */ template(`<div><div><div><span></span></div><div><span>`);
|
|
3542
4202
|
var GroupedPreferencesRow = (props) => {
|
|
3543
4203
|
const style = useStyle();
|
|
3544
4204
|
const {
|
|
@@ -3603,7 +4263,7 @@ var GroupedPreferencesRow = (props) => {
|
|
|
3603
4263
|
return Object.keys(uniqueChannels()).length > 0;
|
|
3604
4264
|
},
|
|
3605
4265
|
get children() {
|
|
3606
|
-
var _el$ = _tmpl$
|
|
4266
|
+
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
4267
|
_el$2.$$click = () => {
|
|
3608
4268
|
setIsOpened((prev) => !prev);
|
|
3609
4269
|
};
|
|
@@ -3637,7 +4297,7 @@ var GroupedPreferencesRow = (props) => {
|
|
|
3637
4297
|
return isOpened();
|
|
3638
4298
|
},
|
|
3639
4299
|
get children() {
|
|
3640
|
-
var _el$7 = _tmpl$
|
|
4300
|
+
var _el$7 = _tmpl$57(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$8.nextSibling;
|
|
3641
4301
|
insert(_el$8, createComponent(Index, {
|
|
3642
4302
|
get each() {
|
|
3643
4303
|
return Object.keys(uniqueChannels());
|
|
@@ -3761,7 +4421,7 @@ var GroupedPreferences = (props) => {
|
|
|
3761
4421
|
};
|
|
3762
4422
|
|
|
3763
4423
|
// src/ui/components/elements/Preferences/Preferences.tsx
|
|
3764
|
-
var _tmpl$
|
|
4424
|
+
var _tmpl$58 = /* @__PURE__ */ template(`<div>`);
|
|
3765
4425
|
var Preferences = () => {
|
|
3766
4426
|
var _a;
|
|
3767
4427
|
const novu = useNovu();
|
|
@@ -3848,7 +4508,7 @@ var Preferences = () => {
|
|
|
3848
4508
|
})) != null ? _c : [];
|
|
3849
4509
|
});
|
|
3850
4510
|
return (() => {
|
|
3851
|
-
var _el$ = _tmpl$
|
|
4511
|
+
var _el$ = _tmpl$58();
|
|
3852
4512
|
insert(_el$, createComponent(PreferencesRow, {
|
|
3853
4513
|
iconKey: "cogs",
|
|
3854
4514
|
get preference() {
|
|
@@ -3888,647 +4548,187 @@ var Preferences = () => {
|
|
|
3888
4548
|
},
|
|
3889
4549
|
get children() {
|
|
3890
4550
|
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
|
|
4551
|
+
get groups() {
|
|
4552
|
+
return groupedPreferences();
|
|
4553
|
+
},
|
|
4554
|
+
get loading() {
|
|
4555
|
+
return loading();
|
|
4556
|
+
},
|
|
4557
|
+
updatePreference,
|
|
4558
|
+
bulkUpdatePreferences
|
|
4150
4559
|
});
|
|
4151
|
-
},
|
|
4152
|
-
get ["data-open"]() {
|
|
4153
|
-
return open();
|
|
4154
4560
|
}
|
|
4155
|
-
}
|
|
4561
|
+
}), null);
|
|
4562
|
+
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
4563
|
return _el$;
|
|
4157
4564
|
})();
|
|
4158
4565
|
};
|
|
4159
|
-
var
|
|
4160
|
-
|
|
4161
|
-
|
|
4162
|
-
} = useTooltip();
|
|
4566
|
+
var _tmpl$59 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
|
|
4567
|
+
var PreferencesHeader = (props) => {
|
|
4568
|
+
const style = useStyle();
|
|
4163
4569
|
const {
|
|
4164
|
-
|
|
4165
|
-
} =
|
|
4166
|
-
const
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
|
|
4570
|
+
t
|
|
4571
|
+
} = useLocalization();
|
|
4572
|
+
const arrowLeftIconClass = style("preferencesHeader__back__button__icon", "nt-size-4", {
|
|
4573
|
+
iconKey: "arrowLeft"
|
|
4574
|
+
});
|
|
4575
|
+
return (() => {
|
|
4576
|
+
var _el$ = _tmpl$59(), _el$2 = _el$.firstChild;
|
|
4577
|
+
insert(_el$, createComponent(Show, {
|
|
4578
|
+
get when() {
|
|
4579
|
+
return props.navigateToNotifications;
|
|
4580
|
+
},
|
|
4581
|
+
children: (navigateToNotifications) => createComponent(Button, {
|
|
4582
|
+
appearanceKey: "preferencesHeader__back__button",
|
|
4583
|
+
"class": "nt-text-foreground-alpha-600",
|
|
4584
|
+
variant: "unstyled",
|
|
4585
|
+
size: "none",
|
|
4586
|
+
get onClick() {
|
|
4587
|
+
return navigateToNotifications();
|
|
4178
4588
|
},
|
|
4179
4589
|
get children() {
|
|
4180
|
-
return createComponent(
|
|
4181
|
-
|
|
4182
|
-
|
|
4590
|
+
return createComponent(IconRendererWrapper, {
|
|
4591
|
+
iconKey: "arrowLeft",
|
|
4592
|
+
"class": arrowLeftIconClass,
|
|
4593
|
+
get fallback() {
|
|
4594
|
+
return createComponent(ArrowLeft, {
|
|
4595
|
+
"class": arrowLeftIconClass
|
|
4596
|
+
});
|
|
4183
4597
|
}
|
|
4184
4598
|
});
|
|
4185
4599
|
}
|
|
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);
|
|
4600
|
+
})
|
|
4601
|
+
}), _el$2);
|
|
4602
|
+
insert(_el$2, () => t("preferences.title"));
|
|
4603
|
+
effect((_p$) => {
|
|
4604
|
+
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");
|
|
4605
|
+
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
4606
|
+
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
|
|
4607
|
+
return _p$;
|
|
4608
|
+
}, {
|
|
4609
|
+
e: void 0,
|
|
4610
|
+
t: void 0
|
|
4231
4611
|
});
|
|
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
4612
|
return _el$;
|
|
4241
4613
|
})();
|
|
4242
4614
|
};
|
|
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));
|
|
4615
|
+
var useTabsDropdown = ({ tabs }) => {
|
|
4616
|
+
const [tabsList, setTabsList] = createSignal();
|
|
4617
|
+
const [visibleTabs, setVisibleTabs] = createSignal([]);
|
|
4618
|
+
const [dropdownTabs, setDropdownTabs] = createSignal([]);
|
|
4619
|
+
onMount(() => {
|
|
4620
|
+
const tabsListEl = tabsList();
|
|
4621
|
+
if (!tabsListEl) return;
|
|
4622
|
+
const tabsElements = [...tabsListEl.querySelectorAll('[role="tab"]')];
|
|
4623
|
+
const observer = new IntersectionObserver(
|
|
4624
|
+
(entries) => {
|
|
4625
|
+
let visibleTabIds = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio === 1).map((entry) => entry.target.id);
|
|
4626
|
+
if (tabsElements.length === visibleTabIds.length) {
|
|
4627
|
+
setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
|
|
4628
|
+
observer.disconnect();
|
|
4629
|
+
return;
|
|
4300
4630
|
}
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
|
|
4631
|
+
visibleTabIds = visibleTabIds.slice(0, -1);
|
|
4632
|
+
setVisibleTabs(tabs.filter((tab) => visibleTabIds.includes(tab.label)));
|
|
4633
|
+
setDropdownTabs(tabs.filter((tab) => !visibleTabIds.includes(tab.label)));
|
|
4634
|
+
observer.disconnect();
|
|
4635
|
+
},
|
|
4636
|
+
{ root: tabsListEl }
|
|
4637
|
+
);
|
|
4638
|
+
for (const tabElement of tabsElements) {
|
|
4639
|
+
observer.observe(tabElement);
|
|
4304
4640
|
}
|
|
4305
4641
|
});
|
|
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
|
-
};
|
|
4642
|
+
return { dropdownTabs, setTabsList, visibleTabs };
|
|
4643
|
+
};
|
|
4644
|
+
var _tmpl$60 = /* @__PURE__ */ template(`<strong>`);
|
|
4645
|
+
var _tmpl$216 = /* @__PURE__ */ template(`<p>`);
|
|
4646
|
+
var Bold = (props) => {
|
|
4647
|
+
const style = useStyle();
|
|
4648
|
+
return (() => {
|
|
4649
|
+
var _el$ = _tmpl$60();
|
|
4650
|
+
insert(_el$, () => props.children);
|
|
4651
|
+
effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
|
|
4652
|
+
return _el$;
|
|
4653
|
+
})();
|
|
4654
|
+
};
|
|
4655
|
+
var Text = (props) => props.children;
|
|
4656
|
+
var Markdown = (props) => {
|
|
4657
|
+
const [local, rest] = splitProps(props, ["class", "children", "appearanceKey", "strongAppearanceKey"]);
|
|
4658
|
+
const style = useStyle();
|
|
4659
|
+
const tokens = createMemo(() => parseMarkdownIntoTokens(local.children));
|
|
4358
4660
|
return (() => {
|
|
4359
|
-
var _el$2 = _tmpl$216()
|
|
4661
|
+
var _el$2 = _tmpl$216();
|
|
4360
4662
|
spread(_el$2, mergeProps({
|
|
4361
4663
|
get ["class"]() {
|
|
4362
|
-
return style(local.appearanceKey
|
|
4664
|
+
return style(local.appearanceKey, cn(local.class));
|
|
4363
4665
|
}
|
|
4364
4666
|
}, 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();
|
|
4667
|
+
insert(_el$2, createComponent(For, {
|
|
4668
|
+
get each() {
|
|
4669
|
+
return tokens();
|
|
4374
4670
|
},
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
}
|
|
4384
|
-
}
|
|
4385
|
-
}
|
|
4671
|
+
children: (token) => {
|
|
4672
|
+
if (token.type === "bold") {
|
|
4673
|
+
return createComponent(Bold, {
|
|
4674
|
+
get appearanceKey() {
|
|
4675
|
+
return local.strongAppearanceKey;
|
|
4676
|
+
},
|
|
4677
|
+
get children() {
|
|
4678
|
+
return token.content;
|
|
4679
|
+
}
|
|
4680
|
+
});
|
|
4681
|
+
} else {
|
|
4682
|
+
return createComponent(Text, {
|
|
4683
|
+
get children() {
|
|
4684
|
+
return token.content;
|
|
4685
|
+
}
|
|
4686
|
+
});
|
|
4687
|
+
}
|
|
4386
4688
|
}
|
|
4387
|
-
}), _el$3);
|
|
4388
|
-
insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
|
|
4389
|
-
month: "long",
|
|
4390
|
-
year: "numeric"
|
|
4391
4689
|
}));
|
|
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
4690
|
return _el$2;
|
|
4417
4691
|
})();
|
|
4418
4692
|
};
|
|
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);
|
|
4693
|
+
var Markdown_default = Markdown;
|
|
4694
|
+
var _tmpl$61 = /* @__PURE__ */ template(`<span>`);
|
|
4695
|
+
var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
|
|
4696
|
+
variants: {
|
|
4697
|
+
variant: {
|
|
4698
|
+
secondary: "nt-bg-neutral-alpha-50"
|
|
4454
4699
|
},
|
|
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();
|
|
4700
|
+
size: {
|
|
4701
|
+
default: "nt-px-1 nt-py-px nt-rounded-sm nt-text-xs nt-px-1"
|
|
4467
4702
|
}
|
|
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
|
-
});
|
|
4703
|
+
},
|
|
4704
|
+
defaultVariants: {
|
|
4705
|
+
variant: "secondary",
|
|
4706
|
+
size: "default"
|
|
4483
4707
|
}
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
var DatePickerCalendar = (props) => {
|
|
4708
|
+
});
|
|
4709
|
+
var Badge = (props) => {
|
|
4487
4710
|
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
4488
4711
|
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
4712
|
return (() => {
|
|
4515
|
-
var _el$
|
|
4516
|
-
_el
|
|
4517
|
-
|
|
4713
|
+
var _el$ = _tmpl$61();
|
|
4714
|
+
spread(_el$, mergeProps({
|
|
4715
|
+
get ["data-variant"]() {
|
|
4716
|
+
return props.variant;
|
|
4717
|
+
},
|
|
4718
|
+
get ["data-size"]() {
|
|
4719
|
+
return props.size;
|
|
4720
|
+
},
|
|
4518
4721
|
get ["class"]() {
|
|
4519
|
-
return style(local.appearanceKey || "
|
|
4722
|
+
return style(local.appearanceKey || "badge", cn(badgeVariants({
|
|
4723
|
+
variant: props.variant,
|
|
4724
|
+
size: props.size
|
|
4725
|
+
}), local.class));
|
|
4520
4726
|
}
|
|
4521
|
-
}, rest), false,
|
|
4522
|
-
|
|
4523
|
-
return createComponent(DatePickerGridCellTrigger, {
|
|
4524
|
-
date
|
|
4525
|
-
});
|
|
4526
|
-
}));
|
|
4527
|
-
return _el$8;
|
|
4727
|
+
}, rest), false, false);
|
|
4728
|
+
return _el$;
|
|
4528
4729
|
})();
|
|
4529
4730
|
};
|
|
4530
|
-
|
|
4531
|
-
var _tmpl$60 = /* @__PURE__ */ template(`<input>`);
|
|
4731
|
+
var _tmpl$63 = /* @__PURE__ */ template(`<input>`);
|
|
4532
4732
|
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
4733
|
variants: {
|
|
4534
4734
|
variant: {
|
|
@@ -4548,7 +4748,7 @@ var Input = (props) => {
|
|
|
4548
4748
|
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
4549
4749
|
const style = useStyle();
|
|
4550
4750
|
return (() => {
|
|
4551
|
-
var _el$ = _tmpl$
|
|
4751
|
+
var _el$ = _tmpl$63();
|
|
4552
4752
|
spread(_el$, mergeProps({
|
|
4553
4753
|
get ["data-variant"]() {
|
|
4554
4754
|
return props.variant;
|
|
@@ -4568,7 +4768,7 @@ var Input = (props) => {
|
|
|
4568
4768
|
};
|
|
4569
4769
|
|
|
4570
4770
|
// src/ui/components/primitives/TimePicker.tsx
|
|
4571
|
-
var _tmpl$
|
|
4771
|
+
var _tmpl$64 = /* @__PURE__ */ template(`<div><span>:</span><select><option value=AM>AM</option><option value=PM>PM`);
|
|
4572
4772
|
var TimePicker = (props) => {
|
|
4573
4773
|
const [local, rest] = splitProps(props, ["value", "onChange", "class", "appearanceKey"]);
|
|
4574
4774
|
const style = useStyle();
|
|
@@ -4608,7 +4808,7 @@ var TimePicker = (props) => {
|
|
|
4608
4808
|
}
|
|
4609
4809
|
};
|
|
4610
4810
|
return (() => {
|
|
4611
|
-
var _el$ = _tmpl$
|
|
4811
|
+
var _el$ = _tmpl$64(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
4612
4812
|
_el$.$$click = (e) => e.stopPropagation();
|
|
4613
4813
|
spread(_el$, mergeProps({
|
|
4614
4814
|
get ["class"]() {
|
|
@@ -4696,7 +4896,7 @@ var enforceMinMax = (el) => {
|
|
|
4696
4896
|
delegateEvents(["click"]);
|
|
4697
4897
|
|
|
4698
4898
|
// src/ui/components/Notification/SnoozeDateTimePicker.tsx
|
|
4699
|
-
var _tmpl$
|
|
4899
|
+
var _tmpl$65 = /* @__PURE__ */ template(`<div><div><p></p></div><div>`);
|
|
4700
4900
|
var fiveMinutesFromNow = () => {
|
|
4701
4901
|
const futureTime = new Date(Date.now() + 5 * 60 * 1e3);
|
|
4702
4902
|
const hours = futureTime.getHours();
|
|
@@ -4793,7 +4993,7 @@ var SnoozeDateTimePicker = (props) => {
|
|
|
4793
4993
|
return t("snooze.datePicker.noDateSelectedTooltip");
|
|
4794
4994
|
});
|
|
4795
4995
|
return (() => {
|
|
4796
|
-
var _el$ = _tmpl$
|
|
4996
|
+
var _el$ = _tmpl$65(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
|
|
4797
4997
|
_el$.$$click = (e) => e.stopPropagation();
|
|
4798
4998
|
insert(_el$, createComponent(DatePicker, {
|
|
4799
4999
|
onDateChange: (date) => setSelectedDate(date),
|
|
@@ -4878,7 +5078,7 @@ var SnoozeDateTimePicker = (props) => {
|
|
|
4878
5078
|
delegateEvents(["click"]);
|
|
4879
5079
|
|
|
4880
5080
|
// src/ui/components/Notification/NotificationActions.tsx
|
|
4881
|
-
var _tmpl$
|
|
5081
|
+
var _tmpl$66 = /* @__PURE__ */ template(`<div><span>`);
|
|
4882
5082
|
var _tmpl$217 = /* @__PURE__ */ template(`<span>`);
|
|
4883
5083
|
var SNOOZE_PRESETS = [{
|
|
4884
5084
|
key: "snooze.options.anHourFromNow",
|
|
@@ -4925,7 +5125,7 @@ var SnoozeDropdownItem = (props) => {
|
|
|
4925
5125
|
iconKey: "clock"
|
|
4926
5126
|
});
|
|
4927
5127
|
const content = [(() => {
|
|
4928
|
-
var _el$ = _tmpl$
|
|
5128
|
+
var _el$ = _tmpl$66(), _el$2 = _el$.firstChild;
|
|
4929
5129
|
insert(_el$, createComponent(IconRendererWrapper, {
|
|
4930
5130
|
iconKey: "clock",
|
|
4931
5131
|
"class": snoozeItemIconClass,
|
|
@@ -5322,7 +5522,7 @@ var renderNotificationActions = (notification, status) => {
|
|
|
5322
5522
|
};
|
|
5323
5523
|
|
|
5324
5524
|
// src/ui/components/Notification/DefaultNotification.tsx
|
|
5325
|
-
var _tmpl$
|
|
5525
|
+
var _tmpl$67 = /* @__PURE__ */ template(`<img>`);
|
|
5326
5526
|
var _tmpl$218 = /* @__PURE__ */ template(`<div>`);
|
|
5327
5527
|
var _tmpl$311 = /* @__PURE__ */ template(`<span>`);
|
|
5328
5528
|
var _tmpl$410 = /* @__PURE__ */ template(`<a><div><div></div><div></div><div>`);
|
|
@@ -5414,7 +5614,7 @@ var DefaultNotification = (props) => {
|
|
|
5414
5614
|
})();
|
|
5415
5615
|
},
|
|
5416
5616
|
get children() {
|
|
5417
|
-
var _el$2 = _tmpl$
|
|
5617
|
+
var _el$2 = _tmpl$67();
|
|
5418
5618
|
effect((_p$) => {
|
|
5419
5619
|
var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
|
|
5420
5620
|
_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
|
|
@@ -5665,14 +5865,30 @@ var NewMessagesCta = (props) => {
|
|
|
5665
5865
|
}
|
|
5666
5866
|
});
|
|
5667
5867
|
};
|
|
5668
|
-
var _tmpl$
|
|
5868
|
+
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>`);
|
|
5869
|
+
function Key(props) {
|
|
5870
|
+
return (() => {
|
|
5871
|
+
var _el$ = _tmpl$68();
|
|
5872
|
+
spread(_el$, props, true, true);
|
|
5873
|
+
return _el$;
|
|
5874
|
+
})();
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
// src/ui/components/Notification/NotificationListSkeleton.tsx
|
|
5878
|
+
var _tmpl$69 = /* @__PURE__ */ template(`<div>`);
|
|
5879
|
+
var _tmpl$219 = /* @__PURE__ */ template(`<p data-localization=notifications.emptyNotice>`);
|
|
5880
|
+
var _tmpl$312 = /* @__PURE__ */ template(`<div><p>Trigger your notification. No setup needed.</p><p>Temporary <Inbox />, data will expire in 24h. Connect API key to persists messages, enable
|
|
5881
|
+
preferences, and connect email.</p><div><div>`);
|
|
5669
5882
|
var NotificationListSkeleton = (props) => {
|
|
5670
5883
|
const style = useStyle();
|
|
5671
5884
|
const {
|
|
5672
5885
|
t
|
|
5673
5886
|
} = useLocalization();
|
|
5887
|
+
const {
|
|
5888
|
+
isKeyless
|
|
5889
|
+
} = useInboxContext();
|
|
5674
5890
|
return (() => {
|
|
5675
|
-
var _el$ = _tmpl$
|
|
5891
|
+
var _el$ = _tmpl$69();
|
|
5676
5892
|
insert(_el$, createComponent(Motion.div, {
|
|
5677
5893
|
get animate() {
|
|
5678
5894
|
return {
|
|
@@ -5711,7 +5927,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
5711
5927
|
appearanceKey: "notificationList__skeletonAvatar",
|
|
5712
5928
|
"class": "nt-w-8 nt-h-8 nt-rounded-full nt-bg-neutral-alpha-100"
|
|
5713
5929
|
}), (() => {
|
|
5714
|
-
var _el$3 = _tmpl$
|
|
5930
|
+
var _el$3 = _tmpl$69();
|
|
5715
5931
|
insert(_el$3, createComponent(SkeletonText, {
|
|
5716
5932
|
appearanceKey: "notificationList__skeletonText",
|
|
5717
5933
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -5725,7 +5941,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
5725
5941
|
})()];
|
|
5726
5942
|
}
|
|
5727
5943
|
}))), (() => {
|
|
5728
|
-
var _el$2 = _tmpl$
|
|
5944
|
+
var _el$2 = _tmpl$69();
|
|
5729
5945
|
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
5946
|
return _el$2;
|
|
5731
5947
|
})()];
|
|
@@ -5757,9 +5973,12 @@ var NotificationListSkeleton = (props) => {
|
|
|
5757
5973
|
get ["class"]() {
|
|
5758
5974
|
return style("notificationListEmptyNotice", "nt-text-center");
|
|
5759
5975
|
},
|
|
5760
|
-
"data-localization": "notifications.emptyNotice",
|
|
5761
5976
|
get children() {
|
|
5762
|
-
return
|
|
5977
|
+
return memo(() => !!isKeyless())() ? createComponent(KeylessEmptyState, {}) : (() => {
|
|
5978
|
+
var _el$4 = _tmpl$219();
|
|
5979
|
+
insert(_el$4, () => t("notifications.emptyNotice"));
|
|
5980
|
+
return _el$4;
|
|
5981
|
+
})();
|
|
5763
5982
|
}
|
|
5764
5983
|
});
|
|
5765
5984
|
}
|
|
@@ -5768,10 +5987,69 @@ var NotificationListSkeleton = (props) => {
|
|
|
5768
5987
|
return _el$;
|
|
5769
5988
|
})();
|
|
5770
5989
|
};
|
|
5990
|
+
function KeylessEmptyState() {
|
|
5991
|
+
const style = useStyle();
|
|
5992
|
+
const novu = useNovu();
|
|
5993
|
+
return (() => {
|
|
5994
|
+
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;
|
|
5995
|
+
insert(_el$8, createComponent(Button, {
|
|
5996
|
+
variant: "secondary",
|
|
5997
|
+
size: "sm",
|
|
5998
|
+
get ["class"]() {
|
|
5999
|
+
return style(
|
|
6000
|
+
"notificationListEmptyNotice",
|
|
6001
|
+
// eslint-disable-next-line max-len
|
|
6002
|
+
"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"
|
|
6003
|
+
);
|
|
6004
|
+
},
|
|
6005
|
+
onClick: () => window.open("https://go.novu.co/keyless", "_blank", "noopener noreferrer"),
|
|
6006
|
+
get children() {
|
|
6007
|
+
return [createComponent(Key, {
|
|
6008
|
+
get ["class"]() {
|
|
6009
|
+
return style("lockIcon", "nt-size-4 nt-mr-2");
|
|
6010
|
+
}
|
|
6011
|
+
}), "Get API key"];
|
|
6012
|
+
}
|
|
6013
|
+
}), _el$9);
|
|
6014
|
+
insert(_el$9, createComponent(Button, {
|
|
6015
|
+
variant: "default",
|
|
6016
|
+
size: "sm",
|
|
6017
|
+
get ["class"]() {
|
|
6018
|
+
return style(
|
|
6019
|
+
"notificationListEmptyNotice",
|
|
6020
|
+
// eslint-disable-next-line max-len
|
|
6021
|
+
"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"
|
|
6022
|
+
);
|
|
6023
|
+
},
|
|
6024
|
+
onClick: () => novu.notifications.triggerHelloWorldEvent(),
|
|
6025
|
+
get children() {
|
|
6026
|
+
return [createComponent(Bell, {
|
|
6027
|
+
get ["class"]() {
|
|
6028
|
+
return style("bellIcon", "nt-size-4 nt-mr-2");
|
|
6029
|
+
}
|
|
6030
|
+
}), "Send 'Hello World!'"];
|
|
6031
|
+
}
|
|
6032
|
+
}));
|
|
6033
|
+
effect((_p$) => {
|
|
6034
|
+
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");
|
|
6035
|
+
_v$ !== _p$.e && className(_el$5, _p$.e = _v$);
|
|
6036
|
+
_v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
|
|
6037
|
+
_v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
|
|
6038
|
+
_v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
|
|
6039
|
+
return _p$;
|
|
6040
|
+
}, {
|
|
6041
|
+
e: void 0,
|
|
6042
|
+
t: void 0,
|
|
6043
|
+
a: void 0,
|
|
6044
|
+
o: void 0
|
|
6045
|
+
});
|
|
6046
|
+
return _el$5;
|
|
6047
|
+
})();
|
|
6048
|
+
}
|
|
5771
6049
|
|
|
5772
6050
|
// src/ui/components/Notification/NotificationList.tsx
|
|
5773
|
-
var _tmpl$
|
|
5774
|
-
var _tmpl$
|
|
6051
|
+
var _tmpl$70 = /* @__PURE__ */ template(`<div>`);
|
|
6052
|
+
var _tmpl$220 = /* @__PURE__ */ template(`<div><div>`);
|
|
5775
6053
|
var NotificationList = (props) => {
|
|
5776
6054
|
var _a, _b, _c, _d;
|
|
5777
6055
|
const options = createMemo(() => __spreadProps(__spreadValues({}, props.filter), {
|
|
@@ -5815,7 +6093,7 @@ var NotificationList = (props) => {
|
|
|
5815
6093
|
});
|
|
5816
6094
|
});
|
|
5817
6095
|
return (() => {
|
|
5818
|
-
var _el$ = _tmpl$
|
|
6096
|
+
var _el$ = _tmpl$220(), _el$2 = _el$.firstChild;
|
|
5819
6097
|
insert(_el$, createComponent(NewMessagesCta, {
|
|
5820
6098
|
get count() {
|
|
5821
6099
|
return count();
|
|
@@ -5872,7 +6150,7 @@ var NotificationList = (props) => {
|
|
|
5872
6150
|
return !end();
|
|
5873
6151
|
},
|
|
5874
6152
|
get children() {
|
|
5875
|
-
var _el$3 = _tmpl$
|
|
6153
|
+
var _el$3 = _tmpl$70();
|
|
5876
6154
|
use(setEl, _el$3);
|
|
5877
6155
|
insert(_el$3, createComponent(NotificationListSkeleton, {
|
|
5878
6156
|
loading: true
|
|
@@ -5894,13 +6172,13 @@ var NotificationList = (props) => {
|
|
|
5894
6172
|
return _el$;
|
|
5895
6173
|
})();
|
|
5896
6174
|
};
|
|
5897
|
-
var _tmpl$
|
|
6175
|
+
var _tmpl$71 = /* @__PURE__ */ template(`<span>`);
|
|
5898
6176
|
var getDisplayCount = (count) => count >= 100 ? "99+" : count;
|
|
5899
6177
|
var InboxTabUnreadNotificationsCount = (props) => {
|
|
5900
6178
|
const style = useStyle();
|
|
5901
6179
|
const displayCount = createMemo(() => getDisplayCount(props.count));
|
|
5902
6180
|
return (() => {
|
|
5903
|
-
var _el$ = _tmpl$
|
|
6181
|
+
var _el$ = _tmpl$71();
|
|
5904
6182
|
insert(_el$, displayCount);
|
|
5905
6183
|
effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
|
|
5906
6184
|
return _el$;
|
|
@@ -5927,7 +6205,7 @@ var InboxTab = (props) => {
|
|
|
5927
6205
|
},
|
|
5928
6206
|
get children() {
|
|
5929
6207
|
return [(() => {
|
|
5930
|
-
var _el$2 = _tmpl$
|
|
6208
|
+
var _el$2 = _tmpl$71();
|
|
5931
6209
|
insert(_el$2, () => props.label);
|
|
5932
6210
|
effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
|
|
5933
6211
|
return _el$2;
|
|
@@ -5967,7 +6245,7 @@ var InboxDropdownTab = (props) => {
|
|
|
5967
6245
|
},
|
|
5968
6246
|
get children() {
|
|
5969
6247
|
return [(() => {
|
|
5970
|
-
var _el$3 = _tmpl$
|
|
6248
|
+
var _el$3 = _tmpl$71();
|
|
5971
6249
|
insert(_el$3, () => props.label);
|
|
5972
6250
|
effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
|
|
5973
6251
|
return _el$3;
|
|
@@ -6168,7 +6446,7 @@ var InboxTabs = (props) => {
|
|
|
6168
6446
|
};
|
|
6169
6447
|
|
|
6170
6448
|
// src/ui/components/Inbox.tsx
|
|
6171
|
-
var _tmpl$
|
|
6449
|
+
var _tmpl$73 = /* @__PURE__ */ template(`<div>`);
|
|
6172
6450
|
var InboxPage = /* @__PURE__ */ function(InboxPage2) {
|
|
6173
6451
|
InboxPage2["Notifications"] = "notifications";
|
|
6174
6452
|
InboxPage2["Preferences"] = "preferences";
|
|
@@ -6193,7 +6471,7 @@ var InboxContent = (props) => {
|
|
|
6193
6471
|
};
|
|
6194
6472
|
});
|
|
6195
6473
|
return (() => {
|
|
6196
|
-
var _el$ = _tmpl$
|
|
6474
|
+
var _el$ = _tmpl$73();
|
|
6197
6475
|
insert(_el$, createComponent(Switch$1, {
|
|
6198
6476
|
get children() {
|
|
6199
6477
|
return [createComponent(Match, {
|
|
@@ -6470,6 +6748,10 @@ var Renderer = (props) => {
|
|
|
6470
6748
|
return createComponent(FocusManagerProvider, {
|
|
6471
6749
|
get children() {
|
|
6472
6750
|
return createComponent(InboxProvider, {
|
|
6751
|
+
get applicationIdentifier() {
|
|
6752
|
+
var _a;
|
|
6753
|
+
return (_a = props.options) == null ? void 0 : _a.applicationIdentifier;
|
|
6754
|
+
},
|
|
6473
6755
|
get tabs() {
|
|
6474
6756
|
return props.tabs;
|
|
6475
6757
|
},
|
|
@@ -6502,7 +6784,7 @@ var Renderer = (props) => {
|
|
|
6502
6784
|
portalDivElement.style.height = "100%";
|
|
6503
6785
|
}
|
|
6504
6786
|
});
|
|
6505
|
-
return createComponent(Portal
|
|
6787
|
+
return createComponent(Portal, {
|
|
6506
6788
|
mount: node,
|
|
6507
6789
|
ref: (el) => {
|
|
6508
6790
|
portalDivElement = el;
|