@novu/js 3.1.0 → 3.3.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/README.md +1 -1
- package/dist/cjs/{chunk-WONVNOTK.js → chunk-KIOGWIKT.js} +176 -29
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.js +8 -8
- package/dist/{esm/novu-DDPQzl99.d.mts → cjs/novu-DJTVB7VN.d.ts} +53 -15
- package/dist/cjs/themes/index.d.ts +2 -2
- package/dist/cjs/types-BPv1rvbm.d.ts +121 -0
- package/dist/cjs/ui/index.d.ts +4 -4
- package/dist/cjs/ui/index.js +1529 -343
- package/dist/esm/{chunk-WQDFFXIB.mjs → chunk-GTZM2EDR.mjs} +176 -29
- package/dist/esm/index.d.mts +2 -2
- package/dist/esm/index.mjs +1 -1
- package/dist/{cjs/novu-DDPQzl99.d.ts → esm/novu-DJTVB7VN.d.mts} +53 -15
- package/dist/esm/themes/index.d.mts +2 -2
- package/dist/esm/types-CYgpCW2I.d.mts +121 -0
- package/dist/esm/ui/index.d.mts +4 -4
- package/dist/esm/ui/index.mjs +1527 -341
- 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 -3
- package/dist/cjs/types-CVvP6EyP.d.ts +0 -103
- package/dist/esm/types-DFXwHejb.d.mts +0 -103
package/dist/esm/ui/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Novu, isSameFilter } from '../chunk-
|
|
1
|
+
import { Novu, isSameFilter } from '../chunk-GTZM2EDR.mjs';
|
|
2
2
|
import { parseMarkdownIntoTokens } from '../chunk-GPV65U5R.mjs';
|
|
3
3
|
import { __privateAdd, __privateSet, __privateMethod, __privateGet, __spreadProps, __spreadValues, __objRest, __async } from '../chunk-STZMOEWR.mjs';
|
|
4
|
-
import { delegateEvents, createComponent, mergeProps, render, Portal, spread, template, insert, memo, effect, className, use, setAttribute, Dynamic } from 'solid-js/web';
|
|
4
|
+
import { delegateEvents, createComponent, mergeProps, render, Portal as Portal$1, 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, batch } from 'solid-js';
|
|
6
6
|
import { createStore } from 'solid-js/store';
|
|
7
7
|
import clsx from 'clsx';
|
|
@@ -11,16 +11,19 @@ import { autoUpdate, offset, flip, shift } from '@floating-ui/dom';
|
|
|
11
11
|
import { useFloating } from 'solid-floating-ui';
|
|
12
12
|
import { Motion as Motion$1 } from 'solid-motionone';
|
|
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}}.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-invisible{visibility:hidden}.nt-absolute{position:absolute}.nt-relative{position:relative}.nt-inset-0{inset:0}.nt-inset-2{inset:.5rem}.nt-left-0{left:0}.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-4{margin-bottom:1rem}.nt-mb-\\[0\\.625rem\\]{margin-bottom:.625rem}.nt-ml-auto{margin-left:auto}.nt-mr-auto{margin-right:auto}.nt-mt-auto{margin-top:auto}.nt-block{display:block}.nt-flex{display:flex}.nt-inline-flex{display:inline-flex}.nt-hidden{display:none}.nt-aspect-square{aspect-ratio:1/1}.nt-size-1{height:.25rem;width:.25rem}.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-4{height:1rem;width:1rem}.nt-size-5{height:1.25rem;width:1.25rem}.nt-size-8{height:2rem;width:2rem}.nt-size-full{height:100%;width:100%}.nt-h-2{height:.5rem}.nt-h-3{height:.75rem}.nt-h-4{height:1rem}.nt-h-8{height:2rem}.nt-h-\\[600px\\]{height:600px}.nt-h-fit{height:-moz-fit-content;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-7{width:1.75rem}.nt-w-8{width:2rem}.nt-w-\\[400px\\]{width:400px}.nt-w-fit{width:-moz-fit-content;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-transform{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-pointer{cursor:pointer}.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-center{justify-content:center}.nt-justify-between{justify-content:space-between}.nt-gap-0{gap:0}.nt-gap-0\\.5{gap:.125rem}.nt-gap-1{gap:.25rem}.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-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,.nt-border-neutral-alpha-100{border-color:var(--nv-color-neutral-alpha-100)}.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-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-pt-2{padding-top:.5rem}.nt-pt-2\\.5{padding-top:.625rem}.nt-text-center{text-align:center}.nt-text-start{text-align:start}.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-xs{font-size:var(--nv-font-size-xs);line-height:var(--nv-line-height-xs)}.nt-font-medium{font-weight:500}.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-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)}.nt-shadow-\\[0_0_0_0\\.5px_var\\(--nv-color-secondary-600\\)\\],.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-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)}.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:after{content:var(--tw-content);top:0}.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-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-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-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-50:disabled{opacity:.5}.nt-group:focus-within .group-focus-within\\:nt-opacity-100,.nt-group:hover .group-hover\\:nt-opacity-100{opacity:1}.nt-peer:checked~.peer-checked\\:nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-peer:checked~.peer-checked\\:nt-bg-primary{background-color:var(--nv-color-primary)}.nt-peer:checked~.peer-checked\\:nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-peer:checked~.peer-checked\\:after\\:nt-translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;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-peer:checked~.peer-checked\\:after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.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}.\\[\\&_svg\\]\\:nt-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:nt-shrink-0 svg{flex-shrink:0}`;
|
|
14
|
+
// _qrqgolsn3:/Users/sokratisvidros/Workspace/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-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-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-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-transform{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-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-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-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/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-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-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-popover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-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)}.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-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-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}.nt-peer:checked~.peer-checked\\:nt-border-neutral-alpha-400{border-color:var(--nv-color-neutral-alpha-400)}.nt-peer:checked~.peer-checked\\:nt-bg-primary{background-color:var(--nv-color-primary)}.nt-peer:checked~.peer-checked\\:nt-shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.nt-peer:checked~.peer-checked\\:after\\:nt-translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;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-peer:checked~.peer-checked\\:after\\:nt-border-background:after{border-color:var(--nv-color-background);content:var(--tw-content)}.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}.\\[\\&_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 = [
|
|
19
19
|
// Primitives
|
|
20
20
|
"button",
|
|
21
|
+
"input",
|
|
21
22
|
"icon",
|
|
23
|
+
"badge",
|
|
22
24
|
"popoverContent",
|
|
23
25
|
"popoverTrigger",
|
|
26
|
+
"popoverClose",
|
|
24
27
|
"dropdownContent",
|
|
25
28
|
"dropdownTrigger",
|
|
26
29
|
"dropdownItem",
|
|
@@ -32,6 +35,34 @@ var appearanceKeys = [
|
|
|
32
35
|
"collapsible",
|
|
33
36
|
"tooltipContent",
|
|
34
37
|
"tooltipTrigger",
|
|
38
|
+
"datePicker",
|
|
39
|
+
"datePickerGrid",
|
|
40
|
+
"datePickerGridRow",
|
|
41
|
+
"datePickerGridCell",
|
|
42
|
+
"datePickerGridCellTrigger",
|
|
43
|
+
"datePickerTrigger",
|
|
44
|
+
"datePickerGridHeader",
|
|
45
|
+
"datePickerControl",
|
|
46
|
+
"datePickerControlPrevTrigger",
|
|
47
|
+
"datePickerControlNextTrigger",
|
|
48
|
+
"datePickerControlPrevTrigger__icon",
|
|
49
|
+
"datePickerControlNextTrigger__icon",
|
|
50
|
+
"datePickerCalendar",
|
|
51
|
+
"datePickerHeaderMonth",
|
|
52
|
+
"datePickerCalendarDay__button",
|
|
53
|
+
"timePicker",
|
|
54
|
+
"timePicker__hourSelect",
|
|
55
|
+
"timePicker__minuteSelect",
|
|
56
|
+
"timePicker__periodSelect",
|
|
57
|
+
"timePicker__separator",
|
|
58
|
+
"timePickerHour__input",
|
|
59
|
+
"timePickerMinute__input",
|
|
60
|
+
"snoozeDatePicker",
|
|
61
|
+
"snoozeDatePicker__actions",
|
|
62
|
+
"snoozeDatePickerCancel__button",
|
|
63
|
+
"snoozeDatePickerApply__button",
|
|
64
|
+
"snoozeDatePicker__timePickerContainer",
|
|
65
|
+
"snoozeDatePicker__timePickerLabel",
|
|
35
66
|
"back__button",
|
|
36
67
|
"skeletonText",
|
|
37
68
|
"skeletonAvatar",
|
|
@@ -89,10 +120,14 @@ var appearanceKeys = [
|
|
|
89
120
|
"notificationUnread__button",
|
|
90
121
|
"notificationArchive__button",
|
|
91
122
|
"notificationUnarchive__button",
|
|
123
|
+
"notificationSnooze__button",
|
|
124
|
+
"notificationUnsnooze__button",
|
|
92
125
|
"notificationRead__icon",
|
|
93
126
|
"notificationUnread__icon",
|
|
94
127
|
"notificationArchive__icon",
|
|
95
128
|
"notificationUnarchive__icon",
|
|
129
|
+
"notificationSnooze__icon",
|
|
130
|
+
"notificationUnsnooze__icon",
|
|
96
131
|
// Notifications tabs
|
|
97
132
|
"notificationsTabs__tabsRoot",
|
|
98
133
|
"notificationsTabs__tabsList",
|
|
@@ -165,6 +200,15 @@ var appearanceKeys = [
|
|
|
165
200
|
"preferencesList__skeletonSwitch",
|
|
166
201
|
"preferencesList__skeletonSwitchThumb",
|
|
167
202
|
"preferencesList__skeletonText",
|
|
203
|
+
// Notification Snooze
|
|
204
|
+
"notificationSnooze__dropdownContent",
|
|
205
|
+
"notificationSnooze__dropdownItem",
|
|
206
|
+
"notificationSnooze__dropdownItem__icon",
|
|
207
|
+
"notificationSnoozeCustomTime_popoverContent",
|
|
208
|
+
// Notification Delivered At
|
|
209
|
+
"notificationDeliveredAt__badge",
|
|
210
|
+
"notificationDeliveredAt__icon",
|
|
211
|
+
"notificationSnoozedUntil__icon",
|
|
168
212
|
// Text formatting
|
|
169
213
|
"strong"
|
|
170
214
|
];
|
|
@@ -173,9 +217,11 @@ var defaultLocalization = {
|
|
|
173
217
|
"inbox.filters.dropdownOptions.unread": "Unread only",
|
|
174
218
|
"inbox.filters.dropdownOptions.default": "Unread & read",
|
|
175
219
|
"inbox.filters.dropdownOptions.archived": "Archived",
|
|
220
|
+
"inbox.filters.dropdownOptions.snoozed": "Snoozed",
|
|
176
221
|
"inbox.filters.labels.unread": "Unread",
|
|
177
222
|
"inbox.filters.labels.default": "Inbox",
|
|
178
223
|
"inbox.filters.labels.archived": "Archived",
|
|
224
|
+
"inbox.filters.labels.snoozed": "Snoozed",
|
|
179
225
|
"notifications.emptyNotice": "Quiet for now. Check back later.",
|
|
180
226
|
"notifications.actions.readAll": "Mark all as read",
|
|
181
227
|
"notifications.actions.archiveAll": "Archive all",
|
|
@@ -185,11 +231,24 @@ var defaultLocalization = {
|
|
|
185
231
|
"notification.actions.unread.tooltip": "Mark as unread",
|
|
186
232
|
"notification.actions.archive.tooltip": "Archive",
|
|
187
233
|
"notification.actions.unarchive.tooltip": "Unarchive",
|
|
234
|
+
"notification.actions.snooze.tooltip": "Snooze",
|
|
235
|
+
"notification.actions.unsnooze.tooltip": "Unsnooze",
|
|
236
|
+
"notification.snoozedUntil": "Snoozed until",
|
|
188
237
|
"preferences.title": "Preferences",
|
|
189
238
|
"preferences.emptyNotice": "No notification specific preferences yet.",
|
|
190
239
|
"preferences.global": "Global Preferences",
|
|
191
240
|
"preferences.workflow.disabled.notice": "Contact admin to enable subscription management for this critical notification.",
|
|
192
|
-
"preferences.workflow.disabled.tooltip": "Contact admin to edit"
|
|
241
|
+
"preferences.workflow.disabled.tooltip": "Contact admin to edit",
|
|
242
|
+
"snooze.datePicker.timePickerLabel": "Time",
|
|
243
|
+
"snooze.datePicker.apply": "Apply",
|
|
244
|
+
"snooze.datePicker.cancel": "Cancel",
|
|
245
|
+
"snooze.options.anHourFromNow": "An hour from now",
|
|
246
|
+
"snooze.datePicker.pastDateTooltip": "Selected time must be at least 3 minutes in the future",
|
|
247
|
+
"snooze.datePicker.noDateSelectedTooltip": "Please select a date",
|
|
248
|
+
"snooze.datePicker.exceedingLimitTooltip": ({ days }) => `Selected time cannot exceed ${days === 1 ? "24 hours" : `${days} days`} from now`,
|
|
249
|
+
"snooze.options.customTime": "Custom time...",
|
|
250
|
+
"snooze.options.inOneDay": "Tomorrow",
|
|
251
|
+
"snooze.options.inOneWeek": "Next week"
|
|
193
252
|
};
|
|
194
253
|
var [dynamicLocalization, setDynamicLocalization] = createSignal({});
|
|
195
254
|
|
|
@@ -338,18 +397,39 @@ function formatToRelativeTime({
|
|
|
338
397
|
const elapsed = toDate.getTime() - fromDate.getTime();
|
|
339
398
|
const formatter = new Intl.RelativeTimeFormat(locale, { style: "narrow" });
|
|
340
399
|
const diffInSeconds = Math.floor(elapsed / 1e3);
|
|
341
|
-
if (diffInSeconds < SECONDS.inMinute) {
|
|
400
|
+
if (Math.abs(diffInSeconds) < SECONDS.inMinute) {
|
|
342
401
|
return "Just now";
|
|
343
|
-
} else if (diffInSeconds < SECONDS.inHour) {
|
|
402
|
+
} else if (Math.abs(diffInSeconds) < SECONDS.inHour) {
|
|
344
403
|
return formatter.format(Math.floor(-diffInSeconds / SECONDS.inMinute), "minute");
|
|
345
|
-
} else if (diffInSeconds < SECONDS.inDay) {
|
|
404
|
+
} else if (Math.abs(diffInSeconds) < SECONDS.inDay) {
|
|
346
405
|
return formatter.format(Math.floor(-diffInSeconds / SECONDS.inHour), "hour");
|
|
347
|
-
} else if (diffInSeconds < SECONDS.inMonth) {
|
|
406
|
+
} else if (Math.abs(diffInSeconds) < SECONDS.inMonth) {
|
|
348
407
|
return formatter.format(Math.floor(-diffInSeconds / SECONDS.inDay), "day");
|
|
349
408
|
} else {
|
|
350
409
|
return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(fromDate);
|
|
351
410
|
}
|
|
352
411
|
}
|
|
412
|
+
function formatSnoozedUntil({ untilDate, locale = DEFAULT_LOCALE }) {
|
|
413
|
+
const remaining = untilDate.getTime() - (/* @__PURE__ */ new Date()).getTime();
|
|
414
|
+
const diffInSeconds = Math.floor(remaining / 1e3);
|
|
415
|
+
if (diffInSeconds < 0) {
|
|
416
|
+
return "soon";
|
|
417
|
+
}
|
|
418
|
+
if (diffInSeconds < SECONDS.inMinute) {
|
|
419
|
+
return "a moment";
|
|
420
|
+
} else if (diffInSeconds < SECONDS.inHour) {
|
|
421
|
+
const minutes = Math.floor(diffInSeconds / SECONDS.inMinute);
|
|
422
|
+
return `${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
|
|
423
|
+
} else if (diffInSeconds < SECONDS.inDay) {
|
|
424
|
+
const hours = Math.floor(diffInSeconds / SECONDS.inHour);
|
|
425
|
+
return `${hours} ${hours === 1 ? "hour" : "hours"}`;
|
|
426
|
+
} else if (diffInSeconds < SECONDS.inWeek) {
|
|
427
|
+
const days = Math.floor(diffInSeconds / SECONDS.inDay);
|
|
428
|
+
return `${days} ${days === 1 ? "day" : "days"}`;
|
|
429
|
+
} else {
|
|
430
|
+
return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(untilDate);
|
|
431
|
+
}
|
|
432
|
+
}
|
|
353
433
|
var twMerge = extendTailwindMerge({
|
|
354
434
|
prefix: "nt-"
|
|
355
435
|
});
|
|
@@ -550,7 +630,6 @@ var useStyle = () => {
|
|
|
550
630
|
setIsServer(false);
|
|
551
631
|
});
|
|
552
632
|
const styleFuncMemo = createMemo(() => (appearanceKey, className) => {
|
|
553
|
-
var _a, _b;
|
|
554
633
|
const appearanceKeyParts = appearanceKey.split("__");
|
|
555
634
|
let finalAppearanceKeys = [];
|
|
556
635
|
for (let i = 0; i < appearanceKeyParts.length; i += 1) {
|
|
@@ -573,9 +652,10 @@ var useStyle = () => {
|
|
|
573
652
|
});
|
|
574
653
|
const finalClassName = classes.filter((className2) => !finalAppearanceKeys.includes(className2)).join(" ");
|
|
575
654
|
let appearanceClassnames = [];
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
655
|
+
const reversedFinalAppearanceKeys = finalAppearanceKeys.reverse();
|
|
656
|
+
for (let i = 0; i < reversedFinalAppearanceKeys.length; i += 1) {
|
|
657
|
+
if (typeof appearance.elements()[reversedFinalAppearanceKeys[i]] === "string") {
|
|
658
|
+
appearanceClassnames.push(appearance.elements()[reversedFinalAppearanceKeys[i]]);
|
|
579
659
|
}
|
|
580
660
|
}
|
|
581
661
|
appearanceClassnames = [publicFacingTwMerge(appearanceClassnames)];
|
|
@@ -814,6 +894,7 @@ var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
|
|
|
814
894
|
NotificationStatus2["UNREAD_READ"] = "unreadRead";
|
|
815
895
|
NotificationStatus2["UNREAD"] = "unread";
|
|
816
896
|
NotificationStatus2["ARCHIVED"] = "archived";
|
|
897
|
+
NotificationStatus2["SNOOZED"] = "snoozed";
|
|
817
898
|
return NotificationStatus2;
|
|
818
899
|
})(NotificationStatus || {});
|
|
819
900
|
|
|
@@ -821,13 +902,18 @@ var NotificationStatus = /* @__PURE__ */ ((NotificationStatus2) => {
|
|
|
821
902
|
var InboxContext = createContext(void 0);
|
|
822
903
|
var STATUS_TO_FILTER = {
|
|
823
904
|
["unreadRead" /* UNREAD_READ */]: {
|
|
824
|
-
archived: false
|
|
905
|
+
archived: false,
|
|
906
|
+
snoozed: false
|
|
825
907
|
},
|
|
826
908
|
["unread" /* UNREAD */]: {
|
|
827
|
-
read: false
|
|
909
|
+
read: false,
|
|
910
|
+
snoozed: false
|
|
828
911
|
},
|
|
829
912
|
["archived" /* ARCHIVED */]: {
|
|
830
913
|
archived: true
|
|
914
|
+
},
|
|
915
|
+
["snoozed" /* SNOOZED */]: {
|
|
916
|
+
snoozed: true
|
|
831
917
|
}
|
|
832
918
|
};
|
|
833
919
|
var DEFAULT_LIMIT = 10;
|
|
@@ -843,6 +929,8 @@ var InboxProvider = (props) => {
|
|
|
843
929
|
}));
|
|
844
930
|
const [hideBranding, setHideBranding] = createSignal(false);
|
|
845
931
|
const [isDevelopmentMode, setIsDevelopmentMode] = createSignal(false);
|
|
932
|
+
const [maxSnoozeDurationHours, setMaxSnoozeDurationHours] = createSignal(0);
|
|
933
|
+
const isSnoozeEnabled = createMemo(() => maxSnoozeDurationHours() > 0);
|
|
846
934
|
const [preferencesFilter, setPreferencesFilter] = createSignal(props.preferencesFilter);
|
|
847
935
|
const setNewStatus = (newStatus) => {
|
|
848
936
|
setStatus(newStatus);
|
|
@@ -899,6 +987,7 @@ var InboxProvider = (props) => {
|
|
|
899
987
|
}
|
|
900
988
|
setHideBranding(data.removeNovuBranding);
|
|
901
989
|
setIsDevelopmentMode(data.isDevelopmentMode);
|
|
990
|
+
setMaxSnoozeDurationHours(data.maxSnoozeDurationHours);
|
|
902
991
|
}
|
|
903
992
|
});
|
|
904
993
|
return createComponent(InboxContext.Provider, {
|
|
@@ -916,7 +1005,9 @@ var InboxProvider = (props) => {
|
|
|
916
1005
|
navigate,
|
|
917
1006
|
hideBranding,
|
|
918
1007
|
preferencesFilter,
|
|
919
|
-
isDevelopmentMode
|
|
1008
|
+
isDevelopmentMode,
|
|
1009
|
+
maxSnoozeDurationHours,
|
|
1010
|
+
isSnoozeEnabled
|
|
920
1011
|
},
|
|
921
1012
|
get children() {
|
|
922
1013
|
return props.children;
|
|
@@ -971,7 +1062,8 @@ var CountProvider = (props) => {
|
|
|
971
1062
|
const filters = tabs().map((tab) => ({
|
|
972
1063
|
tags: getTagsFromTab(tab),
|
|
973
1064
|
read: false,
|
|
974
|
-
archived: false
|
|
1065
|
+
archived: false,
|
|
1066
|
+
snoozed: false
|
|
975
1067
|
}));
|
|
976
1068
|
const {
|
|
977
1069
|
data
|
|
@@ -1048,7 +1140,7 @@ var CountProvider = (props) => {
|
|
|
1048
1140
|
eventHandler: (_0) => __async(void 0, [_0], function* ({
|
|
1049
1141
|
result: notification
|
|
1050
1142
|
}) {
|
|
1051
|
-
if (filter().archived) {
|
|
1143
|
+
if (filter().archived || filter().snoozed) {
|
|
1052
1144
|
return;
|
|
1053
1145
|
}
|
|
1054
1146
|
const tagsMap = tabs().reduce((acc, tab) => {
|
|
@@ -1300,7 +1392,7 @@ var InApp = (props) => {
|
|
|
1300
1392
|
return _el$;
|
|
1301
1393
|
})();
|
|
1302
1394
|
};
|
|
1303
|
-
var _tmpl$10 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1395
|
+
var _tmpl$10 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.29671 10C1.78742 10 1.39807 9.85716 1.12864 9.57149C0.862497 9.28581 0.729426 8.86623 0.729426 8.31274V2.64594H1.69543V8.29668C1.69543 8.52163 1.74964 8.69487 1.85806 8.81624C1.96978 8.93408 2.12914 8.99301 2.33614 8.99301H7.66389C7.86764 8.99301 8.02366 8.93408 8.13209 8.81624C8.24385 8.69487 8.29965 8.52163 8.29965 8.29668V2.64594H9.27059V8.31274C9.27059 8.8627 9.13591 9.28048 8.86648 9.56608C8.59705 9.85536 8.20931 10 7.70333 10H2.29671ZM3.41056 5.34543C3.29556 5.34543 3.20028 5.30438 3.1247 5.22226C3.04913 5.14015 3.01134 5.03304 3.01134 4.90089V4.72949C3.01134 4.59737 3.04749 4.49204 3.11977 4.41348C3.19535 4.33492 3.29227 4.29564 3.41056 4.29564H6.5944C6.71271 4.29564 6.80795 4.33492 6.88026 4.41348C6.95582 4.49204 6.9936 4.59737 6.9936 4.72949V4.90089C6.9936 5.03304 6.95582 5.14015 6.88026 5.22226C6.8047 5.30438 6.70939 5.34543 6.5944 5.34543H3.41056ZM1.05964 3.16014C0.724502 3.16014 0.463285 3.05301 0.276004 2.83877C0.0920037 2.62095 0 2.33172 0 1.97107V1.18907C0 0.824846 0.0952841 0.535614 0.28586 0.321373C0.476428 0.107124 0.734358 0 1.05964 0H8.94536C9.27715 0 9.53511 0.107124 9.71911 0.321373C9.90642 0.535614 10 0.824846 10 1.18907V1.97107C10 2.33172 9.90642 2.62095 9.71911 2.83877C9.53511 3.05301 9.27715 3.16014 8.94536 3.16014H1.05964ZM1.24693 2.19067H8.75805C8.87304 2.19067 8.95516 2.16211 9.00448 2.10497C9.05372 2.04427 9.07838 1.95322 9.07838 1.83181V1.32833C9.07838 1.20335 9.05372 1.1123 9.00448 1.05517C8.95516 0.99803 8.87304 0.969462 8.75805 0.969462H1.24693C1.13193 0.969462 1.04814 0.99803 0.995567 1.05517C0.946281 1.1123 0.921638 1.20335 0.921638 1.32833V1.83181C0.921638 1.95322 0.946281 2.04427 0.995567 2.10497C1.04814 2.16211 1.13193 2.19067 1.24693 2.19067Z"fill=currentColor>`);
|
|
1304
1396
|
var MarkAsArchived = (props) => {
|
|
1305
1397
|
return (() => {
|
|
1306
1398
|
var _el$ = _tmpl$10();
|
|
@@ -1308,7 +1400,7 @@ var MarkAsArchived = (props) => {
|
|
|
1308
1400
|
return _el$;
|
|
1309
1401
|
})();
|
|
1310
1402
|
};
|
|
1311
|
-
var _tmpl$11 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1403
|
+
var _tmpl$11 = /* @__PURE__ */ template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M2.17256 10.999C1.69081 10.999 1.3225 10.8562 1.06763 10.5705C0.815875 10.2848 0.689997 9.86525 0.689997 9.31177V3.64497H1.60378V9.2957C1.60378 9.52066 1.65506 9.6939 1.75763 9.81526C1.8633 9.93311 2.01405 9.99203 2.20986 9.99203H7.24963C7.44236 9.99203 7.58995 9.93311 7.69252 9.81526C7.79823 9.6939 7.85102 9.52066 7.85102 9.2957V3.64497H8.76947V9.31177C8.76947 9.86173 8.64208 10.2795 8.38721 10.5651C8.13235 10.8544 7.76556 10.999 7.28693 10.999H2.17256ZM1.00236 4.15916C0.68534 4.15916 0.438242 4.05204 0.261085 3.83779C0.0870305 3.61997 0 3.33074 0 2.97009V2.18809C0 1.82387 0.0901336 1.53464 0.270408 1.3204C0.450675 1.10615 0.694663 0.999023 1.00236 0.999023H8.46182C8.77568 0.999023 9.0197 1.10615 9.19375 1.3204C9.37094 1.53464 9.45946 1.82387 9.45946 2.18809V2.97009C9.45946 3.33074 9.37094 3.61997 9.19375 3.83779C9.0197 4.05204 8.77568 4.15916 8.46182 4.15916H1.00236ZM1.17953 3.1897H8.28464C8.39342 3.1897 8.4711 3.16113 8.51775 3.10399C8.56433 3.04329 8.58765 2.95224 8.58765 2.83083V2.32735C8.58765 2.20238 8.56433 2.11132 8.51775 2.05419C8.4711 1.99705 7.51461 1.96849 7.40583 1.96849H1.17953C1.07074 1.96849 0.991485 1.99705 0.941753 2.05419C0.895131 2.11132 0.87182 2.20238 0.87182 2.32735V2.83083C0.87182 2.95224 0.895131 3.04329 0.941753 3.10399C0.991485 3.16113 1.07074 3.1897 1.17953 3.1897Z"fill=currentColor></path><path d="M9.67298 0.553711C9.84703 0.556646 10.0146 0.614475 10.1535 0.716797L10.2208 0.771484L10.2814 0.833008C10.3958 0.960612 10.4679 1.11928 10.4913 1.28711L10.4992 1.37109L10.4982 1.45605C10.4872 1.64689 10.4124 1.8301 10.2833 1.97559L10.2843 1.97656L7.55482 5.15039L7.55384 5.14941C7.40234 5.3265 7.18382 5.43557 6.94642 5.44336L6.93861 5.44434H6.92005V5.44336C6.69203 5.44397 6.47619 5.35201 6.31947 5.19141L6.31849 5.18945L5.29505 4.13184C5.08531 3.91498 5.00658 3.60427 5.08118 3.31641L5.11634 3.21094C5.2129 2.97124 5.41476 2.78187 5.67396 2.70996L5.78626 2.68652C6.01138 2.65637 6.23763 2.72008 6.41419 2.85938L6.49818 2.93555L6.8849 3.33496L9.0138 0.859375V0.860352C9.15512 0.688807 9.35911 0.576792 9.58509 0.556641L9.67298 0.553711Z"fill=currentColor stroke=white>`);
|
|
1312
1404
|
var MarkAsArchivedRead = (props) => {
|
|
1313
1405
|
return (() => {
|
|
1314
1406
|
var _el$ = _tmpl$11();
|
|
@@ -1316,7 +1408,7 @@ var MarkAsArchivedRead = (props) => {
|
|
|
1316
1408
|
return _el$;
|
|
1317
1409
|
})();
|
|
1318
1410
|
};
|
|
1319
|
-
var _tmpl$12 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1411
|
+
var _tmpl$12 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3445_1172)><path d="M9 9.99902H1C0.867383 9.99902 0.7402 9.94635 0.64645 9.85257C0.552667 9.75882 0.5 9.63164 0.5 9.49902V0.499023C0.5 0.366407 0.552669 0.239223 0.64645 0.145473C0.7402 0.0516901 0.867383 -0.000976562 1 -0.000976562H6.25C6.42865 -0.000976562 6.59368 0.0943401 6.68301 0.249023C6.77233 0.403707 6.77233 0.59434 6.68301 0.749023C6.59368 0.903707 6.42865 0.999023 6.25 0.999023H1.5V8.99902H8.5V4.49902C8.5 4.32037 8.59532 4.15534 8.75 4.06602C8.90468 3.97669 9.09532 3.97669 9.25 4.06602C9.40468 4.15534 9.5 4.32037 9.5 4.49902V9.49902C9.5 9.63164 9.44733 9.75882 9.35355 9.85257C9.2598 9.94636 9.13262 9.99902 9 9.99902Z"fill=currentColor></path><path d="M7.5 8.24902H2.5C2.32135 8.24902 2.15632 8.15371 2.06699 7.99902C1.97767 7.84434 1.97767 7.65371 2.06699 7.49902C2.15632 7.34434 2.32135 7.24902 2.5 7.24902H7.5C7.67865 7.24902 7.84368 7.34434 7.93301 7.49902C8.02233 7.65371 8.02233 7.84434 7.93301 7.99902C7.84368 8.15371 7.67865 8.24902 7.5 8.24902Z"fill=currentColor></path><path d="M4.75 6.49901C4.61709 6.49979 4.48936 6.44761 4.39498 6.35403L2.89498 4.85403C2.76816 4.72717 2.71865 4.54235 2.76507 4.36907C2.81149 4.19583 2.94681 4.06051 3.12005 4.01409C3.29332 3.96767 3.47816 4.01718 3.60501 4.14401L4.73001 5.269L8.37501 1.16901C8.46056 1.06279 8.58578 0.996155 8.72169 0.984497C8.8576 0.972843 8.99233 1.01718 9.09474 1.10728C9.19712 1.19738 9.25825 1.32541 9.26398 1.46167C9.26968 1.59796 9.21948 1.73065 9.12502 1.82902L5.12502 6.32902C5.03371 6.43306 4.90337 6.49461 4.76502 6.49901L4.75 6.49901Z"fill=currentColor></path></g><defs><clipPath id=clip0_3445_1172><rect width=10 height=10 fill=white transform="translate(0 -0.000976562)">`);
|
|
1320
1412
|
var MarkAsRead = (props) => {
|
|
1321
1413
|
return (() => {
|
|
1322
1414
|
var _el$ = _tmpl$12();
|
|
@@ -1332,7 +1424,7 @@ var MarkAsUnarchived = (props) => {
|
|
|
1332
1424
|
return _el$;
|
|
1333
1425
|
})();
|
|
1334
1426
|
};
|
|
1335
|
-
var _tmpl$14 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1427
|
+
var _tmpl$14 = /* @__PURE__ */ template(`<svg viewBox="0 0 11 11"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6.8 1.49902H1.5C0.947715 1.49902 0.5 1.94674 0.5 2.49902V9.49902C0.5 10.0513 0.947715 10.499 1.5 10.499H8.5C9.05228 10.499 9.5 10.0513 9.5 9.49902V4.19902"stroke=currentColor stroke-miterlimit=1 stroke-linecap=round></path><circle cx=9.25 cy=1.74902 r=1.25 fill=currentColor>`);
|
|
1336
1428
|
var MarkAsUnread = (props) => {
|
|
1337
1429
|
return (() => {
|
|
1338
1430
|
var _el$ = _tmpl$14();
|
|
@@ -1372,7 +1464,7 @@ var Sms = (props) => {
|
|
|
1372
1464
|
return _el$;
|
|
1373
1465
|
})();
|
|
1374
1466
|
};
|
|
1375
|
-
var _tmpl$19 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg
|
|
1467
|
+
var _tmpl$19 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 8"fill=none xmlns=http://www.w3.org/2000/svg><path d="M1.0119 0.347055C1.06274 0.143703 1.26565 -0.000976562 1.5 -0.000976562H8.5C8.73435 -0.000976562 8.93725 0.143703 8.9881 0.347055L9.9881 4.34707C9.996 4.37871 10 4.41102 10 4.44347V7.55458C10 7.80005 9.77615 7.99902 9.5 7.99902H0.5C0.22386 7.99902 0 7.80005 0 7.55458V4.44347C0 4.41102 0.00399495 4.37871 0.011905 4.34707L1.0119 0.347055ZM1.90108 0.887912L1.12331 3.99902H3.5C3.5 4.73542 4.17155 5.33236 5 5.33236C5.82845 5.33236 6.5 4.73542 6.5 3.99902H8.8767L8.0989 0.887912H1.90108ZM7.292 4.88791C6.9062 5.67276 6.02515 6.22125 5 6.22125C3.97484 6.22125 3.0938 5.67276 2.70802 4.88791H1V7.11013H9V4.88791H7.292Z"fill=currentColor>`);
|
|
1376
1468
|
var UnreadRead = (props) => {
|
|
1377
1469
|
return (() => {
|
|
1378
1470
|
var _el$ = _tmpl$19();
|
|
@@ -1552,7 +1644,8 @@ var PopoverClose = (props) => {
|
|
|
1552
1644
|
const {
|
|
1553
1645
|
onClose
|
|
1554
1646
|
} = usePopover();
|
|
1555
|
-
const
|
|
1647
|
+
const style = useStyle();
|
|
1648
|
+
const [local, rest] = splitProps(props, ["onClick", "asChild", "appearanceKey", "class"]);
|
|
1556
1649
|
const handleClick = (e) => {
|
|
1557
1650
|
if (typeof local.onClick === "function") {
|
|
1558
1651
|
local.onClick(e);
|
|
@@ -1570,38 +1663,41 @@ var PopoverClose = (props) => {
|
|
|
1570
1663
|
return (() => {
|
|
1571
1664
|
var _el$ = _tmpl$24();
|
|
1572
1665
|
_el$.$$click = handleClick;
|
|
1573
|
-
spread(_el$,
|
|
1666
|
+
spread(_el$, mergeProps({
|
|
1667
|
+
get ["class"]() {
|
|
1668
|
+
return style(local.appearanceKey || "popoverClose", local.class);
|
|
1669
|
+
}
|
|
1670
|
+
}, rest), false, false);
|
|
1574
1671
|
return _el$;
|
|
1575
1672
|
})();
|
|
1576
1673
|
};
|
|
1577
1674
|
delegateEvents(["click"]);
|
|
1578
1675
|
var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
|
|
1579
|
-
var
|
|
1580
|
-
const
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
} = useAppearance();
|
|
1584
|
-
const style = useStyle();
|
|
1585
|
-
const {
|
|
1586
|
-
hideBranding
|
|
1587
|
-
} = useInboxContext();
|
|
1588
|
-
return [createComponent(Show, {
|
|
1589
|
-
get when() {
|
|
1590
|
-
return !hideBranding();
|
|
1591
|
-
},
|
|
1592
|
-
children: new Comment(" Powered by Novu - https://novu.co ")
|
|
1593
|
-
}), (() => {
|
|
1676
|
+
var Portal = (props) => {
|
|
1677
|
+
const appearance = useAppearance();
|
|
1678
|
+
let currentElement;
|
|
1679
|
+
return [(() => {
|
|
1594
1680
|
var _el$ = _tmpl$25();
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
get ["class"]() {
|
|
1600
|
-
return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full");
|
|
1601
|
-
}
|
|
1602
|
-
}, rest), false, false);
|
|
1681
|
+
use((el) => {
|
|
1682
|
+
currentElement = el;
|
|
1683
|
+
}, _el$);
|
|
1684
|
+
_el$.style.setProperty("display", "none");
|
|
1603
1685
|
return _el$;
|
|
1604
|
-
})()
|
|
1686
|
+
})(), createComponent(Portal$1, mergeProps({
|
|
1687
|
+
get mount() {
|
|
1688
|
+
return closestNovuRootParent(currentElement, appearance.id());
|
|
1689
|
+
}
|
|
1690
|
+
}, props))];
|
|
1691
|
+
};
|
|
1692
|
+
var closestNovuRootParent = (el, id) => {
|
|
1693
|
+
let element = el;
|
|
1694
|
+
while (element && element.id !== `novu-root-${id}`) {
|
|
1695
|
+
element = element.parentElement;
|
|
1696
|
+
}
|
|
1697
|
+
if (element && element.id === `novu-root-${id}`) {
|
|
1698
|
+
return element;
|
|
1699
|
+
}
|
|
1700
|
+
return void 0;
|
|
1605
1701
|
};
|
|
1606
1702
|
var PopoverContext = createContext(void 0);
|
|
1607
1703
|
function PopoverRoot(props) {
|
|
@@ -1618,7 +1714,7 @@ function PopoverRoot(props) {
|
|
|
1618
1714
|
const [reference, setReference] = createSignal(null);
|
|
1619
1715
|
const [floating, setFloating] = createSignal(null);
|
|
1620
1716
|
const position = useFloating(reference, floating, {
|
|
1621
|
-
strategy: "
|
|
1717
|
+
strategy: "absolute",
|
|
1622
1718
|
placement: props.placement,
|
|
1623
1719
|
whileElementsMounted: autoUpdate,
|
|
1624
1720
|
middleware: [offset(10), flip({
|
|
@@ -1665,7 +1761,7 @@ function usePopover() {
|
|
|
1665
1761
|
|
|
1666
1762
|
// src/ui/components/primitives/Popover/PopoverContent.tsx
|
|
1667
1763
|
var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
|
|
1668
|
-
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-
|
|
1764
|
+
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");
|
|
1669
1765
|
var PopoverContentBody = (props) => {
|
|
1670
1766
|
const {
|
|
1671
1767
|
open,
|
|
@@ -1691,7 +1787,7 @@ var PopoverContentBody = (props) => {
|
|
|
1691
1787
|
use(setFloating, _el$);
|
|
1692
1788
|
spread(_el$, mergeProps({
|
|
1693
1789
|
get ["class"]() {
|
|
1694
|
-
return
|
|
1790
|
+
return style(local.appearanceKey || "popoverContent", cn(popoverContentVariants(), local.class));
|
|
1695
1791
|
},
|
|
1696
1792
|
get style() {
|
|
1697
1793
|
return floatingStyles();
|
|
@@ -1704,7 +1800,6 @@ var PopoverContentBody = (props) => {
|
|
|
1704
1800
|
})();
|
|
1705
1801
|
};
|
|
1706
1802
|
var PopoverContent = (props) => {
|
|
1707
|
-
const [local, rest] = splitProps(props, ["portal"]);
|
|
1708
1803
|
const {
|
|
1709
1804
|
open,
|
|
1710
1805
|
onClose,
|
|
@@ -1745,28 +1840,26 @@ var PopoverContent = (props) => {
|
|
|
1745
1840
|
return open();
|
|
1746
1841
|
},
|
|
1747
1842
|
get children() {
|
|
1748
|
-
return createComponent(
|
|
1749
|
-
get when() {
|
|
1750
|
-
return local.portal;
|
|
1751
|
-
},
|
|
1752
|
-
get fallback() {
|
|
1753
|
-
return createComponent(PopoverContentBody, rest);
|
|
1754
|
-
},
|
|
1843
|
+
return createComponent(Portal, {
|
|
1755
1844
|
get children() {
|
|
1756
|
-
return createComponent(
|
|
1757
|
-
get children() {
|
|
1758
|
-
return createComponent(Root, {
|
|
1759
|
-
get children() {
|
|
1760
|
-
return createComponent(PopoverContentBody, rest);
|
|
1761
|
-
}
|
|
1762
|
-
});
|
|
1763
|
-
}
|
|
1764
|
-
});
|
|
1845
|
+
return createComponent(PopoverContentBody, props);
|
|
1765
1846
|
}
|
|
1766
1847
|
});
|
|
1767
1848
|
}
|
|
1768
1849
|
});
|
|
1769
1850
|
};
|
|
1851
|
+
|
|
1852
|
+
// src/ui/helpers/mergeRefs.ts
|
|
1853
|
+
function chain(callbacks) {
|
|
1854
|
+
return (...args) => {
|
|
1855
|
+
for (const callback of callbacks) callback && callback(...args);
|
|
1856
|
+
};
|
|
1857
|
+
}
|
|
1858
|
+
function mergeRefs(...refs) {
|
|
1859
|
+
return chain(refs);
|
|
1860
|
+
}
|
|
1861
|
+
|
|
1862
|
+
// src/ui/components/primitives/Popover/PopoverTrigger.tsx
|
|
1770
1863
|
var _tmpl$27 = /* @__PURE__ */ template(`<button>`);
|
|
1771
1864
|
var PopoverTrigger = (props) => {
|
|
1772
1865
|
const {
|
|
@@ -1774,26 +1867,31 @@ var PopoverTrigger = (props) => {
|
|
|
1774
1867
|
onToggle
|
|
1775
1868
|
} = usePopover();
|
|
1776
1869
|
const style = useStyle();
|
|
1777
|
-
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick"]);
|
|
1870
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "ref"]);
|
|
1778
1871
|
const handleClick = (e) => {
|
|
1779
1872
|
if (typeof local.onClick === "function") {
|
|
1780
1873
|
local.onClick(e);
|
|
1781
1874
|
}
|
|
1782
1875
|
onToggle();
|
|
1783
1876
|
};
|
|
1877
|
+
const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
1784
1878
|
if (local.asChild) {
|
|
1785
1879
|
return createComponent(Dynamic, mergeProps({
|
|
1786
1880
|
get component() {
|
|
1787
1881
|
return local.asChild;
|
|
1788
1882
|
},
|
|
1789
|
-
ref
|
|
1883
|
+
ref(r$) {
|
|
1884
|
+
var _ref$ = ref();
|
|
1885
|
+
typeof _ref$ === "function" && _ref$(r$);
|
|
1886
|
+
},
|
|
1790
1887
|
onClick: handleClick
|
|
1791
1888
|
}, rest));
|
|
1792
1889
|
}
|
|
1793
1890
|
return (() => {
|
|
1794
1891
|
var _el$ = _tmpl$27();
|
|
1795
1892
|
_el$.$$click = handleClick;
|
|
1796
|
-
|
|
1893
|
+
var _ref$2 = ref();
|
|
1894
|
+
typeof _ref$2 === "function" && use(_ref$2, _el$);
|
|
1797
1895
|
spread(_el$, mergeProps({
|
|
1798
1896
|
get ["class"]() {
|
|
1799
1897
|
return style(local.appearanceKey || "dropdownTrigger");
|
|
@@ -1823,26 +1921,44 @@ var Popover = {
|
|
|
1823
1921
|
*/
|
|
1824
1922
|
Close: PopoverClose
|
|
1825
1923
|
};
|
|
1826
|
-
var dropdownContentVariants = () => "nt-
|
|
1924
|
+
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";
|
|
1827
1925
|
var DropdownContent = (props) => {
|
|
1828
|
-
const
|
|
1829
|
-
const [local, rest] = splitProps(props, ["appearanceKey"]);
|
|
1926
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
|
|
1830
1927
|
return createComponent(Popover.Content, mergeProps({
|
|
1928
|
+
get appearanceKey() {
|
|
1929
|
+
return local.appearanceKey || "dropdownContent";
|
|
1930
|
+
},
|
|
1831
1931
|
get ["class"]() {
|
|
1832
|
-
return
|
|
1932
|
+
return cn(dropdownContentVariants(), local.class);
|
|
1833
1933
|
}
|
|
1834
1934
|
}, rest));
|
|
1835
1935
|
};
|
|
1836
|
-
var dropdownItemVariants = () => "focus:nt-outline-none 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";
|
|
1936
|
+
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";
|
|
1837
1937
|
var DropdownItem = (props) => {
|
|
1838
|
-
const
|
|
1839
|
-
const [local, rest] = splitProps(props, ["appearanceKey", "onClick", "class"]);
|
|
1938
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "onClick", "class", "asChild"]);
|
|
1840
1939
|
const {
|
|
1841
1940
|
onClose
|
|
1842
1941
|
} = usePopover();
|
|
1942
|
+
const handleClick = (e) => {
|
|
1943
|
+
if (typeof local.onClick === "function") {
|
|
1944
|
+
local.onClick(e);
|
|
1945
|
+
}
|
|
1946
|
+
onClose();
|
|
1947
|
+
};
|
|
1948
|
+
if (local.asChild) {
|
|
1949
|
+
return createComponent(Dynamic, mergeProps({
|
|
1950
|
+
get component() {
|
|
1951
|
+
return local.asChild;
|
|
1952
|
+
},
|
|
1953
|
+
onClick: handleClick
|
|
1954
|
+
}, rest));
|
|
1955
|
+
}
|
|
1843
1956
|
return createComponent(Popover.Close, mergeProps({
|
|
1957
|
+
get appearanceKey() {
|
|
1958
|
+
return local.appearanceKey || "dropdownItem";
|
|
1959
|
+
},
|
|
1844
1960
|
get ["class"]() {
|
|
1845
|
-
return
|
|
1961
|
+
return cn(dropdownItemVariants(), local.class);
|
|
1846
1962
|
},
|
|
1847
1963
|
onClick: (e) => {
|
|
1848
1964
|
if (typeof local.onClick === "function") {
|
|
@@ -1861,10 +1977,10 @@ var DropdownRoot = (props) => {
|
|
|
1861
1977
|
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`;
|
|
1862
1978
|
var DropdownTrigger = (props) => {
|
|
1863
1979
|
const style = useStyle();
|
|
1864
|
-
const [local, rest] = splitProps(props, ["appearanceKey"]);
|
|
1980
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "class"]);
|
|
1865
1981
|
return createComponent(Popover.Trigger, mergeProps({
|
|
1866
1982
|
get ["class"]() {
|
|
1867
|
-
return style(local.appearanceKey || "dropdownTrigger", dropdownTriggerButtonVariants());
|
|
1983
|
+
return style(local.appearanceKey || "dropdownTrigger", cn(dropdownTriggerButtonVariants(), local.class));
|
|
1868
1984
|
}
|
|
1869
1985
|
}, rest));
|
|
1870
1986
|
};
|
|
@@ -2119,27 +2235,50 @@ var Tabs = {
|
|
|
2119
2235
|
var notificationStatusOptionsLocalizationKeys = {
|
|
2120
2236
|
unreadRead: "inbox.filters.dropdownOptions.default",
|
|
2121
2237
|
unread: "inbox.filters.dropdownOptions.unread",
|
|
2122
|
-
archived: "inbox.filters.dropdownOptions.archived"
|
|
2238
|
+
archived: "inbox.filters.dropdownOptions.archived",
|
|
2239
|
+
snoozed: "inbox.filters.dropdownOptions.snoozed"
|
|
2123
2240
|
};
|
|
2124
2241
|
var inboxFilterLocalizationKeys = {
|
|
2125
2242
|
unreadRead: "inbox.filters.labels.default",
|
|
2126
2243
|
unread: "inbox.filters.labels.unread",
|
|
2127
|
-
archived: "inbox.filters.labels.archived"
|
|
2244
|
+
archived: "inbox.filters.labels.archived",
|
|
2245
|
+
snoozed: "inbox.filters.labels.snoozed"
|
|
2246
|
+
};
|
|
2247
|
+
var _tmpl$31 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 12"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 2.99902V5.99902H8.25M11 5.99902C11 8.76045 8.76142 10.999 6 10.999C3.23858 10.999 1 8.76045 1 5.99902C1 3.2376 3.23858 0.999023 6 0.999023C8.76142 0.999023 11 3.2376 11 5.99902Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
|
|
2248
|
+
var Snooze = (props) => {
|
|
2249
|
+
return (() => {
|
|
2250
|
+
var _el$ = _tmpl$31();
|
|
2251
|
+
spread(_el$, props, true, true);
|
|
2252
|
+
return _el$;
|
|
2253
|
+
})();
|
|
2128
2254
|
};
|
|
2129
|
-
|
|
2255
|
+
|
|
2256
|
+
// src/ui/components/elements/InboxStatus/InboxStatusOptions.tsx
|
|
2257
|
+
var _tmpl$33 = /* @__PURE__ */ template(`<span><span></span><span>`);
|
|
2130
2258
|
var cases = [{
|
|
2131
2259
|
status: "unreadRead" /* UNREAD_READ */,
|
|
2132
2260
|
icon: UnreadRead
|
|
2133
2261
|
}, {
|
|
2134
2262
|
status: "unread" /* UNREAD */,
|
|
2135
2263
|
icon: MarkAsUnread
|
|
2264
|
+
}, {
|
|
2265
|
+
status: "snoozed" /* SNOOZED */,
|
|
2266
|
+
icon: Snooze
|
|
2136
2267
|
}, {
|
|
2137
2268
|
status: "archived" /* ARCHIVED */,
|
|
2138
2269
|
icon: MarkAsArchived
|
|
2139
2270
|
}];
|
|
2140
2271
|
var StatusOptions = (props) => {
|
|
2272
|
+
const {
|
|
2273
|
+
isSnoozeEnabled
|
|
2274
|
+
} = useInboxContext();
|
|
2275
|
+
const filteredCases = () => {
|
|
2276
|
+
return cases.filter((c) => c.status !== "snoozed" /* SNOOZED */ || isSnoozeEnabled());
|
|
2277
|
+
};
|
|
2141
2278
|
return createComponent(For, {
|
|
2142
|
-
each
|
|
2279
|
+
get each() {
|
|
2280
|
+
return filteredCases();
|
|
2281
|
+
},
|
|
2143
2282
|
children: (c) => createComponent(StatusItem, {
|
|
2144
2283
|
get localizationKey() {
|
|
2145
2284
|
return notificationStatusOptionsLocalizationKeys[c.status];
|
|
@@ -2170,11 +2309,11 @@ var StatusItem = (props) => {
|
|
|
2170
2309
|
},
|
|
2171
2310
|
get children() {
|
|
2172
2311
|
return [(() => {
|
|
2173
|
-
var _el$ = _tmpl$
|
|
2312
|
+
var _el$ = _tmpl$33(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
2174
2313
|
insert(_el$2, () => props.icon());
|
|
2175
2314
|
insert(_el$3, () => t(props.localizationKey));
|
|
2176
2315
|
effect((_p$) => {
|
|
2177
|
-
var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon", "nt-size-
|
|
2316
|
+
var _v$ = style("inboxStatus__dropdownItemLabelContainer", "nt-flex nt-gap-2 nt-items-center"), _v$2 = style("inboxStatus__dropdownItemLeft__icon", "nt-size-3"), _v$3 = props.localizationKey, _v$4 = style("inboxStatus__dropdownItemLabel", "nt-leading-none");
|
|
2178
2317
|
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
2179
2318
|
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
|
|
2180
2319
|
_v$3 !== _p$.a && setAttribute(_el$3, "data-localization", _p$.a = _v$3);
|
|
@@ -2204,7 +2343,7 @@ var StatusItem = (props) => {
|
|
|
2204
2343
|
};
|
|
2205
2344
|
|
|
2206
2345
|
// src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx
|
|
2207
|
-
var _tmpl$
|
|
2346
|
+
var _tmpl$34 = /* @__PURE__ */ template(`<span>`);
|
|
2208
2347
|
var StatusDropdown = () => {
|
|
2209
2348
|
const style = useStyle();
|
|
2210
2349
|
const {
|
|
@@ -2229,7 +2368,7 @@ var StatusDropdown = () => {
|
|
|
2229
2368
|
}, triggerProps, {
|
|
2230
2369
|
get children() {
|
|
2231
2370
|
return [(() => {
|
|
2232
|
-
var _el$ = _tmpl$
|
|
2371
|
+
var _el$ = _tmpl$34();
|
|
2233
2372
|
insert(_el$, () => t(inboxFilterLocalizationKeys[status()]));
|
|
2234
2373
|
effect((_p$) => {
|
|
2235
2374
|
var _v$ = inboxFilterLocalizationKeys[status()], _v$2 = style("inboxStatus__title", "nt-text-base");
|
|
@@ -2374,7 +2513,7 @@ var useReadAll = (props) => {
|
|
|
2374
2513
|
};
|
|
2375
2514
|
|
|
2376
2515
|
// src/ui/components/elements/Header/MoreActionsOptions.tsx
|
|
2377
|
-
var _tmpl$
|
|
2516
|
+
var _tmpl$35 = /* @__PURE__ */ template(`<span>`);
|
|
2378
2517
|
var MoreActionsOptions = () => {
|
|
2379
2518
|
const {
|
|
2380
2519
|
filter
|
|
@@ -2422,12 +2561,12 @@ var ActionsItem = (props) => {
|
|
|
2422
2561
|
},
|
|
2423
2562
|
get children() {
|
|
2424
2563
|
return [(() => {
|
|
2425
|
-
var _el$ = _tmpl$
|
|
2564
|
+
var _el$ = _tmpl$35();
|
|
2426
2565
|
insert(_el$, () => props.icon());
|
|
2427
|
-
effect(() => className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-
|
|
2566
|
+
effect(() => className(_el$, style("moreActions__dropdownItemLeft__icon", "nt-size-3")));
|
|
2428
2567
|
return _el$;
|
|
2429
2568
|
})(), (() => {
|
|
2430
|
-
var _el$2 = _tmpl$
|
|
2569
|
+
var _el$2 = _tmpl$35();
|
|
2431
2570
|
insert(_el$2, () => t(props.localizationKey));
|
|
2432
2571
|
effect((_p$) => {
|
|
2433
2572
|
var _v$ = props.localizationKey, _v$2 = style("moreActions__dropdownItemLabel", "nt-leading-none");
|
|
@@ -2452,7 +2591,7 @@ var MoreActionsDropdown = () => {
|
|
|
2452
2591
|
} = useInboxContext();
|
|
2453
2592
|
return createComponent(Show, {
|
|
2454
2593
|
get when() {
|
|
2455
|
-
return status() !== "archived" /* ARCHIVED */;
|
|
2594
|
+
return memo(() => status() !== "archived" /* ARCHIVED */)() && status() !== "snoozed" /* SNOOZED */;
|
|
2456
2595
|
},
|
|
2457
2596
|
get children() {
|
|
2458
2597
|
return createComponent(Dropdown.Root, {
|
|
@@ -2486,11 +2625,11 @@ var MoreActionsDropdown = () => {
|
|
|
2486
2625
|
};
|
|
2487
2626
|
|
|
2488
2627
|
// src/ui/components/elements/Header/ActionsContainer.tsx
|
|
2489
|
-
var _tmpl$
|
|
2628
|
+
var _tmpl$36 = /* @__PURE__ */ template(`<div>`);
|
|
2490
2629
|
var ActionsContainer = (props) => {
|
|
2491
2630
|
const style = useStyle();
|
|
2492
2631
|
return (() => {
|
|
2493
|
-
var _el$ = _tmpl$
|
|
2632
|
+
var _el$ = _tmpl$36();
|
|
2494
2633
|
insert(_el$, createComponent(MoreActionsDropdown, {}), null);
|
|
2495
2634
|
insert(_el$, createComponent(Show, {
|
|
2496
2635
|
get when() {
|
|
@@ -2518,11 +2657,11 @@ var ActionsContainer = (props) => {
|
|
|
2518
2657
|
};
|
|
2519
2658
|
|
|
2520
2659
|
// src/ui/components/elements/Header/Header.tsx
|
|
2521
|
-
var _tmpl$
|
|
2660
|
+
var _tmpl$37 = /* @__PURE__ */ template(`<div>`);
|
|
2522
2661
|
var Header = (props) => {
|
|
2523
2662
|
const style = useStyle();
|
|
2524
2663
|
return (() => {
|
|
2525
|
-
var _el$ = _tmpl$
|
|
2664
|
+
var _el$ = _tmpl$37();
|
|
2526
2665
|
insert(_el$, createComponent(StatusDropdown, {}), null);
|
|
2527
2666
|
insert(_el$, createComponent(ActionsContainer, {
|
|
2528
2667
|
get showPreferences() {
|
|
@@ -2533,7 +2672,35 @@ var Header = (props) => {
|
|
|
2533
2672
|
return _el$;
|
|
2534
2673
|
})();
|
|
2535
2674
|
};
|
|
2536
|
-
var _tmpl$
|
|
2675
|
+
var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
|
|
2676
|
+
var Root = (props) => {
|
|
2677
|
+
const [_, rest] = splitProps(props, ["class"]);
|
|
2678
|
+
const {
|
|
2679
|
+
id
|
|
2680
|
+
} = useAppearance();
|
|
2681
|
+
const style = useStyle();
|
|
2682
|
+
const {
|
|
2683
|
+
hideBranding
|
|
2684
|
+
} = useInboxContext();
|
|
2685
|
+
return [createComponent(Show, {
|
|
2686
|
+
get when() {
|
|
2687
|
+
return !hideBranding();
|
|
2688
|
+
},
|
|
2689
|
+
children: new Comment(" Powered by Novu - https://novu.co ")
|
|
2690
|
+
}), (() => {
|
|
2691
|
+
var _el$ = _tmpl$38();
|
|
2692
|
+
spread(_el$, mergeProps({
|
|
2693
|
+
get id() {
|
|
2694
|
+
return `novu-root-${id()}`;
|
|
2695
|
+
},
|
|
2696
|
+
get ["class"]() {
|
|
2697
|
+
return style("root"), cn("novu", id(), "nt-text-foreground nt-h-full");
|
|
2698
|
+
}
|
|
2699
|
+
}, rest), false, false);
|
|
2700
|
+
return _el$;
|
|
2701
|
+
})()];
|
|
2702
|
+
};
|
|
2703
|
+
var _tmpl$39 = /* @__PURE__ */ template(`<div>`);
|
|
2537
2704
|
var Collapsible = (props) => {
|
|
2538
2705
|
const style = useStyle();
|
|
2539
2706
|
let contentRef;
|
|
@@ -2542,7 +2709,7 @@ var Collapsible = (props) => {
|
|
|
2542
2709
|
requestAnimationFrame(() => setEnableTransition(true));
|
|
2543
2710
|
});
|
|
2544
2711
|
return (() => {
|
|
2545
|
-
var _el$ = _tmpl$
|
|
2712
|
+
var _el$ = _tmpl$39();
|
|
2546
2713
|
var _ref$ = contentRef;
|
|
2547
2714
|
typeof _ref$ === "function" ? use(_ref$, _el$) : contentRef = _el$;
|
|
2548
2715
|
spread(_el$, mergeProps({
|
|
@@ -2561,11 +2728,11 @@ var Collapsible = (props) => {
|
|
|
2561
2728
|
return _el$;
|
|
2562
2729
|
})();
|
|
2563
2730
|
};
|
|
2564
|
-
var _tmpl$
|
|
2731
|
+
var _tmpl$40 = /* @__PURE__ */ template(`<label><input type=checkbox class="nt-peer nt-sr-only"><div>`);
|
|
2565
2732
|
var Switch = (props) => {
|
|
2566
2733
|
const style = useStyle();
|
|
2567
2734
|
return (() => {
|
|
2568
|
-
var _el$ = _tmpl$
|
|
2735
|
+
var _el$ = _tmpl$40(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
2569
2736
|
_el$2.addEventListener("change", (e) => {
|
|
2570
2737
|
props.onChange(e.target.checked);
|
|
2571
2738
|
});
|
|
@@ -2586,7 +2753,7 @@ var Switch = (props) => {
|
|
|
2586
2753
|
};
|
|
2587
2754
|
|
|
2588
2755
|
// src/ui/components/elements/Preferences/ChannelRow.tsx
|
|
2589
|
-
var _tmpl$
|
|
2756
|
+
var _tmpl$41 = /* @__PURE__ */ template(`<div><div><div></div><span></span></div><div>`);
|
|
2590
2757
|
var ChannelRow = (props) => {
|
|
2591
2758
|
const style = useStyle();
|
|
2592
2759
|
const updatePreference = (enabled) => __async(void 0, null, function* () {
|
|
@@ -2600,7 +2767,7 @@ var ChannelRow = (props) => {
|
|
|
2600
2767
|
yield updatePreference(checked);
|
|
2601
2768
|
});
|
|
2602
2769
|
return (() => {
|
|
2603
|
-
var _el$ = _tmpl$
|
|
2770
|
+
var _el$ = _tmpl$41(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
|
|
2604
2771
|
insert(_el$3, createComponent(ChannelIcon, {
|
|
2605
2772
|
appearanceKey: "channel__icon",
|
|
2606
2773
|
get channel() {
|
|
@@ -2686,12 +2853,12 @@ var getLabel = (channel) => {
|
|
|
2686
2853
|
return "";
|
|
2687
2854
|
}
|
|
2688
2855
|
};
|
|
2689
|
-
var _tmpl$
|
|
2856
|
+
var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
|
|
2690
2857
|
var _tmpl$211 = /* @__PURE__ */ template(`<div><div></div><div>`);
|
|
2691
2858
|
var SkeletonText = (props) => {
|
|
2692
2859
|
const style = useStyle();
|
|
2693
2860
|
return (() => {
|
|
2694
|
-
var _el$ = _tmpl$
|
|
2861
|
+
var _el$ = _tmpl$43();
|
|
2695
2862
|
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))));
|
|
2696
2863
|
return _el$;
|
|
2697
2864
|
})();
|
|
@@ -2699,7 +2866,7 @@ var SkeletonText = (props) => {
|
|
|
2699
2866
|
var SkeletonAvatar = (props) => {
|
|
2700
2867
|
const style = useStyle();
|
|
2701
2868
|
return (() => {
|
|
2702
|
-
var _el$2 = _tmpl$
|
|
2869
|
+
var _el$2 = _tmpl$43();
|
|
2703
2870
|
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))));
|
|
2704
2871
|
return _el$2;
|
|
2705
2872
|
})();
|
|
@@ -2724,7 +2891,7 @@ var SkeletonSwitch = (props) => {
|
|
|
2724
2891
|
};
|
|
2725
2892
|
|
|
2726
2893
|
// src/ui/components/elements/Preferences/PreferencesListSkeleton.tsx
|
|
2727
|
-
var _tmpl$
|
|
2894
|
+
var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
|
|
2728
2895
|
var channelIcons = [InApp, Email, Sms, Push, Chat];
|
|
2729
2896
|
var PreferencesListSkeleton = (props) => {
|
|
2730
2897
|
const style = useStyle();
|
|
@@ -2732,7 +2899,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2732
2899
|
t
|
|
2733
2900
|
} = useLocalization();
|
|
2734
2901
|
return (() => {
|
|
2735
|
-
var _el$ = _tmpl$
|
|
2902
|
+
var _el$ = _tmpl$44();
|
|
2736
2903
|
insert(_el$, createComponent(Motion.div, {
|
|
2737
2904
|
get animate() {
|
|
2738
2905
|
return {
|
|
@@ -2774,7 +2941,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2774
2941
|
return style("preferencesList__skeletonIcon", "nt-size-8 nt-p-2 nt-rounded-lg nt-bg-neutral-alpha-100");
|
|
2775
2942
|
}
|
|
2776
2943
|
}), (() => {
|
|
2777
|
-
var _el$3 = _tmpl$
|
|
2944
|
+
var _el$3 = _tmpl$44();
|
|
2778
2945
|
insert(_el$3, createComponent(SkeletonText, {
|
|
2779
2946
|
appearanceKey: "notificationList__skeletonText",
|
|
2780
2947
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -2792,7 +2959,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2792
2959
|
}
|
|
2793
2960
|
});
|
|
2794
2961
|
})), (() => {
|
|
2795
|
-
var _el$2 = _tmpl$
|
|
2962
|
+
var _el$2 = _tmpl$44();
|
|
2796
2963
|
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")));
|
|
2797
2964
|
return _el$2;
|
|
2798
2965
|
})()];
|
|
@@ -2837,7 +3004,7 @@ var PreferencesListSkeleton = (props) => {
|
|
|
2837
3004
|
};
|
|
2838
3005
|
|
|
2839
3006
|
// src/ui/components/elements/Preferences/Preferences.tsx
|
|
2840
|
-
var _tmpl$
|
|
3007
|
+
var _tmpl$45 = /* @__PURE__ */ template(`<div>`);
|
|
2841
3008
|
var _tmpl$212 = /* @__PURE__ */ template(`<span>`);
|
|
2842
3009
|
var _tmpl$310 = /* @__PURE__ */ template(`<div><div><div><div></div></div><span>`);
|
|
2843
3010
|
var Preferences = () => {
|
|
@@ -2886,7 +3053,7 @@ var Preferences = () => {
|
|
|
2886
3053
|
});
|
|
2887
3054
|
});
|
|
2888
3055
|
return (() => {
|
|
2889
|
-
var _el$ = _tmpl$
|
|
3056
|
+
var _el$ = _tmpl$45();
|
|
2890
3057
|
insert(_el$, createComponent(PreferencesRow, {
|
|
2891
3058
|
localizationKey: "preferences.global",
|
|
2892
3059
|
get channels() {
|
|
@@ -2965,7 +3132,7 @@ var WorkflowDescription = (props) => {
|
|
|
2965
3132
|
return channels.map((c, index) => [c, memo(() => index < channels.length - 1 && ", ")]);
|
|
2966
3133
|
};
|
|
2967
3134
|
return (() => {
|
|
2968
|
-
var _el$3 = _tmpl$
|
|
3135
|
+
var _el$3 = _tmpl$45();
|
|
2969
3136
|
insert(_el$3, channelNames);
|
|
2970
3137
|
effect(() => className(_el$3, style(props.appearanceKey, cn("nt-text-sm nt-text-foreground-alpha-600 nt-text-start", props.class))));
|
|
2971
3138
|
return _el$3;
|
|
@@ -3014,7 +3181,7 @@ var PreferencesRow = (props) => {
|
|
|
3014
3181
|
return isOpenChannels();
|
|
3015
3182
|
},
|
|
3016
3183
|
get children() {
|
|
3017
|
-
var _el$9 = _tmpl$
|
|
3184
|
+
var _el$9 = _tmpl$45();
|
|
3018
3185
|
insert(_el$9, createComponent(For, {
|
|
3019
3186
|
get each() {
|
|
3020
3187
|
return channels();
|
|
@@ -3064,14 +3231,14 @@ var PreferencesRow = (props) => {
|
|
|
3064
3231
|
});
|
|
3065
3232
|
};
|
|
3066
3233
|
delegateEvents(["click"]);
|
|
3067
|
-
var _tmpl$
|
|
3234
|
+
var _tmpl$46 = /* @__PURE__ */ template(`<div><div data-localization=preferences.title>`);
|
|
3068
3235
|
var PreferencesHeader = (props) => {
|
|
3069
3236
|
const style = useStyle();
|
|
3070
3237
|
const {
|
|
3071
3238
|
t
|
|
3072
3239
|
} = useLocalization();
|
|
3073
3240
|
return (() => {
|
|
3074
|
-
var _el$ = _tmpl$
|
|
3241
|
+
var _el$ = _tmpl$46(), _el$2 = _el$.firstChild;
|
|
3075
3242
|
insert(_el$, createComponent(Show, {
|
|
3076
3243
|
get when() {
|
|
3077
3244
|
return props.navigateToNotifications;
|
|
@@ -3135,20 +3302,28 @@ var useTabsDropdown = ({ tabs }) => {
|
|
|
3135
3302
|
});
|
|
3136
3303
|
return { dropdownTabs, setTabsList, visibleTabs };
|
|
3137
3304
|
};
|
|
3138
|
-
var _tmpl$
|
|
3305
|
+
var _tmpl$47 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.0001 10.879L13.7126 7.1665L14.7731 8.227L10.0001 13L5.22705 8.227L6.28755 7.1665L10.0001 10.879Z"fill=currentColor>`);
|
|
3139
3306
|
var ArrowDown = (props) => {
|
|
3140
3307
|
return (() => {
|
|
3141
|
-
var _el$ = _tmpl$
|
|
3308
|
+
var _el$ = _tmpl$47();
|
|
3309
|
+
spread(_el$, props, true, true);
|
|
3310
|
+
return _el$;
|
|
3311
|
+
})();
|
|
3312
|
+
};
|
|
3313
|
+
var _tmpl$48 = /* @__PURE__ */ template(`<svg viewBox="0 0 12 12"fill=none xmlns=http://www.w3.org/2000/svg><g clip-path=url(#clip0_3188_15050)><path d="M6 3V6L8 7M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
|
|
3314
|
+
var Clock = (props) => {
|
|
3315
|
+
return (() => {
|
|
3316
|
+
var _el$ = _tmpl$48();
|
|
3142
3317
|
spread(_el$, props, true, true);
|
|
3143
3318
|
return _el$;
|
|
3144
3319
|
})();
|
|
3145
3320
|
};
|
|
3146
|
-
var _tmpl$
|
|
3321
|
+
var _tmpl$49 = /* @__PURE__ */ template(`<strong>`);
|
|
3147
3322
|
var _tmpl$213 = /* @__PURE__ */ template(`<p>`);
|
|
3148
3323
|
var Bold = (props) => {
|
|
3149
3324
|
const style = useStyle();
|
|
3150
3325
|
return (() => {
|
|
3151
|
-
var _el$ = _tmpl$
|
|
3326
|
+
var _el$ = _tmpl$49();
|
|
3152
3327
|
insert(_el$, () => props.children);
|
|
3153
3328
|
effect(() => className(_el$, style(props.appearanceKey || "strong", "nt-font-semibold")));
|
|
3154
3329
|
return _el$;
|
|
@@ -3193,12 +3368,58 @@ var Markdown = (props) => {
|
|
|
3193
3368
|
})();
|
|
3194
3369
|
};
|
|
3195
3370
|
var Markdown_default = Markdown;
|
|
3371
|
+
var _tmpl$50 = /* @__PURE__ */ template(`<span>`);
|
|
3372
|
+
var badgeVariants = cva(cn("nt-inline-flex nt-flex-row nt-gap-1 nt-items-center"), {
|
|
3373
|
+
variants: {
|
|
3374
|
+
variant: {
|
|
3375
|
+
secondary: "nt-bg-neutral-alpha-50"
|
|
3376
|
+
},
|
|
3377
|
+
size: {
|
|
3378
|
+
default: "nt-px-1 nt-py-px nt-rounded-sm nt-text-xs nt-px-1"
|
|
3379
|
+
}
|
|
3380
|
+
},
|
|
3381
|
+
defaultVariants: {
|
|
3382
|
+
variant: "secondary",
|
|
3383
|
+
size: "default"
|
|
3384
|
+
}
|
|
3385
|
+
});
|
|
3386
|
+
var Badge = (props) => {
|
|
3387
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
3388
|
+
const style = useStyle();
|
|
3389
|
+
return (() => {
|
|
3390
|
+
var _el$ = _tmpl$50();
|
|
3391
|
+
spread(_el$, mergeProps({
|
|
3392
|
+
get ["data-variant"]() {
|
|
3393
|
+
return props.variant;
|
|
3394
|
+
},
|
|
3395
|
+
get ["data-size"]() {
|
|
3396
|
+
return props.size;
|
|
3397
|
+
},
|
|
3398
|
+
get ["class"]() {
|
|
3399
|
+
return style(local.appearanceKey || "badge", cn(badgeVariants({
|
|
3400
|
+
variant: props.variant,
|
|
3401
|
+
size: props.size
|
|
3402
|
+
}), local.class));
|
|
3403
|
+
}
|
|
3404
|
+
}, rest), false, false);
|
|
3405
|
+
return _el$;
|
|
3406
|
+
})();
|
|
3407
|
+
};
|
|
3408
|
+
var _tmpl$51 = /* @__PURE__ */ template(`<svg viewBox="0 0 10 10"fill=none xmlns=http://www.w3.org/2000/svg><path d="M4.99992 2.91634V4.99967M4.79992 5.39616L3.27392 6.46553M1.66659 1.66634L8.33325 8.33301M9.16658 4.99967C9.16658 7.30086 7.30111 9.16634 4.99992 9.16634C2.69873 9.16634 0.833252 7.30086 0.833252 4.99967C0.833252 2.69849 2.69873 0.833008 4.99992 0.833008C7.30111 0.833008 9.16658 2.69849 9.16658 4.99967Z"stroke=currentColor stroke-linecap=round stroke-linejoin=round>`);
|
|
3409
|
+
var Unsnooze = (props) => {
|
|
3410
|
+
return (() => {
|
|
3411
|
+
var _el$ = _tmpl$51();
|
|
3412
|
+
spread(_el$, props, true, true);
|
|
3413
|
+
return _el$;
|
|
3414
|
+
})();
|
|
3415
|
+
};
|
|
3196
3416
|
var TooltipContext = createContext(void 0);
|
|
3197
3417
|
function TooltipRoot(props) {
|
|
3198
3418
|
const [reference, setReference] = createSignal(null);
|
|
3199
3419
|
const [floating, setFloating] = createSignal(null);
|
|
3200
3420
|
const position = useFloating(reference, floating, {
|
|
3201
3421
|
placement: props.placement || "top",
|
|
3422
|
+
strategy: "absolute",
|
|
3202
3423
|
whileElementsMounted: autoUpdate,
|
|
3203
3424
|
middleware: [offset(10), flip({
|
|
3204
3425
|
fallbackPlacements: props.fallbackPlacements || ["bottom"]
|
|
@@ -3239,7 +3460,7 @@ function useTooltip() {
|
|
|
3239
3460
|
}
|
|
3240
3461
|
|
|
3241
3462
|
// src/ui/components/primitives/Tooltip/TooltipContent.tsx
|
|
3242
|
-
var _tmpl$
|
|
3463
|
+
var _tmpl$52 = /* @__PURE__ */ template(`<div>`);
|
|
3243
3464
|
var tooltipContentVariants = () => "nt-bg-foreground nt-p-2 nt-shadow-tooltip nt-rounded-lg nt-text-background nt-text-xs";
|
|
3244
3465
|
var TooltipContentBody = (props) => {
|
|
3245
3466
|
const {
|
|
@@ -3262,7 +3483,7 @@ var TooltipContentBody = (props) => {
|
|
|
3262
3483
|
});
|
|
3263
3484
|
});
|
|
3264
3485
|
return (() => {
|
|
3265
|
-
var _el$ = _tmpl$
|
|
3486
|
+
var _el$ = _tmpl$52();
|
|
3266
3487
|
use(setFloating, _el$);
|
|
3267
3488
|
spread(_el$, mergeProps({
|
|
3268
3489
|
get ["class"]() {
|
|
@@ -3289,7 +3510,7 @@ var TooltipContent = (props) => {
|
|
|
3289
3510
|
return open();
|
|
3290
3511
|
},
|
|
3291
3512
|
get children() {
|
|
3292
|
-
return createComponent(Portal, {
|
|
3513
|
+
return createComponent(Portal$1, {
|
|
3293
3514
|
get children() {
|
|
3294
3515
|
return createComponent(Root, {
|
|
3295
3516
|
get children() {
|
|
@@ -3301,37 +3522,50 @@ var TooltipContent = (props) => {
|
|
|
3301
3522
|
}
|
|
3302
3523
|
});
|
|
3303
3524
|
};
|
|
3304
|
-
var _tmpl$
|
|
3525
|
+
var _tmpl$53 = /* @__PURE__ */ template(`<button>`);
|
|
3305
3526
|
var TooltipTrigger = (props) => {
|
|
3306
3527
|
const {
|
|
3307
3528
|
setReference,
|
|
3308
3529
|
setOpen
|
|
3309
3530
|
} = useTooltip();
|
|
3310
3531
|
const style = useStyle();
|
|
3311
|
-
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick"]);
|
|
3532
|
+
const [local, rest] = splitProps(props, ["appearanceKey", "asChild", "onClick", "onMouseEnter", "onMouseLeave", "ref"]);
|
|
3533
|
+
const handleMouseEnter = (e) => {
|
|
3534
|
+
if (typeof local.onMouseEnter === "function") {
|
|
3535
|
+
local.onMouseEnter(e);
|
|
3536
|
+
}
|
|
3537
|
+
setOpen(true);
|
|
3538
|
+
};
|
|
3539
|
+
const ref = createMemo(() => local.ref ? mergeRefs(setReference, local.ref) : setReference);
|
|
3540
|
+
const handleMouseLeave = (e) => {
|
|
3541
|
+
if (typeof local.onMouseLeave === "function") {
|
|
3542
|
+
local.onMouseLeave(e);
|
|
3543
|
+
}
|
|
3544
|
+
setOpen(false);
|
|
3545
|
+
};
|
|
3312
3546
|
if (local.asChild) {
|
|
3313
3547
|
return createComponent(Dynamic, mergeProps({
|
|
3314
3548
|
get component() {
|
|
3315
3549
|
return local.asChild;
|
|
3316
3550
|
},
|
|
3317
|
-
ref
|
|
3318
|
-
|
|
3319
|
-
|
|
3551
|
+
ref(r$) {
|
|
3552
|
+
var _ref$ = ref();
|
|
3553
|
+
typeof _ref$ === "function" && _ref$(r$);
|
|
3320
3554
|
},
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
}
|
|
3555
|
+
onMouseEnter: handleMouseEnter,
|
|
3556
|
+
onMouseLeave: handleMouseLeave
|
|
3324
3557
|
}, rest));
|
|
3325
3558
|
}
|
|
3326
3559
|
return (() => {
|
|
3327
|
-
var _el$ = _tmpl$
|
|
3560
|
+
var _el$ = _tmpl$53();
|
|
3328
3561
|
_el$.addEventListener("mouseleave", () => {
|
|
3329
3562
|
setOpen(false);
|
|
3330
3563
|
});
|
|
3331
3564
|
_el$.addEventListener("mouseenter", () => {
|
|
3332
3565
|
setOpen(true);
|
|
3333
3566
|
});
|
|
3334
|
-
|
|
3567
|
+
var _ref$2 = ref();
|
|
3568
|
+
typeof _ref$2 === "function" && use(_ref$2, _el$);
|
|
3335
3569
|
spread(_el$, mergeProps({
|
|
3336
3570
|
get ["class"]() {
|
|
3337
3571
|
return style(local.appearanceKey || "tooltipTrigger");
|
|
@@ -3354,60 +3588,1093 @@ var Tooltip = {
|
|
|
3354
3588
|
*/
|
|
3355
3589
|
Content: TooltipContent
|
|
3356
3590
|
};
|
|
3591
|
+
var _tmpl$54 = /* @__PURE__ */ template(`<svg viewBox="0 0 20 20"fill=none xmlns=http://www.w3.org/2000/svg><path d="M10.7957 10.0009L7.08325 6.2884L8.14375 5.2279L12.9168 10.0009L8.14375 14.7739L7.08325 13.7134L10.7957 10.0009Z"fill=currentColor>`);
|
|
3592
|
+
var ArrowRight = (props) => {
|
|
3593
|
+
return (() => {
|
|
3594
|
+
var _el$ = _tmpl$54();
|
|
3595
|
+
spread(_el$, props, true, true);
|
|
3596
|
+
return _el$;
|
|
3597
|
+
})();
|
|
3598
|
+
};
|
|
3357
3599
|
|
|
3358
|
-
// src/ui/components/
|
|
3359
|
-
var _tmpl$
|
|
3360
|
-
var _tmpl$214 = /* @__PURE__ */ template(`<div>`);
|
|
3361
|
-
var
|
|
3362
|
-
|
|
3363
|
-
|
|
3600
|
+
// src/ui/components/primitives/DatePicker.tsx
|
|
3601
|
+
var _tmpl$55 = /* @__PURE__ */ template(`<div>`);
|
|
3602
|
+
var _tmpl$214 = /* @__PURE__ */ template(`<div><span>`);
|
|
3603
|
+
var DatePickerContext = createContext({
|
|
3604
|
+
currentDate: () => /* @__PURE__ */ new Date(),
|
|
3605
|
+
setCurrentDate: () => {
|
|
3606
|
+
},
|
|
3607
|
+
viewMonth: () => /* @__PURE__ */ new Date(),
|
|
3608
|
+
setViewMonth: () => {
|
|
3609
|
+
},
|
|
3610
|
+
selectedDate: () => null,
|
|
3611
|
+
setSelectedDate: () => {
|
|
3612
|
+
},
|
|
3613
|
+
maxDays: () => 0
|
|
3614
|
+
});
|
|
3615
|
+
var useDatePicker = () => useContext(DatePickerContext);
|
|
3616
|
+
var DatePicker = (props) => {
|
|
3617
|
+
const [local, rest] = splitProps(props, ["children", "value", "onDateChange", "class", "maxDays"]);
|
|
3364
3618
|
const style = useStyle();
|
|
3365
|
-
const
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
const
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
const date = createMemo(() => {
|
|
3375
|
-
minutesPassed();
|
|
3376
|
-
return formatToRelativeTime({
|
|
3377
|
-
fromDate: new Date(props.notification.createdAt),
|
|
3378
|
-
locale: locale()
|
|
3379
|
-
});
|
|
3380
|
-
});
|
|
3381
|
-
createEffect(() => {
|
|
3382
|
-
const interval = setInterval(() => {
|
|
3383
|
-
setMinutesPassed((prev) => prev + 1);
|
|
3384
|
-
}, 1e3 * 60);
|
|
3385
|
-
return () => clearInterval(interval);
|
|
3386
|
-
});
|
|
3387
|
-
const handleNotificationClick = (e) => __async(void 0, null, function* () {
|
|
3388
|
-
var _a, _b, _c;
|
|
3389
|
-
e.stopPropagation();
|
|
3390
|
-
e.preventDefault();
|
|
3391
|
-
if (!props.notification.isRead) {
|
|
3392
|
-
yield props.notification.read();
|
|
3619
|
+
const today = /* @__PURE__ */ new Date();
|
|
3620
|
+
today.setHours(0, 0, 0, 0);
|
|
3621
|
+
const [currentDate, setCurrentDate] = createSignal(today);
|
|
3622
|
+
const [viewMonth, setViewMonth] = createSignal(today);
|
|
3623
|
+
const [selectedDate, setSelectedDate] = createSignal(local.value ? new Date(local.value) : null);
|
|
3624
|
+
const handleDateSelect = (date) => {
|
|
3625
|
+
setSelectedDate(date);
|
|
3626
|
+
if (local.onDateChange) {
|
|
3627
|
+
local.onDateChange(date);
|
|
3393
3628
|
}
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
}
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3629
|
+
};
|
|
3630
|
+
return createComponent(DatePickerContext.Provider, {
|
|
3631
|
+
value: {
|
|
3632
|
+
currentDate,
|
|
3633
|
+
setCurrentDate,
|
|
3634
|
+
viewMonth,
|
|
3635
|
+
setViewMonth,
|
|
3636
|
+
selectedDate,
|
|
3637
|
+
setSelectedDate: handleDateSelect,
|
|
3638
|
+
maxDays: () => props.maxDays
|
|
3639
|
+
},
|
|
3640
|
+
get children() {
|
|
3641
|
+
var _el$ = _tmpl$55();
|
|
3642
|
+
spread(_el$, mergeProps({
|
|
3643
|
+
get ["class"]() {
|
|
3644
|
+
return style("datePicker", cn("nt-p-2", local.class));
|
|
3645
|
+
}
|
|
3646
|
+
}, rest), false, true);
|
|
3647
|
+
insert(_el$, () => local.children);
|
|
3648
|
+
return _el$;
|
|
3408
3649
|
}
|
|
3409
3650
|
});
|
|
3410
|
-
|
|
3651
|
+
};
|
|
3652
|
+
var DatePickerHeader = (props) => {
|
|
3653
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "children"]);
|
|
3654
|
+
const style = useStyle();
|
|
3655
|
+
const {
|
|
3656
|
+
viewMonth,
|
|
3657
|
+
setViewMonth,
|
|
3658
|
+
currentDate,
|
|
3659
|
+
maxDays
|
|
3660
|
+
} = useDatePicker();
|
|
3661
|
+
const handlePrevMonth = () => {
|
|
3662
|
+
const date = new Date(viewMonth());
|
|
3663
|
+
date.setMonth(date.getMonth() - 1);
|
|
3664
|
+
const currentMonth = currentDate();
|
|
3665
|
+
if (date.getFullYear() < currentMonth.getFullYear() || date.getFullYear() === currentMonth.getFullYear() && date.getMonth() < currentMonth.getMonth()) {
|
|
3666
|
+
return;
|
|
3667
|
+
}
|
|
3668
|
+
setViewMonth(date);
|
|
3669
|
+
};
|
|
3670
|
+
const handleNextMonth = () => {
|
|
3671
|
+
const date = new Date(viewMonth());
|
|
3672
|
+
date.setMonth(date.getMonth() + 1);
|
|
3673
|
+
const maxDaysValue = maxDays();
|
|
3674
|
+
if (maxDaysValue > 0) {
|
|
3675
|
+
const maxDate = new Date(currentDate());
|
|
3676
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
3677
|
+
if (date.getFullYear() > maxDate.getFullYear() || date.getFullYear() === maxDate.getFullYear() && date.getMonth() > maxDate.getMonth()) {
|
|
3678
|
+
return;
|
|
3679
|
+
}
|
|
3680
|
+
}
|
|
3681
|
+
setViewMonth(date);
|
|
3682
|
+
};
|
|
3683
|
+
const isPrevDisabled = () => {
|
|
3684
|
+
const current = currentDate();
|
|
3685
|
+
const view = viewMonth();
|
|
3686
|
+
return view.getFullYear() === current.getFullYear() && view.getMonth() === current.getMonth();
|
|
3687
|
+
};
|
|
3688
|
+
const isNextDisabled = () => {
|
|
3689
|
+
const maxDaysValue = maxDays();
|
|
3690
|
+
if (maxDaysValue === 0) return false;
|
|
3691
|
+
const view = viewMonth();
|
|
3692
|
+
const maxDate = new Date(currentDate());
|
|
3693
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
3694
|
+
return view.getFullYear() === maxDate.getFullYear() && view.getMonth() === maxDate.getMonth();
|
|
3695
|
+
};
|
|
3696
|
+
return (() => {
|
|
3697
|
+
var _el$2 = _tmpl$214(), _el$3 = _el$2.firstChild;
|
|
3698
|
+
spread(_el$2, mergeProps({
|
|
3699
|
+
get ["class"]() {
|
|
3700
|
+
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-neutral-50", local.class));
|
|
3701
|
+
}
|
|
3702
|
+
}, rest), false, true);
|
|
3703
|
+
insert(_el$2, createComponent(Button, {
|
|
3704
|
+
appearanceKey: "datePickerControlPrevTrigger",
|
|
3705
|
+
variant: "ghost",
|
|
3706
|
+
onClick: (e) => {
|
|
3707
|
+
e.stopPropagation();
|
|
3708
|
+
handlePrevMonth();
|
|
3709
|
+
},
|
|
3710
|
+
get disabled() {
|
|
3711
|
+
return isPrevDisabled();
|
|
3712
|
+
},
|
|
3713
|
+
"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-white nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
|
|
3714
|
+
get children() {
|
|
3715
|
+
return createComponent(ArrowLeft, {
|
|
3716
|
+
get ["class"]() {
|
|
3717
|
+
return style("datePickerControlPrevTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700");
|
|
3718
|
+
}
|
|
3719
|
+
});
|
|
3720
|
+
}
|
|
3721
|
+
}), _el$3);
|
|
3722
|
+
insert(_el$3, () => viewMonth().toLocaleDateString("en-US", {
|
|
3723
|
+
month: "long",
|
|
3724
|
+
year: "numeric"
|
|
3725
|
+
}));
|
|
3726
|
+
insert(_el$2, createComponent(Button, {
|
|
3727
|
+
appearanceKey: "datePickerControlNextTrigger",
|
|
3728
|
+
variant: "ghost",
|
|
3729
|
+
onClick: (e) => {
|
|
3730
|
+
e.stopPropagation();
|
|
3731
|
+
handleNextMonth();
|
|
3732
|
+
},
|
|
3733
|
+
get disabled() {
|
|
3734
|
+
return isNextDisabled();
|
|
3735
|
+
},
|
|
3736
|
+
"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-white nt-shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]",
|
|
3737
|
+
get children() {
|
|
3738
|
+
return createComponent(ArrowRight, {
|
|
3739
|
+
get ["class"]() {
|
|
3740
|
+
return style("datePickerControlNextTrigger__icon", "nt-size-4 nt-text-foreground-alpha-700");
|
|
3741
|
+
}
|
|
3742
|
+
});
|
|
3743
|
+
}
|
|
3744
|
+
}), null);
|
|
3745
|
+
effect(() => className(_el$3, style("datePickerHeaderMonth", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700")));
|
|
3746
|
+
return _el$2;
|
|
3747
|
+
})();
|
|
3748
|
+
};
|
|
3749
|
+
var DatePickerGridCellTrigger = (props) => {
|
|
3750
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey", "date"]);
|
|
3751
|
+
const {
|
|
3752
|
+
selectedDate,
|
|
3753
|
+
viewMonth,
|
|
3754
|
+
setSelectedDate,
|
|
3755
|
+
currentDate,
|
|
3756
|
+
maxDays
|
|
3757
|
+
} = useDatePicker();
|
|
3758
|
+
const {
|
|
3759
|
+
t
|
|
3760
|
+
} = useLocalization();
|
|
3761
|
+
const isCurrentMonth = props.date.getMonth() === viewMonth().getMonth();
|
|
3762
|
+
const isPastDate = () => {
|
|
3763
|
+
const today = currentDate();
|
|
3764
|
+
return props.date < today;
|
|
3765
|
+
};
|
|
3766
|
+
const isFutureDate = () => {
|
|
3767
|
+
const maxDaysValue = maxDays();
|
|
3768
|
+
if (maxDaysValue === 0) return false;
|
|
3769
|
+
const maxDate = new Date(currentDate());
|
|
3770
|
+
maxDate.setDate(maxDate.getDate() + maxDaysValue);
|
|
3771
|
+
return props.date > maxDate;
|
|
3772
|
+
};
|
|
3773
|
+
const isDisabled = !isCurrentMonth || isPastDate() || isFutureDate();
|
|
3774
|
+
const isExceedingLimit = () => {
|
|
3775
|
+
return isCurrentMonth && isFutureDate();
|
|
3776
|
+
};
|
|
3777
|
+
const buttonElement = createComponent(Button, mergeProps({
|
|
3778
|
+
appearanceKey: "datePickerCalendarDay__button",
|
|
3779
|
+
variant: "ghost",
|
|
3780
|
+
disabled: isDisabled,
|
|
3781
|
+
onClick: (e) => {
|
|
3782
|
+
e.stopPropagation();
|
|
3783
|
+
setSelectedDate(local.date);
|
|
3784
|
+
},
|
|
3785
|
+
get ["class"]() {
|
|
3786
|
+
var _a;
|
|
3787
|
+
return cn("nt-size-8 nt-w-full nt-rounded-md nt-flex nt-items-center nt-justify-center", {
|
|
3788
|
+
"nt-text-muted-foreground disabled:nt-opacity-20": !isCurrentMonth || isPastDate(),
|
|
3789
|
+
"nt-text-foreground-alpha-700": isCurrentMonth && !isPastDate() && !isFutureDate()
|
|
3790
|
+
}, {
|
|
3791
|
+
"nt-bg-primary-alpha-300 hover:nt-bg-primary-alpha-400": ((_a = selectedDate()) == null ? void 0 : _a.toDateString()) === local.date.toDateString()
|
|
3792
|
+
});
|
|
3793
|
+
}
|
|
3794
|
+
}, rest, {
|
|
3795
|
+
get children() {
|
|
3796
|
+
return local.date.getDate();
|
|
3797
|
+
}
|
|
3798
|
+
}));
|
|
3799
|
+
if (isExceedingLimit()) {
|
|
3800
|
+
return createComponent(Tooltip.Root, {
|
|
3801
|
+
get children() {
|
|
3802
|
+
return [createComponent(Tooltip.Trigger, {
|
|
3803
|
+
children: buttonElement
|
|
3804
|
+
}), createComponent(Tooltip.Content, {
|
|
3805
|
+
get children() {
|
|
3806
|
+
return t("snooze.datePicker.exceedingLimitTooltip", {
|
|
3807
|
+
days: maxDays()
|
|
3808
|
+
});
|
|
3809
|
+
}
|
|
3810
|
+
})];
|
|
3811
|
+
}
|
|
3812
|
+
});
|
|
3813
|
+
}
|
|
3814
|
+
return buttonElement;
|
|
3815
|
+
};
|
|
3816
|
+
var DatePickerCalendar = (props) => {
|
|
3817
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
3818
|
+
const style = useStyle();
|
|
3819
|
+
const {
|
|
3820
|
+
viewMonth
|
|
3821
|
+
} = useDatePicker();
|
|
3822
|
+
const getDaysInMonth = () => {
|
|
3823
|
+
const year = viewMonth().getFullYear();
|
|
3824
|
+
const month = viewMonth().getMonth();
|
|
3825
|
+
const firstDay = new Date(year, month, 1);
|
|
3826
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
3827
|
+
const startingDay = firstDay.getDay();
|
|
3828
|
+
const days = [];
|
|
3829
|
+
for (let i = 0; i < startingDay; i += 1) {
|
|
3830
|
+
const prevMonthDay = new Date(year, month, -i);
|
|
3831
|
+
days.unshift(prevMonthDay);
|
|
3832
|
+
}
|
|
3833
|
+
for (let i = 1; i <= daysInMonth; i += 1) {
|
|
3834
|
+
days.push(new Date(year, month, i));
|
|
3835
|
+
}
|
|
3836
|
+
const remainingCells = 7 - days.length % 7;
|
|
3837
|
+
if (remainingCells < 7) {
|
|
3838
|
+
for (let i = 1; i <= remainingCells; i += 1) {
|
|
3839
|
+
days.push(new Date(year, month + 1, i));
|
|
3840
|
+
}
|
|
3841
|
+
}
|
|
3842
|
+
return days;
|
|
3843
|
+
};
|
|
3844
|
+
return (() => {
|
|
3845
|
+
var _el$8 = _tmpl$55();
|
|
3846
|
+
_el$8.$$click = (e) => e.stopPropagation();
|
|
3847
|
+
spread(_el$8, mergeProps({
|
|
3848
|
+
get ["class"]() {
|
|
3849
|
+
return style(local.appearanceKey || "datePickerCalendar", cn("nt-grid nt-grid-cols-7 nt-gap-1", local.class));
|
|
3850
|
+
}
|
|
3851
|
+
}, rest), false, true);
|
|
3852
|
+
insert(_el$8, () => getDaysInMonth().map((date) => {
|
|
3853
|
+
return createComponent(DatePickerGridCellTrigger, {
|
|
3854
|
+
date
|
|
3855
|
+
});
|
|
3856
|
+
}));
|
|
3857
|
+
return _el$8;
|
|
3858
|
+
})();
|
|
3859
|
+
};
|
|
3860
|
+
delegateEvents(["click"]);
|
|
3861
|
+
var _tmpl$56 = /* @__PURE__ */ template(`<input>`);
|
|
3862
|
+
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`), {
|
|
3863
|
+
variants: {
|
|
3864
|
+
variant: {
|
|
3865
|
+
default: "nt-border nt-border-neutral-200 nt-rounded-md nt-p-1 nt-bg-background"
|
|
3866
|
+
},
|
|
3867
|
+
size: {
|
|
3868
|
+
default: "nt-h-9",
|
|
3869
|
+
sm: "nt-h-8 nt-text-sm"
|
|
3870
|
+
}
|
|
3871
|
+
},
|
|
3872
|
+
defaultVariants: {
|
|
3873
|
+
variant: "default",
|
|
3874
|
+
size: "default"
|
|
3875
|
+
}
|
|
3876
|
+
});
|
|
3877
|
+
var Input = (props) => {
|
|
3878
|
+
const [local, rest] = splitProps(props, ["class", "appearanceKey"]);
|
|
3879
|
+
const style = useStyle();
|
|
3880
|
+
return (() => {
|
|
3881
|
+
var _el$ = _tmpl$56();
|
|
3882
|
+
spread(_el$, mergeProps({
|
|
3883
|
+
get ["data-variant"]() {
|
|
3884
|
+
return props.variant;
|
|
3885
|
+
},
|
|
3886
|
+
get ["data-size"]() {
|
|
3887
|
+
return props.size;
|
|
3888
|
+
},
|
|
3889
|
+
get ["class"]() {
|
|
3890
|
+
return style(local.appearanceKey || "input", cn(inputVariants({
|
|
3891
|
+
variant: props.variant,
|
|
3892
|
+
size: props.size
|
|
3893
|
+
}), local.class));
|
|
3894
|
+
}
|
|
3895
|
+
}, rest), false, false);
|
|
3896
|
+
return _el$;
|
|
3897
|
+
})();
|
|
3898
|
+
};
|
|
3899
|
+
|
|
3900
|
+
// src/ui/components/primitives/TimePicker.tsx
|
|
3901
|
+
var _tmpl$57 = /* @__PURE__ */ template(`<div><span>:</span><select><option value=AM>AM</option><option value=PM>PM`);
|
|
3902
|
+
var TimePicker = (props) => {
|
|
3903
|
+
const [local, rest] = splitProps(props, ["value", "onChange", "class", "appearanceKey"]);
|
|
3904
|
+
const style = useStyle();
|
|
3905
|
+
const initialValue = local.value || {
|
|
3906
|
+
hour: 12,
|
|
3907
|
+
minute: 0,
|
|
3908
|
+
isPM: true
|
|
3909
|
+
};
|
|
3910
|
+
const [hour, setHour] = createSignal(initialValue.hour);
|
|
3911
|
+
const [minute, setMinute] = createSignal(initialValue.minute);
|
|
3912
|
+
const [isPM, setIsPM] = createSignal(initialValue.isPM);
|
|
3913
|
+
const notifyChange = () => {
|
|
3914
|
+
if (local.onChange) {
|
|
3915
|
+
local.onChange({
|
|
3916
|
+
hour: hour(),
|
|
3917
|
+
minute: minute(),
|
|
3918
|
+
isPM: isPM()
|
|
3919
|
+
});
|
|
3920
|
+
}
|
|
3921
|
+
};
|
|
3922
|
+
const handleHourChange = (newHour) => {
|
|
3923
|
+
setHour(newHour);
|
|
3924
|
+
notifyChange();
|
|
3925
|
+
};
|
|
3926
|
+
const handleMinuteChange = (newMinute) => {
|
|
3927
|
+
setMinute(newMinute);
|
|
3928
|
+
notifyChange();
|
|
3929
|
+
};
|
|
3930
|
+
const handlePeriodChange = (newIsPM) => {
|
|
3931
|
+
setIsPM(newIsPM);
|
|
3932
|
+
notifyChange();
|
|
3933
|
+
};
|
|
3934
|
+
const handleKeyDown = (e) => {
|
|
3935
|
+
const allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Backspace", "Delete", "Tab"];
|
|
3936
|
+
if (!allowedKeys.includes(e.key)) {
|
|
3937
|
+
e.preventDefault();
|
|
3938
|
+
}
|
|
3939
|
+
};
|
|
3940
|
+
return (() => {
|
|
3941
|
+
var _el$ = _tmpl$57(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
3942
|
+
_el$.$$click = (e) => e.stopPropagation();
|
|
3943
|
+
spread(_el$, mergeProps({
|
|
3944
|
+
get ["class"]() {
|
|
3945
|
+
return style(local.appearanceKey || "timePicker", cn("nt-flex nt-items-center nt-gap-1", local.class));
|
|
3946
|
+
}
|
|
3947
|
+
}, rest), false, true);
|
|
3948
|
+
insert(_el$, createComponent(Input, {
|
|
3949
|
+
size: "sm",
|
|
3950
|
+
type: "number",
|
|
3951
|
+
min: "1",
|
|
3952
|
+
max: "12",
|
|
3953
|
+
onKeyDown: (e) => {
|
|
3954
|
+
e.stopPropagation();
|
|
3955
|
+
handleKeyDown(e);
|
|
3956
|
+
},
|
|
3957
|
+
get value() {
|
|
3958
|
+
return hour().toString();
|
|
3959
|
+
},
|
|
3960
|
+
onInput: (e) => {
|
|
3961
|
+
e.stopPropagation();
|
|
3962
|
+
enforceMinMax(e.currentTarget);
|
|
3963
|
+
handleHourChange(Number(e.currentTarget.value));
|
|
3964
|
+
},
|
|
3965
|
+
get ["class"]() {
|
|
3966
|
+
return style("timePickerHour__input", "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2");
|
|
3967
|
+
}
|
|
3968
|
+
}), _el$2);
|
|
3969
|
+
insert(_el$, createComponent(Input, {
|
|
3970
|
+
size: "sm",
|
|
3971
|
+
type: "number",
|
|
3972
|
+
min: "0",
|
|
3973
|
+
max: "59",
|
|
3974
|
+
onKeyDown: (e) => {
|
|
3975
|
+
e.stopPropagation();
|
|
3976
|
+
handleKeyDown(e);
|
|
3977
|
+
},
|
|
3978
|
+
get value() {
|
|
3979
|
+
return minute().toString().padStart(2, "0");
|
|
3980
|
+
},
|
|
3981
|
+
onInput: (e) => {
|
|
3982
|
+
e.stopPropagation();
|
|
3983
|
+
enforceMinMax(e.currentTarget);
|
|
3984
|
+
handleMinuteChange(Number(e.currentTarget.value));
|
|
3985
|
+
},
|
|
3986
|
+
get ["class"]() {
|
|
3987
|
+
return style("timePickerHour__input", "nt-flex nt-font-mono nt-justify-center nt-items-center nt-text-center nt-h-7 nt-w-[calc(2ch+2rem)] nt-px-2");
|
|
3988
|
+
}
|
|
3989
|
+
}), _el$3);
|
|
3990
|
+
_el$3.addEventListener("change", (e) => {
|
|
3991
|
+
e.stopPropagation();
|
|
3992
|
+
handlePeriodChange(e.target.value === "PM");
|
|
3993
|
+
});
|
|
3994
|
+
_el$3.$$click = (e) => e.stopPropagation();
|
|
3995
|
+
effect((_p$) => {
|
|
3996
|
+
var _v$ = style("timePicker__separator", "nt-text-xl"), _v$2 = style("timePicker__periodSelect", `${inputVariants({
|
|
3997
|
+
size: "sm"
|
|
3998
|
+
})} nt-h-7 nt-font-mono`);
|
|
3999
|
+
_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
|
|
4000
|
+
_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
|
|
4001
|
+
return _p$;
|
|
4002
|
+
}, {
|
|
4003
|
+
e: void 0,
|
|
4004
|
+
t: void 0
|
|
4005
|
+
});
|
|
4006
|
+
effect(() => _el$3.value = isPM() ? "PM" : "AM");
|
|
4007
|
+
return _el$;
|
|
4008
|
+
})();
|
|
4009
|
+
};
|
|
4010
|
+
var enforceMinMax = (el) => {
|
|
4011
|
+
if (el.value !== "") {
|
|
4012
|
+
const value = parseInt(el.value, 10);
|
|
4013
|
+
const min = parseInt(el.min, 10);
|
|
4014
|
+
const max = parseInt(el.max, 10);
|
|
4015
|
+
if (value < min || value > max) {
|
|
4016
|
+
el.value = el.value.slice(0, -1);
|
|
4017
|
+
const newValue = parseInt(el.value, 10);
|
|
4018
|
+
if (Number.isNaN(newValue) || newValue < min) {
|
|
4019
|
+
el.value = el.min;
|
|
4020
|
+
} else if (newValue > max) {
|
|
4021
|
+
el.value = el.max;
|
|
4022
|
+
}
|
|
4023
|
+
}
|
|
4024
|
+
}
|
|
4025
|
+
};
|
|
4026
|
+
delegateEvents(["click"]);
|
|
4027
|
+
|
|
4028
|
+
// src/ui/components/Notification/SnoozeDateTimePicker.tsx
|
|
4029
|
+
var _tmpl$58 = /* @__PURE__ */ template(`<div><div><p></p></div><div>`);
|
|
4030
|
+
var fiveMinutesFromNow = () => {
|
|
4031
|
+
const futureTime = new Date(Date.now() + 5 * 60 * 1e3);
|
|
4032
|
+
const hours = futureTime.getHours();
|
|
4033
|
+
const isPM = hours >= 12;
|
|
4034
|
+
let hour;
|
|
4035
|
+
if (hours === 0) {
|
|
4036
|
+
hour = 12;
|
|
4037
|
+
} else if (hours === 12) {
|
|
4038
|
+
hour = 12;
|
|
4039
|
+
} else {
|
|
4040
|
+
hour = hours % 12;
|
|
4041
|
+
}
|
|
4042
|
+
return {
|
|
4043
|
+
hour,
|
|
4044
|
+
minute: futureTime.getMinutes(),
|
|
4045
|
+
isPM
|
|
4046
|
+
};
|
|
4047
|
+
};
|
|
4048
|
+
var convertTo24Hour = (time) => {
|
|
4049
|
+
if (time.isPM) {
|
|
4050
|
+
return time.hour === 12 ? 12 : time.hour + 12;
|
|
4051
|
+
} else {
|
|
4052
|
+
return time.hour === 12 ? 0 : time.hour;
|
|
4053
|
+
}
|
|
4054
|
+
};
|
|
4055
|
+
var REFRESH_INTERVAL = 5e3;
|
|
4056
|
+
var SnoozeDateTimePicker = (props) => {
|
|
4057
|
+
const style = useStyle();
|
|
4058
|
+
const {
|
|
4059
|
+
t
|
|
4060
|
+
} = useLocalization();
|
|
4061
|
+
const [selectedDate, setSelectedDate] = createSignal(null);
|
|
4062
|
+
const [timeValue, setTimeValue] = createSignal(fiveMinutesFromNow());
|
|
4063
|
+
const [currentTime, setCurrentTime] = createSignal(/* @__PURE__ */ new Date());
|
|
4064
|
+
createEffect(() => {
|
|
4065
|
+
const interval = setInterval(() => {
|
|
4066
|
+
setCurrentTime(/* @__PURE__ */ new Date());
|
|
4067
|
+
}, REFRESH_INTERVAL);
|
|
4068
|
+
onCleanup(() => clearInterval(interval));
|
|
4069
|
+
});
|
|
4070
|
+
const onDateTimeSelect = () => {
|
|
4071
|
+
var _a;
|
|
4072
|
+
if (selectedDate() && timeValue()) {
|
|
4073
|
+
const date = new Date(selectedDate());
|
|
4074
|
+
const hours = convertTo24Hour(timeValue());
|
|
4075
|
+
date.setHours(hours, timeValue().minute, 0, 0);
|
|
4076
|
+
(_a = props.onSelect) == null ? void 0 : _a.call(props, date);
|
|
4077
|
+
}
|
|
4078
|
+
};
|
|
4079
|
+
const maxDays = () => {
|
|
4080
|
+
if (!props.maxDurationHours) return 0;
|
|
4081
|
+
return Math.ceil(props.maxDurationHours / 24);
|
|
4082
|
+
};
|
|
4083
|
+
const getSelectedDateTime = () => {
|
|
4084
|
+
if (!selectedDate() || !timeValue()) return null;
|
|
4085
|
+
const date = new Date(selectedDate());
|
|
4086
|
+
const hours = convertTo24Hour(timeValue());
|
|
4087
|
+
date.setHours(hours, timeValue().minute, 0, 0);
|
|
4088
|
+
return date;
|
|
4089
|
+
};
|
|
4090
|
+
const isTimeInPast = createMemo(() => {
|
|
4091
|
+
const dateTime = getSelectedDateTime();
|
|
4092
|
+
if (!dateTime) return false;
|
|
4093
|
+
const minAllowedDateTime = new Date(currentTime().getTime() + 3 * 60 * 1e3);
|
|
4094
|
+
return dateTime < minAllowedDateTime;
|
|
4095
|
+
});
|
|
4096
|
+
const isTimeExceedingMaxDuration = createMemo(() => {
|
|
4097
|
+
const dateTime = getSelectedDateTime();
|
|
4098
|
+
if (!dateTime || !props.maxDurationHours) return false;
|
|
4099
|
+
const maxAllowedDateTime = new Date(currentTime().getTime() + props.maxDurationHours * 60 * 60 * 1e3);
|
|
4100
|
+
return dateTime > maxAllowedDateTime;
|
|
4101
|
+
});
|
|
4102
|
+
const applyButtonEnabled = createMemo(() => {
|
|
4103
|
+
if (!selectedDate() || !timeValue()) {
|
|
4104
|
+
return false;
|
|
4105
|
+
}
|
|
4106
|
+
if (isTimeInPast()) {
|
|
4107
|
+
return false;
|
|
4108
|
+
}
|
|
4109
|
+
if (props.maxDurationHours && isTimeExceedingMaxDuration()) {
|
|
4110
|
+
return false;
|
|
4111
|
+
}
|
|
4112
|
+
return true;
|
|
4113
|
+
});
|
|
4114
|
+
const getTooltipMessage = createMemo(() => {
|
|
4115
|
+
if (isTimeInPast()) {
|
|
4116
|
+
return t("snooze.datePicker.pastDateTooltip");
|
|
4117
|
+
}
|
|
4118
|
+
if (isTimeExceedingMaxDuration()) {
|
|
4119
|
+
return t("snooze.datePicker.exceedingLimitTooltip", {
|
|
4120
|
+
days: maxDays()
|
|
4121
|
+
});
|
|
4122
|
+
}
|
|
4123
|
+
return t("snooze.datePicker.noDateSelectedTooltip");
|
|
4124
|
+
});
|
|
4125
|
+
return (() => {
|
|
4126
|
+
var _el$ = _tmpl$58(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
|
|
4127
|
+
_el$.$$click = (e) => e.stopPropagation();
|
|
4128
|
+
insert(_el$, createComponent(DatePicker, {
|
|
4129
|
+
onDateChange: (date) => setSelectedDate(date),
|
|
4130
|
+
get maxDays() {
|
|
4131
|
+
return maxDays();
|
|
4132
|
+
},
|
|
4133
|
+
get children() {
|
|
4134
|
+
return [createComponent(DatePickerHeader, {}), createComponent(DatePickerCalendar, {})];
|
|
4135
|
+
}
|
|
4136
|
+
}), _el$2);
|
|
4137
|
+
insert(_el$3, () => t("snooze.datePicker.timePickerLabel"));
|
|
4138
|
+
insert(_el$2, createComponent(TimePicker, {
|
|
4139
|
+
get value() {
|
|
4140
|
+
return timeValue();
|
|
4141
|
+
},
|
|
4142
|
+
onChange: setTimeValue
|
|
4143
|
+
}), null);
|
|
4144
|
+
insert(_el$4, createComponent(Button, {
|
|
4145
|
+
appearanceKey: "snoozeDatePickerCancel__button",
|
|
4146
|
+
variant: "secondary",
|
|
4147
|
+
"class": "nt-h-7 nt-w-[60px] nt-px-2",
|
|
4148
|
+
get onClick() {
|
|
4149
|
+
return props.onCancel;
|
|
4150
|
+
},
|
|
4151
|
+
get children() {
|
|
4152
|
+
return t("snooze.datePicker.cancel");
|
|
4153
|
+
}
|
|
4154
|
+
}), null);
|
|
4155
|
+
insert(_el$4, createComponent(Show, {
|
|
4156
|
+
get when() {
|
|
4157
|
+
return applyButtonEnabled();
|
|
4158
|
+
},
|
|
4159
|
+
get fallback() {
|
|
4160
|
+
return createComponent(Tooltip.Root, {
|
|
4161
|
+
get children() {
|
|
4162
|
+
return [createComponent(Tooltip.Trigger, {
|
|
4163
|
+
asChild: (props2) => createComponent(Button, mergeProps({
|
|
4164
|
+
appearanceKey: "snoozeDatePickerApply__button",
|
|
4165
|
+
"class": "nt-h-7 nt-w-[60px] nt-px-2 !nt-pointer-events-auto",
|
|
4166
|
+
onClick: onDateTimeSelect,
|
|
4167
|
+
disabled: true
|
|
4168
|
+
}, props2, {
|
|
4169
|
+
get children() {
|
|
4170
|
+
return t("snooze.datePicker.apply");
|
|
4171
|
+
}
|
|
4172
|
+
}))
|
|
4173
|
+
}), createComponent(Tooltip.Content, {
|
|
4174
|
+
get children() {
|
|
4175
|
+
return getTooltipMessage();
|
|
4176
|
+
}
|
|
4177
|
+
})];
|
|
4178
|
+
}
|
|
4179
|
+
});
|
|
4180
|
+
},
|
|
4181
|
+
get children() {
|
|
4182
|
+
return createComponent(Button, {
|
|
4183
|
+
appearanceKey: "snoozeDatePickerApply__button",
|
|
4184
|
+
"class": "nt-h-7 nt-w-[60px] nt-px-2",
|
|
4185
|
+
onClick: onDateTimeSelect,
|
|
4186
|
+
get children() {
|
|
4187
|
+
return t("snooze.datePicker.apply");
|
|
4188
|
+
}
|
|
4189
|
+
});
|
|
4190
|
+
}
|
|
4191
|
+
}), null);
|
|
4192
|
+
effect((_p$) => {
|
|
4193
|
+
var _v$ = style("snoozeDatePicker", "nt-bg-white nt-rounded-md nt-shadow-lg nt-w-[260px]"), _v$2 = style("snoozeDatePicker__timePickerContainer", "nt-flex nt-flex-row nt-justify-between nt-p-2 nt-items-center nt-border-t nt-border-neutral-200 nt-border-b"), _v$3 = style("snoozeDatePicker__timePickerLabel", "nt-text-sm nt-font-medium nt-text-foreground-alpha-700 nt-p-2"), _v$4 = style("snoozeDatePicker__actions", "nt-flex nt-flex-row nt-justify-end nt-gap-2 nt-p-2");
|
|
4194
|
+
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
4195
|
+
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
|
|
4196
|
+
_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
|
|
4197
|
+
_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
|
|
4198
|
+
return _p$;
|
|
4199
|
+
}, {
|
|
4200
|
+
e: void 0,
|
|
4201
|
+
t: void 0,
|
|
4202
|
+
a: void 0,
|
|
4203
|
+
o: void 0
|
|
4204
|
+
});
|
|
4205
|
+
return _el$;
|
|
4206
|
+
})();
|
|
4207
|
+
};
|
|
4208
|
+
delegateEvents(["click"]);
|
|
4209
|
+
|
|
4210
|
+
// src/ui/components/Notification/NotificationActions.tsx
|
|
4211
|
+
var _tmpl$59 = /* @__PURE__ */ template(`<div><span>`);
|
|
4212
|
+
var _tmpl$215 = /* @__PURE__ */ template(`<span>`);
|
|
4213
|
+
var SNOOZE_PRESETS = [{
|
|
4214
|
+
key: "snooze.options.anHourFromNow",
|
|
4215
|
+
hours: 1,
|
|
4216
|
+
getDate: () => new Date(Date.now() + 1 * 60 * 60 * 1e3)
|
|
4217
|
+
}, {
|
|
4218
|
+
key: "snooze.options.inOneDay",
|
|
4219
|
+
hours: 24,
|
|
4220
|
+
getDate: () => {
|
|
4221
|
+
const date = new Date(Date.now() + 1 * 24 * 60 * 60 * 1e3);
|
|
4222
|
+
date.setHours(9, 0, 0, 0);
|
|
4223
|
+
return date;
|
|
4224
|
+
}
|
|
4225
|
+
}, {
|
|
4226
|
+
key: "snooze.options.inOneWeek",
|
|
4227
|
+
hours: 168,
|
|
4228
|
+
getDate: () => {
|
|
4229
|
+
const date = new Date(Date.now() + 7 * 24 * 60 * 60 * 1e3);
|
|
4230
|
+
date.setHours(9, 0, 0, 0);
|
|
4231
|
+
return date;
|
|
4232
|
+
}
|
|
4233
|
+
}];
|
|
4234
|
+
var formatSnoozeOption = (preset, t, locale) => {
|
|
4235
|
+
const date = preset.getDate();
|
|
4236
|
+
const dayName = new Intl.DateTimeFormat(locale, {
|
|
4237
|
+
weekday: "short"
|
|
4238
|
+
}).format(date);
|
|
4239
|
+
const dateMonth = new Intl.DateTimeFormat(locale, {
|
|
4240
|
+
day: "numeric",
|
|
4241
|
+
month: "short"
|
|
4242
|
+
}).format(date);
|
|
4243
|
+
const timeString = new Intl.DateTimeFormat(locale, {
|
|
4244
|
+
hour: "numeric",
|
|
4245
|
+
minute: "numeric"
|
|
4246
|
+
}).format(date);
|
|
4247
|
+
return {
|
|
4248
|
+
label: t(preset.key),
|
|
4249
|
+
time: `${dayName}, ${dateMonth}, ${timeString}`
|
|
4250
|
+
};
|
|
4251
|
+
};
|
|
4252
|
+
var SnoozeDropdownItem = (props) => {
|
|
4253
|
+
const style = useStyle();
|
|
4254
|
+
const content = [(() => {
|
|
4255
|
+
var _el$ = _tmpl$59(), _el$2 = _el$.firstChild;
|
|
4256
|
+
insert(_el$, createComponent(Clock, {
|
|
4257
|
+
get ["class"]() {
|
|
4258
|
+
return style("notificationSnooze__dropdownItem__icon", "nt-size-3 nt-text-foreground-alpha-400 nt-mr-2");
|
|
4259
|
+
}
|
|
4260
|
+
}), _el$2);
|
|
4261
|
+
insert(_el$2, () => props.label);
|
|
4262
|
+
effect((_p$) => {
|
|
4263
|
+
var _v$ = style("dropdownItem", "nt-flex nt-items-center nt-flex-1"), _v$2 = style("dropdownItemLabel");
|
|
4264
|
+
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
4265
|
+
_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
|
|
4266
|
+
return _p$;
|
|
4267
|
+
}, {
|
|
4268
|
+
e: void 0,
|
|
4269
|
+
t: void 0
|
|
4270
|
+
});
|
|
4271
|
+
return _el$;
|
|
4272
|
+
})(), (() => {
|
|
4273
|
+
var _el$3 = _tmpl$215();
|
|
4274
|
+
insert(_el$3, () => props.time);
|
|
4275
|
+
effect(() => className(_el$3, style("dropdownItemRight__icon", "nt-text-foreground-alpha-300 nt-ml-2 nt-text-xs")));
|
|
4276
|
+
return _el$3;
|
|
4277
|
+
})()];
|
|
4278
|
+
if (props.asChild) {
|
|
4279
|
+
return props.asChild({
|
|
4280
|
+
class: style("notificationSnooze__dropdownItem", dropdownItemVariants()),
|
|
4281
|
+
onClick: props.onClick,
|
|
4282
|
+
children: content
|
|
4283
|
+
});
|
|
4284
|
+
}
|
|
4285
|
+
return createComponent(Dropdown.Item, {
|
|
4286
|
+
appearanceKey: "notificationSnooze__dropdownItem",
|
|
4287
|
+
get onClick() {
|
|
4288
|
+
return props.onClick;
|
|
4289
|
+
},
|
|
4290
|
+
get ["class"]() {
|
|
4291
|
+
return style("dropdownItem", "nt-justify-between");
|
|
4292
|
+
},
|
|
4293
|
+
children: content
|
|
4294
|
+
});
|
|
4295
|
+
};
|
|
4296
|
+
var ReadButton = (props) => {
|
|
4297
|
+
const style = useStyle();
|
|
4298
|
+
const {
|
|
4299
|
+
t
|
|
4300
|
+
} = useLocalization();
|
|
4301
|
+
return createComponent(Tooltip.Root, {
|
|
4302
|
+
get children() {
|
|
4303
|
+
return [createComponent(Tooltip.Trigger, {
|
|
4304
|
+
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
4305
|
+
appearanceKey: "notificationRead__button",
|
|
4306
|
+
size: "iconSm",
|
|
4307
|
+
variant: "ghost"
|
|
4308
|
+
}, childProps, {
|
|
4309
|
+
onClick: (e) => __async(this, null, function* () {
|
|
4310
|
+
e.stopPropagation();
|
|
4311
|
+
yield props.notification.read();
|
|
4312
|
+
}),
|
|
4313
|
+
get children() {
|
|
4314
|
+
return createComponent(MarkAsRead, {
|
|
4315
|
+
get ["class"]() {
|
|
4316
|
+
return style("notificationRead__icon", "nt-size-3");
|
|
4317
|
+
}
|
|
4318
|
+
});
|
|
4319
|
+
}
|
|
4320
|
+
}))
|
|
4321
|
+
}), createComponent(Tooltip.Content, {
|
|
4322
|
+
"data-localization": "notification.actions.read.tooltip",
|
|
4323
|
+
get children() {
|
|
4324
|
+
return t("notification.actions.read.tooltip");
|
|
4325
|
+
}
|
|
4326
|
+
})];
|
|
4327
|
+
}
|
|
4328
|
+
});
|
|
4329
|
+
};
|
|
4330
|
+
var UnreadButton = (props) => {
|
|
4331
|
+
const style = useStyle();
|
|
4332
|
+
const {
|
|
4333
|
+
t
|
|
4334
|
+
} = useLocalization();
|
|
4335
|
+
return createComponent(Tooltip.Root, {
|
|
4336
|
+
get children() {
|
|
4337
|
+
return [createComponent(Tooltip.Trigger, {
|
|
4338
|
+
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
4339
|
+
appearanceKey: "notificationUnread__button",
|
|
4340
|
+
size: "iconSm",
|
|
4341
|
+
variant: "ghost"
|
|
4342
|
+
}, childProps, {
|
|
4343
|
+
onClick: (e) => __async(this, null, function* () {
|
|
4344
|
+
e.stopPropagation();
|
|
4345
|
+
yield props.notification.unread();
|
|
4346
|
+
}),
|
|
4347
|
+
get children() {
|
|
4348
|
+
return createComponent(MarkAsUnread, {
|
|
4349
|
+
get ["class"]() {
|
|
4350
|
+
return style("notificationUnread__icon", "nt-size-3");
|
|
4351
|
+
}
|
|
4352
|
+
});
|
|
4353
|
+
}
|
|
4354
|
+
}))
|
|
4355
|
+
}), createComponent(Tooltip.Content, {
|
|
4356
|
+
"data-localization": "notification.actions.unread.tooltip",
|
|
4357
|
+
get children() {
|
|
4358
|
+
return t("notification.actions.unread.tooltip");
|
|
4359
|
+
}
|
|
4360
|
+
})];
|
|
4361
|
+
}
|
|
4362
|
+
});
|
|
4363
|
+
};
|
|
4364
|
+
var ArchiveButton = (props) => {
|
|
4365
|
+
const style = useStyle();
|
|
4366
|
+
const {
|
|
4367
|
+
t
|
|
4368
|
+
} = useLocalization();
|
|
4369
|
+
return createComponent(Tooltip.Root, {
|
|
4370
|
+
get children() {
|
|
4371
|
+
return [createComponent(Tooltip.Trigger, {
|
|
4372
|
+
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
4373
|
+
appearanceKey: "notificationArchive__button",
|
|
4374
|
+
size: "iconSm",
|
|
4375
|
+
variant: "ghost"
|
|
4376
|
+
}, childProps, {
|
|
4377
|
+
onClick: (e) => __async(this, null, function* () {
|
|
4378
|
+
e.stopPropagation();
|
|
4379
|
+
yield props.notification.archive();
|
|
4380
|
+
}),
|
|
4381
|
+
get children() {
|
|
4382
|
+
return createComponent(MarkAsArchived, {
|
|
4383
|
+
get ["class"]() {
|
|
4384
|
+
return style("notificationArchive__icon", "nt-size-3");
|
|
4385
|
+
}
|
|
4386
|
+
});
|
|
4387
|
+
}
|
|
4388
|
+
}))
|
|
4389
|
+
}), createComponent(Tooltip.Content, {
|
|
4390
|
+
"data-localization": "notification.actions.archive.tooltip",
|
|
4391
|
+
get children() {
|
|
4392
|
+
return t("notification.actions.archive.tooltip");
|
|
4393
|
+
}
|
|
4394
|
+
})];
|
|
4395
|
+
}
|
|
4396
|
+
});
|
|
4397
|
+
};
|
|
4398
|
+
var UnarchiveButton = (props) => {
|
|
4399
|
+
const style = useStyle();
|
|
4400
|
+
const {
|
|
4401
|
+
t
|
|
4402
|
+
} = useLocalization();
|
|
4403
|
+
return createComponent(Tooltip.Root, {
|
|
4404
|
+
get children() {
|
|
4405
|
+
return [createComponent(Tooltip.Trigger, {
|
|
4406
|
+
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
4407
|
+
appearanceKey: "notificationUnarchive__button",
|
|
4408
|
+
size: "iconSm",
|
|
4409
|
+
variant: "ghost"
|
|
4410
|
+
}, childProps, {
|
|
4411
|
+
onClick: (e) => __async(this, null, function* () {
|
|
4412
|
+
e.stopPropagation();
|
|
4413
|
+
yield props.notification.unarchive();
|
|
4414
|
+
}),
|
|
4415
|
+
get children() {
|
|
4416
|
+
return createComponent(MarkAsUnarchived, {
|
|
4417
|
+
get ["class"]() {
|
|
4418
|
+
return style("notificationArchive__icon", "nt-size-3");
|
|
4419
|
+
}
|
|
4420
|
+
});
|
|
4421
|
+
}
|
|
4422
|
+
}))
|
|
4423
|
+
}), createComponent(Tooltip.Content, {
|
|
4424
|
+
"data-localization": "notification.actions.unarchive.tooltip",
|
|
4425
|
+
get children() {
|
|
4426
|
+
return t("notification.actions.unarchive.tooltip");
|
|
4427
|
+
}
|
|
4428
|
+
})];
|
|
4429
|
+
}
|
|
4430
|
+
});
|
|
4431
|
+
};
|
|
4432
|
+
var UnsnoozeButton = (props) => {
|
|
4433
|
+
const style = useStyle();
|
|
4434
|
+
const {
|
|
4435
|
+
t
|
|
4436
|
+
} = useLocalization();
|
|
4437
|
+
return createComponent(Tooltip.Root, {
|
|
4438
|
+
get children() {
|
|
4439
|
+
return [createComponent(Tooltip.Trigger, {
|
|
4440
|
+
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
4441
|
+
appearanceKey: "notificationUnsnooze__button",
|
|
4442
|
+
size: "iconSm",
|
|
4443
|
+
variant: "ghost"
|
|
4444
|
+
}, childProps, {
|
|
4445
|
+
onClick: (e) => __async(this, null, function* () {
|
|
4446
|
+
e.stopPropagation();
|
|
4447
|
+
yield props.notification.unsnooze();
|
|
4448
|
+
}),
|
|
4449
|
+
get children() {
|
|
4450
|
+
return createComponent(Unsnooze, {
|
|
4451
|
+
get ["class"]() {
|
|
4452
|
+
return style("notificationUnsnooze__icon", "nt-size-3");
|
|
4453
|
+
}
|
|
4454
|
+
});
|
|
4455
|
+
}
|
|
4456
|
+
}))
|
|
4457
|
+
}), createComponent(Tooltip.Content, {
|
|
4458
|
+
"data-localization": "notification.actions.unsnooze.tooltip",
|
|
4459
|
+
get children() {
|
|
4460
|
+
return t("notification.actions.unsnooze.tooltip");
|
|
4461
|
+
}
|
|
4462
|
+
})];
|
|
4463
|
+
}
|
|
4464
|
+
});
|
|
4465
|
+
};
|
|
4466
|
+
var SnoozeButton = (props) => {
|
|
4467
|
+
const style = useStyle();
|
|
4468
|
+
const {
|
|
4469
|
+
t,
|
|
4470
|
+
locale
|
|
4471
|
+
} = useLocalization();
|
|
4472
|
+
const {
|
|
4473
|
+
maxSnoozeDurationHours
|
|
4474
|
+
} = useInboxContext();
|
|
4475
|
+
const [isSnoozeDateTimePickerOpen, setIsSnoozeDateTimePickerOpen] = createSignal(false);
|
|
4476
|
+
const availableSnoozePresets = createMemo(() => {
|
|
4477
|
+
if (!maxSnoozeDurationHours()) return SNOOZE_PRESETS;
|
|
4478
|
+
return SNOOZE_PRESETS.filter((preset) => preset.hours <= maxSnoozeDurationHours());
|
|
4479
|
+
});
|
|
4480
|
+
return createComponent(Tooltip.Root, {
|
|
4481
|
+
get children() {
|
|
4482
|
+
return [createComponent(Tooltip.Trigger, {
|
|
4483
|
+
asChild: (tooltipProps) => createComponent(Dropdown.Root, {
|
|
4484
|
+
get children() {
|
|
4485
|
+
return [createComponent(Dropdown.Trigger, mergeProps(tooltipProps, {
|
|
4486
|
+
asChild: (popoverProps) => createComponent(Button, mergeProps({
|
|
4487
|
+
appearanceKey: "notificationSnooze__button",
|
|
4488
|
+
size: "iconSm",
|
|
4489
|
+
variant: "ghost"
|
|
4490
|
+
}, popoverProps, {
|
|
4491
|
+
onClick: (e) => {
|
|
4492
|
+
var _a;
|
|
4493
|
+
e.stopPropagation();
|
|
4494
|
+
(_a = popoverProps.onClick) == null ? void 0 : _a.call(popoverProps, e);
|
|
4495
|
+
},
|
|
4496
|
+
get children() {
|
|
4497
|
+
return createComponent(Snooze, {
|
|
4498
|
+
get ["class"]() {
|
|
4499
|
+
return style("notificationSnooze__icon", "nt-size-3");
|
|
4500
|
+
}
|
|
4501
|
+
});
|
|
4502
|
+
}
|
|
4503
|
+
}))
|
|
4504
|
+
})), createComponent(Dropdown.Content, {
|
|
4505
|
+
portal: true,
|
|
4506
|
+
appearanceKey: "notificationSnooze__dropdownContent",
|
|
4507
|
+
get children() {
|
|
4508
|
+
return [createComponent(For, {
|
|
4509
|
+
get each() {
|
|
4510
|
+
return availableSnoozePresets();
|
|
4511
|
+
},
|
|
4512
|
+
children: (preset) => {
|
|
4513
|
+
const option = formatSnoozeOption(preset, t, locale());
|
|
4514
|
+
return createComponent(SnoozeDropdownItem, {
|
|
4515
|
+
get label() {
|
|
4516
|
+
return option.label;
|
|
4517
|
+
},
|
|
4518
|
+
get time() {
|
|
4519
|
+
return option.time;
|
|
4520
|
+
},
|
|
4521
|
+
onClick: (e) => __async(this, null, function* () {
|
|
4522
|
+
e.stopPropagation();
|
|
4523
|
+
yield props.notification.snooze(preset.getDate().toISOString());
|
|
4524
|
+
})
|
|
4525
|
+
});
|
|
4526
|
+
}
|
|
4527
|
+
}), createComponent(Popover.Root, {
|
|
4528
|
+
get open() {
|
|
4529
|
+
return isSnoozeDateTimePickerOpen();
|
|
4530
|
+
},
|
|
4531
|
+
onOpenChange: setIsSnoozeDateTimePickerOpen,
|
|
4532
|
+
placement: "bottom-start",
|
|
4533
|
+
get children() {
|
|
4534
|
+
return [createComponent(SnoozeDropdownItem, {
|
|
4535
|
+
get label() {
|
|
4536
|
+
return t("snooze.options.customTime");
|
|
4537
|
+
},
|
|
4538
|
+
time: "",
|
|
4539
|
+
asChild: (childProps) => createComponent(Popover.Trigger, mergeProps(childProps, {
|
|
4540
|
+
onClick: (e) => {
|
|
4541
|
+
var _a;
|
|
4542
|
+
e.stopPropagation();
|
|
4543
|
+
(_a = childProps.onClick) == null ? void 0 : _a.call(childProps, e);
|
|
4544
|
+
}
|
|
4545
|
+
}))
|
|
4546
|
+
}), createComponent(Popover.Content, {
|
|
4547
|
+
portal: true,
|
|
4548
|
+
get ["class"]() {
|
|
4549
|
+
return style("notificationSnoozeCustomTime_popoverContent", "nt-size-fit nt-w-[260px]");
|
|
4550
|
+
},
|
|
4551
|
+
get children() {
|
|
4552
|
+
return createComponent(SnoozeDateTimePicker, {
|
|
4553
|
+
get maxDurationHours() {
|
|
4554
|
+
return maxSnoozeDurationHours();
|
|
4555
|
+
},
|
|
4556
|
+
onSelect: (date) => __async(this, null, function* () {
|
|
4557
|
+
yield props.notification.snooze(date.toISOString());
|
|
4558
|
+
}),
|
|
4559
|
+
onCancel: () => {
|
|
4560
|
+
setIsSnoozeDateTimePickerOpen(false);
|
|
4561
|
+
}
|
|
4562
|
+
});
|
|
4563
|
+
}
|
|
4564
|
+
})];
|
|
4565
|
+
}
|
|
4566
|
+
})];
|
|
4567
|
+
}
|
|
4568
|
+
})];
|
|
4569
|
+
}
|
|
4570
|
+
})
|
|
4571
|
+
}), createComponent(Tooltip.Content, {
|
|
4572
|
+
"data-localization": "notification.actions.snooze.tooltip",
|
|
4573
|
+
get children() {
|
|
4574
|
+
return t("notification.actions.snooze.tooltip");
|
|
4575
|
+
}
|
|
4576
|
+
})];
|
|
4577
|
+
}
|
|
4578
|
+
});
|
|
4579
|
+
};
|
|
4580
|
+
var renderNotificationActions = (notification, status) => {
|
|
4581
|
+
const {
|
|
4582
|
+
isSnoozeEnabled
|
|
4583
|
+
} = useInboxContext();
|
|
4584
|
+
if (notification.isSnoozed) {
|
|
4585
|
+
return createComponent(UnsnoozeButton, {
|
|
4586
|
+
notification
|
|
4587
|
+
});
|
|
4588
|
+
}
|
|
4589
|
+
if (notification.isArchived) {
|
|
4590
|
+
return createComponent(UnarchiveButton, {
|
|
4591
|
+
notification
|
|
4592
|
+
});
|
|
4593
|
+
}
|
|
4594
|
+
return [memo(() => memo(() => status() !== "archived" /* ARCHIVED */)() && (notification.isRead ? createComponent(UnreadButton, {
|
|
4595
|
+
notification
|
|
4596
|
+
}) : createComponent(ReadButton, {
|
|
4597
|
+
notification
|
|
4598
|
+
}))), memo(() => memo(() => !!isSnoozeEnabled())() && createComponent(SnoozeButton, {
|
|
4599
|
+
notification
|
|
4600
|
+
})), createComponent(ArchiveButton, {
|
|
4601
|
+
notification
|
|
4602
|
+
})];
|
|
4603
|
+
};
|
|
4604
|
+
|
|
4605
|
+
// src/ui/components/Notification/DefaultNotification.tsx
|
|
4606
|
+
var _tmpl$60 = /* @__PURE__ */ template(`<img>`);
|
|
4607
|
+
var _tmpl$216 = /* @__PURE__ */ template(`<div>`);
|
|
4608
|
+
var _tmpl$311 = /* @__PURE__ */ template(`<span>`);
|
|
4609
|
+
var _tmpl$410 = /* @__PURE__ */ template(`<a><div><div></div><div></div><div>`);
|
|
4610
|
+
var DefaultNotification = (props) => {
|
|
4611
|
+
const style = useStyle();
|
|
4612
|
+
const {
|
|
4613
|
+
t,
|
|
4614
|
+
locale
|
|
4615
|
+
} = useLocalization();
|
|
4616
|
+
const {
|
|
4617
|
+
navigate,
|
|
4618
|
+
status
|
|
4619
|
+
} = useInboxContext();
|
|
4620
|
+
const [minutesPassed, setMinutesPassed] = createSignal(0);
|
|
4621
|
+
const createdAt = createMemo(() => {
|
|
4622
|
+
minutesPassed();
|
|
4623
|
+
return formatToRelativeTime({
|
|
4624
|
+
fromDate: new Date(props.notification.createdAt),
|
|
4625
|
+
locale: locale()
|
|
4626
|
+
});
|
|
4627
|
+
});
|
|
4628
|
+
const snoozedUntil = createMemo(() => {
|
|
4629
|
+
minutesPassed();
|
|
4630
|
+
if (!props.notification.snoozedUntil) {
|
|
4631
|
+
return null;
|
|
4632
|
+
}
|
|
4633
|
+
return formatSnoozedUntil({
|
|
4634
|
+
untilDate: new Date(props.notification.snoozedUntil),
|
|
4635
|
+
locale: locale()
|
|
4636
|
+
});
|
|
4637
|
+
});
|
|
4638
|
+
const deliveredAt = createMemo(() => {
|
|
4639
|
+
minutesPassed();
|
|
4640
|
+
if (!props.notification.deliveredAt || !Array.isArray(props.notification.deliveredAt)) {
|
|
4641
|
+
return null;
|
|
4642
|
+
}
|
|
4643
|
+
return props.notification.deliveredAt.map((date) => formatToRelativeTime({
|
|
4644
|
+
fromDate: new Date(date),
|
|
4645
|
+
locale: locale()
|
|
4646
|
+
}));
|
|
4647
|
+
});
|
|
4648
|
+
createEffect(() => {
|
|
4649
|
+
const interval = setInterval(() => {
|
|
4650
|
+
setMinutesPassed((prev) => prev + 1);
|
|
4651
|
+
}, 1e3 * 60);
|
|
4652
|
+
return () => clearInterval(interval);
|
|
4653
|
+
});
|
|
4654
|
+
const handleNotificationClick = (e) => __async(void 0, null, function* () {
|
|
4655
|
+
var _a, _b, _c;
|
|
4656
|
+
e.stopPropagation();
|
|
4657
|
+
e.preventDefault();
|
|
4658
|
+
if (!props.notification.isRead) {
|
|
4659
|
+
yield props.notification.read();
|
|
4660
|
+
}
|
|
4661
|
+
(_a = props.onNotificationClick) == null ? void 0 : _a.call(props, props.notification);
|
|
4662
|
+
navigate((_b = props.notification.redirect) == null ? void 0 : _b.url, (_c = props.notification.redirect) == null ? void 0 : _c.target);
|
|
4663
|
+
});
|
|
4664
|
+
const handleActionButtonClick = (action, e) => __async(void 0, null, function* () {
|
|
4665
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
4666
|
+
e.stopPropagation();
|
|
4667
|
+
if (action === "primary" /* PRIMARY */) {
|
|
4668
|
+
yield props.notification.completePrimary();
|
|
4669
|
+
(_a = props.onPrimaryActionClick) == null ? void 0 : _a.call(props, props.notification);
|
|
4670
|
+
navigate((_c = (_b = props.notification.primaryAction) == null ? void 0 : _b.redirect) == null ? void 0 : _c.url, (_e = (_d = props.notification.primaryAction) == null ? void 0 : _d.redirect) == null ? void 0 : _e.target);
|
|
4671
|
+
} else {
|
|
4672
|
+
yield props.notification.completeSecondary();
|
|
4673
|
+
(_f = props.onSecondaryActionClick) == null ? void 0 : _f.call(props, props.notification);
|
|
4674
|
+
navigate((_h = (_g = props.notification.secondaryAction) == null ? void 0 : _g.redirect) == null ? void 0 : _h.url, (_j = (_i = props.notification.secondaryAction) == null ? void 0 : _i.redirect) == null ? void 0 : _j.target);
|
|
4675
|
+
}
|
|
4676
|
+
});
|
|
4677
|
+
return (() => {
|
|
3411
4678
|
var _el$ = _tmpl$410(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling;
|
|
3412
4679
|
_el$.$$click = handleNotificationClick;
|
|
3413
4680
|
insert(_el$, createComponent(Show, {
|
|
@@ -3416,13 +4683,13 @@ var DefaultNotification = (props) => {
|
|
|
3416
4683
|
},
|
|
3417
4684
|
get fallback() {
|
|
3418
4685
|
return (() => {
|
|
3419
|
-
var _el$9 = _tmpl$
|
|
4686
|
+
var _el$9 = _tmpl$216();
|
|
3420
4687
|
effect(() => className(_el$9, style("notificationImageLoadingFallback", "nt-size-8 nt-rounded-lg nt-shrink-0 nt-aspect-square")));
|
|
3421
4688
|
return _el$9;
|
|
3422
4689
|
})();
|
|
3423
4690
|
},
|
|
3424
4691
|
get children() {
|
|
3425
|
-
var _el$2 = _tmpl$
|
|
4692
|
+
var _el$2 = _tmpl$60();
|
|
3426
4693
|
effect((_p$) => {
|
|
3427
4694
|
var _v$ = style("notificationImage", "nt-size-8 nt-rounded-lg nt-object-cover nt-aspect-square"), _v$2 = props.notification.avatar;
|
|
3428
4695
|
_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
|
|
@@ -3476,149 +4743,13 @@ var DefaultNotification = (props) => {
|
|
|
3476
4743
|
render: (el) => renderBody()(el, props.notification)
|
|
3477
4744
|
})
|
|
3478
4745
|
}), null);
|
|
3479
|
-
insert(_el$5,
|
|
3480
|
-
get when() {
|
|
3481
|
-
return status() !== "archived" /* ARCHIVED */;
|
|
3482
|
-
},
|
|
3483
|
-
get children() {
|
|
3484
|
-
return createComponent(Show, {
|
|
3485
|
-
get when() {
|
|
3486
|
-
return props.notification.isRead;
|
|
3487
|
-
},
|
|
3488
|
-
get fallback() {
|
|
3489
|
-
return createComponent(Tooltip.Root, {
|
|
3490
|
-
get children() {
|
|
3491
|
-
return [createComponent(Tooltip.Trigger, {
|
|
3492
|
-
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
3493
|
-
appearanceKey: "notificationRead__button",
|
|
3494
|
-
size: "iconSm",
|
|
3495
|
-
variant: "ghost"
|
|
3496
|
-
}, childProps, {
|
|
3497
|
-
onClick: (e) => __async(this, null, function* () {
|
|
3498
|
-
e.stopPropagation();
|
|
3499
|
-
yield props.notification.read();
|
|
3500
|
-
}),
|
|
3501
|
-
get children() {
|
|
3502
|
-
return createComponent(MarkAsRead, {
|
|
3503
|
-
get ["class"]() {
|
|
3504
|
-
return style("notificationRead__icon", "nt-size-3");
|
|
3505
|
-
}
|
|
3506
|
-
});
|
|
3507
|
-
}
|
|
3508
|
-
}))
|
|
3509
|
-
}), createComponent(Tooltip.Content, {
|
|
3510
|
-
"data-localization": "notification.actions.read.tooltip",
|
|
3511
|
-
get children() {
|
|
3512
|
-
return t("notification.actions.read.tooltip");
|
|
3513
|
-
}
|
|
3514
|
-
})];
|
|
3515
|
-
}
|
|
3516
|
-
});
|
|
3517
|
-
},
|
|
3518
|
-
get children() {
|
|
3519
|
-
return createComponent(Tooltip.Root, {
|
|
3520
|
-
get children() {
|
|
3521
|
-
return [createComponent(Tooltip.Trigger, {
|
|
3522
|
-
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
3523
|
-
appearanceKey: "notificationUnread__button",
|
|
3524
|
-
size: "iconSm",
|
|
3525
|
-
variant: "ghost"
|
|
3526
|
-
}, childProps, {
|
|
3527
|
-
onClick: (e) => __async(this, null, function* () {
|
|
3528
|
-
e.stopPropagation();
|
|
3529
|
-
yield props.notification.unread();
|
|
3530
|
-
}),
|
|
3531
|
-
get children() {
|
|
3532
|
-
return createComponent(MarkAsUnread, {
|
|
3533
|
-
get ["class"]() {
|
|
3534
|
-
return style("notificationUnread__icon", "nt-size-3");
|
|
3535
|
-
}
|
|
3536
|
-
});
|
|
3537
|
-
}
|
|
3538
|
-
}))
|
|
3539
|
-
}), createComponent(Tooltip.Content, {
|
|
3540
|
-
"data-localization": "notification.actions.unread.tooltip",
|
|
3541
|
-
get children() {
|
|
3542
|
-
return t("notification.actions.unread.tooltip");
|
|
3543
|
-
}
|
|
3544
|
-
})];
|
|
3545
|
-
}
|
|
3546
|
-
});
|
|
3547
|
-
}
|
|
3548
|
-
});
|
|
3549
|
-
}
|
|
3550
|
-
}), null);
|
|
3551
|
-
insert(_el$5, createComponent(Show, {
|
|
3552
|
-
get when() {
|
|
3553
|
-
return props.notification.isArchived;
|
|
3554
|
-
},
|
|
3555
|
-
get fallback() {
|
|
3556
|
-
return createComponent(Tooltip.Root, {
|
|
3557
|
-
get children() {
|
|
3558
|
-
return [createComponent(Tooltip.Trigger, {
|
|
3559
|
-
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
3560
|
-
appearanceKey: "notificationArchive__button",
|
|
3561
|
-
size: "iconSm",
|
|
3562
|
-
variant: "ghost"
|
|
3563
|
-
}, childProps, {
|
|
3564
|
-
onClick: (e) => __async(this, null, function* () {
|
|
3565
|
-
e.stopPropagation();
|
|
3566
|
-
yield props.notification.archive();
|
|
3567
|
-
}),
|
|
3568
|
-
get children() {
|
|
3569
|
-
return createComponent(MarkAsArchived, {
|
|
3570
|
-
get ["class"]() {
|
|
3571
|
-
return style("notificationArchive__icon", "nt-size-3");
|
|
3572
|
-
}
|
|
3573
|
-
});
|
|
3574
|
-
}
|
|
3575
|
-
}))
|
|
3576
|
-
}), createComponent(Tooltip.Content, {
|
|
3577
|
-
"data-localization": "notification.actions.archive.tooltip",
|
|
3578
|
-
get children() {
|
|
3579
|
-
return t("notification.actions.archive.tooltip");
|
|
3580
|
-
}
|
|
3581
|
-
})];
|
|
3582
|
-
}
|
|
3583
|
-
});
|
|
3584
|
-
},
|
|
3585
|
-
get children() {
|
|
3586
|
-
return createComponent(Tooltip.Root, {
|
|
3587
|
-
get children() {
|
|
3588
|
-
return [createComponent(Tooltip.Trigger, {
|
|
3589
|
-
asChild: (childProps) => createComponent(Button, mergeProps({
|
|
3590
|
-
appearanceKey: "notificationUnarchive__button",
|
|
3591
|
-
size: "iconSm",
|
|
3592
|
-
variant: "ghost"
|
|
3593
|
-
}, childProps, {
|
|
3594
|
-
onClick: (e) => __async(this, null, function* () {
|
|
3595
|
-
e.stopPropagation();
|
|
3596
|
-
yield props.notification.unarchive();
|
|
3597
|
-
}),
|
|
3598
|
-
get children() {
|
|
3599
|
-
return createComponent(MarkAsUnarchived, {
|
|
3600
|
-
get ["class"]() {
|
|
3601
|
-
return style("notificationArchive__icon", "nt-size-3");
|
|
3602
|
-
}
|
|
3603
|
-
});
|
|
3604
|
-
}
|
|
3605
|
-
}))
|
|
3606
|
-
}), createComponent(Tooltip.Content, {
|
|
3607
|
-
"data-localization": "notification.actions.unarchive.tooltip",
|
|
3608
|
-
get children() {
|
|
3609
|
-
return t("notification.actions.unarchive.tooltip");
|
|
3610
|
-
}
|
|
3611
|
-
})];
|
|
3612
|
-
}
|
|
3613
|
-
});
|
|
3614
|
-
}
|
|
3615
|
-
}), null);
|
|
4746
|
+
insert(_el$5, () => renderNotificationActions(props.notification, status));
|
|
3616
4747
|
insert(_el$3, createComponent(Show, {
|
|
3617
4748
|
get when() {
|
|
3618
4749
|
return props.notification.primaryAction || props.notification.secondaryAction;
|
|
3619
4750
|
},
|
|
3620
4751
|
get children() {
|
|
3621
|
-
var _el$6 = _tmpl$
|
|
4752
|
+
var _el$6 = _tmpl$216();
|
|
3622
4753
|
insert(_el$6, createComponent(Show, {
|
|
3623
4754
|
get when() {
|
|
3624
4755
|
return props.notification.primaryAction;
|
|
@@ -3651,7 +4782,62 @@ var DefaultNotification = (props) => {
|
|
|
3651
4782
|
return _el$6;
|
|
3652
4783
|
}
|
|
3653
4784
|
}), _el$7);
|
|
3654
|
-
insert(_el$7,
|
|
4785
|
+
insert(_el$7, createComponent(Show, {
|
|
4786
|
+
get when() {
|
|
4787
|
+
return snoozedUntil();
|
|
4788
|
+
},
|
|
4789
|
+
get fallback() {
|
|
4790
|
+
return createComponent(Show, {
|
|
4791
|
+
get when() {
|
|
4792
|
+
return deliveredAt();
|
|
4793
|
+
},
|
|
4794
|
+
get fallback() {
|
|
4795
|
+
return memo(createdAt);
|
|
4796
|
+
},
|
|
4797
|
+
children: (deliveredAt2) => createComponent(Show, {
|
|
4798
|
+
get when() {
|
|
4799
|
+
return deliveredAt2().length >= 2;
|
|
4800
|
+
},
|
|
4801
|
+
get children() {
|
|
4802
|
+
return [" ", createComponent(For, {
|
|
4803
|
+
get each() {
|
|
4804
|
+
return deliveredAt2().slice(-2);
|
|
4805
|
+
},
|
|
4806
|
+
children: (date, index) => [createComponent(Show, {
|
|
4807
|
+
get when() {
|
|
4808
|
+
return index() === 0;
|
|
4809
|
+
},
|
|
4810
|
+
get children() {
|
|
4811
|
+
return [date, " \xB7"];
|
|
4812
|
+
}
|
|
4813
|
+
}), createComponent(Show, {
|
|
4814
|
+
get when() {
|
|
4815
|
+
return index() === 1;
|
|
4816
|
+
},
|
|
4817
|
+
get children() {
|
|
4818
|
+
return createComponent(Badge, {
|
|
4819
|
+
appearanceKey: "notificationDeliveredAt__badge",
|
|
4820
|
+
get children() {
|
|
4821
|
+
return [createComponent(Clock, {
|
|
4822
|
+
get ["class"]() {
|
|
4823
|
+
return style("notificationDeliveredAt__icon", "nt-size-3");
|
|
4824
|
+
}
|
|
4825
|
+
}), date];
|
|
4826
|
+
}
|
|
4827
|
+
});
|
|
4828
|
+
}
|
|
4829
|
+
})]
|
|
4830
|
+
})];
|
|
4831
|
+
}
|
|
4832
|
+
})
|
|
4833
|
+
});
|
|
4834
|
+
},
|
|
4835
|
+
children: (snoozedUntil2) => [createComponent(Clock, {
|
|
4836
|
+
get ["class"]() {
|
|
4837
|
+
return style("notificationSnoozedUntil__icon", "nt-size-3");
|
|
4838
|
+
}
|
|
4839
|
+
}), memo(() => t("notification.snoozedUntil")), " \xB7 ", memo(snoozedUntil2)]
|
|
4840
|
+
}));
|
|
3655
4841
|
insert(_el$, createComponent(Show, {
|
|
3656
4842
|
get when() {
|
|
3657
4843
|
return !props.notification.isRead;
|
|
@@ -3666,7 +4852,7 @@ var DefaultNotification = (props) => {
|
|
|
3666
4852
|
var _a;
|
|
3667
4853
|
var _v$3 = style("notification", cn("nt-w-full nt-text-sm hover:nt-bg-primary-alpha-25 nt-group nt-relative nt-flex nt-items-start nt-p-4 nt-gap-2", "[&:not(:first-child)]:nt-border-t nt-border-neutral-alpha-100", {
|
|
3668
4854
|
"nt-cursor-pointer": !props.notification.isRead || !!((_a = props.notification.redirect) == null ? void 0 : _a.url)
|
|
3669
|
-
})), _v$4 = style("notificationContent", "nt-flex nt-flex-col nt-gap-2 nt-w-full"), _v$5 = style("notificationTextContainer"), _v$6 = style("notificationDefaultActions",
|
|
4855
|
+
})), _v$4 = style("notificationContent", "nt-flex nt-flex-col nt-gap-2 nt-w-full"), _v$5 = style("notificationTextContainer"), _v$6 = style("notificationDefaultActions", `nt-absolute nt-transition nt-duration-100 nt-ease-out nt-gap-0.5 nt-flex nt-shrink-0 nt-opacity-0 group-hover:nt-opacity-100 group-focus-within:nt-opacity-100 nt-justify-center nt-items-center nt-bg-background/90 nt-right-3 nt-top-3 nt-border nt-border-neutral-alpha-100 nt-rounded-lg nt-backdrop-blur-lg nt-p-0.5`), _v$7 = style("notificationDate", "nt-text-foreground-alpha-400 nt-flex nt-items-center nt-gap-1");
|
|
3670
4856
|
_v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
|
|
3671
4857
|
_v$4 !== _p$.t && className(_el$3, _p$.t = _v$4);
|
|
3672
4858
|
_v$5 !== _p$.a && className(_el$4, _p$.a = _v$5);
|
|
@@ -3746,14 +4932,14 @@ var NewMessagesCta = (props) => {
|
|
|
3746
4932
|
}
|
|
3747
4933
|
});
|
|
3748
4934
|
};
|
|
3749
|
-
var _tmpl$
|
|
4935
|
+
var _tmpl$61 = /* @__PURE__ */ template(`<div>`);
|
|
3750
4936
|
var NotificationListSkeleton = (props) => {
|
|
3751
4937
|
const style = useStyle();
|
|
3752
4938
|
const {
|
|
3753
4939
|
t
|
|
3754
4940
|
} = useLocalization();
|
|
3755
4941
|
return (() => {
|
|
3756
|
-
var _el$ = _tmpl$
|
|
4942
|
+
var _el$ = _tmpl$61();
|
|
3757
4943
|
insert(_el$, createComponent(Motion.div, {
|
|
3758
4944
|
get animate() {
|
|
3759
4945
|
return {
|
|
@@ -3792,7 +4978,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
3792
4978
|
appearanceKey: "notificationList__skeletonAvatar",
|
|
3793
4979
|
"class": "nt-w-8 nt-h-8 nt-rounded-full nt-bg-neutral-alpha-100"
|
|
3794
4980
|
}), (() => {
|
|
3795
|
-
var _el$3 = _tmpl$
|
|
4981
|
+
var _el$3 = _tmpl$61();
|
|
3796
4982
|
insert(_el$3, createComponent(SkeletonText, {
|
|
3797
4983
|
appearanceKey: "notificationList__skeletonText",
|
|
3798
4984
|
"class": "nt-h-2 nt-w-1/3 nt-bg-neutral-alpha-50 nt-rounded"
|
|
@@ -3806,7 +4992,7 @@ var NotificationListSkeleton = (props) => {
|
|
|
3806
4992
|
})()];
|
|
3807
4993
|
}
|
|
3808
4994
|
}))), (() => {
|
|
3809
|
-
var _el$2 = _tmpl$
|
|
4995
|
+
var _el$2 = _tmpl$61();
|
|
3810
4996
|
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")));
|
|
3811
4997
|
return _el$2;
|
|
3812
4998
|
})()];
|
|
@@ -3851,8 +5037,8 @@ var NotificationListSkeleton = (props) => {
|
|
|
3851
5037
|
};
|
|
3852
5038
|
|
|
3853
5039
|
// src/ui/components/Notification/NotificationList.tsx
|
|
3854
|
-
var _tmpl$
|
|
3855
|
-
var _tmpl$
|
|
5040
|
+
var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
|
|
5041
|
+
var _tmpl$217 = /* @__PURE__ */ template(`<div><div>`);
|
|
3856
5042
|
var NotificationList = (props) => {
|
|
3857
5043
|
var _a, _b;
|
|
3858
5044
|
const options = createMemo(() => __spreadProps(__spreadValues({}, props.filter), {
|
|
@@ -3895,7 +5081,7 @@ var NotificationList = (props) => {
|
|
|
3895
5081
|
});
|
|
3896
5082
|
});
|
|
3897
5083
|
return (() => {
|
|
3898
|
-
var _el$ = _tmpl$
|
|
5084
|
+
var _el$ = _tmpl$217(), _el$2 = _el$.firstChild;
|
|
3899
5085
|
insert(_el$, createComponent(NewMessagesCta, {
|
|
3900
5086
|
get count() {
|
|
3901
5087
|
return count();
|
|
@@ -3952,7 +5138,7 @@ var NotificationList = (props) => {
|
|
|
3952
5138
|
return !end();
|
|
3953
5139
|
},
|
|
3954
5140
|
get children() {
|
|
3955
|
-
var _el$3 = _tmpl$
|
|
5141
|
+
var _el$3 = _tmpl$62();
|
|
3956
5142
|
use(setEl, _el$3);
|
|
3957
5143
|
insert(_el$3, createComponent(NotificationListSkeleton, {
|
|
3958
5144
|
loading: true
|
|
@@ -3974,13 +5160,13 @@ var NotificationList = (props) => {
|
|
|
3974
5160
|
return _el$;
|
|
3975
5161
|
})();
|
|
3976
5162
|
};
|
|
3977
|
-
var _tmpl$
|
|
5163
|
+
var _tmpl$63 = /* @__PURE__ */ template(`<span>`);
|
|
3978
5164
|
var getDisplayCount = (count) => count >= 100 ? "99+" : count;
|
|
3979
5165
|
var InboxTabUnreadNotificationsCount = (props) => {
|
|
3980
5166
|
const style = useStyle();
|
|
3981
5167
|
const displayCount = createMemo(() => getDisplayCount(props.count));
|
|
3982
5168
|
return (() => {
|
|
3983
|
-
var _el$ = _tmpl$
|
|
5169
|
+
var _el$ = _tmpl$63();
|
|
3984
5170
|
insert(_el$, displayCount);
|
|
3985
5171
|
effect(() => className(_el$, style("notificationsTabsTriggerCount", "nt-rounded-full nt-bg-counter nt-px-[6px] nt-text-counter-foreground nt-text-sm")));
|
|
3986
5172
|
return _el$;
|
|
@@ -4005,7 +5191,7 @@ var InboxTab = (props) => {
|
|
|
4005
5191
|
},
|
|
4006
5192
|
get children() {
|
|
4007
5193
|
return [(() => {
|
|
4008
|
-
var _el$2 = _tmpl$
|
|
5194
|
+
var _el$2 = _tmpl$63();
|
|
4009
5195
|
insert(_el$2, () => props.label);
|
|
4010
5196
|
effect(() => className(_el$2, style("notificationsTabsTriggerLabel", "nt-text-sm nt-font-medium")));
|
|
4011
5197
|
return _el$2;
|
|
@@ -4043,7 +5229,7 @@ var InboxDropdownTab = (props) => {
|
|
|
4043
5229
|
},
|
|
4044
5230
|
get children() {
|
|
4045
5231
|
return [(() => {
|
|
4046
|
-
var _el$3 = _tmpl$
|
|
5232
|
+
var _el$3 = _tmpl$63();
|
|
4047
5233
|
insert(_el$3, () => props.label);
|
|
4048
5234
|
effect(() => className(_el$3, style("moreTabs__dropdownItemLabel", "nt-mr-auto")));
|
|
4049
5235
|
return _el$3;
|
|
@@ -4224,7 +5410,7 @@ var InboxTabs = (props) => {
|
|
|
4224
5410
|
};
|
|
4225
5411
|
|
|
4226
5412
|
// src/ui/components/Inbox.tsx
|
|
4227
|
-
var _tmpl$
|
|
5413
|
+
var _tmpl$64 = /* @__PURE__ */ template(`<div>`);
|
|
4228
5414
|
var InboxPage = /* @__PURE__ */ function(InboxPage2) {
|
|
4229
5415
|
InboxPage2["Notifications"] = "notifications";
|
|
4230
5416
|
InboxPage2["Preferences"] = "preferences";
|
|
@@ -4246,7 +5432,7 @@ var InboxContent = (props) => {
|
|
|
4246
5432
|
};
|
|
4247
5433
|
});
|
|
4248
5434
|
return (() => {
|
|
4249
|
-
var _el$ = _tmpl$
|
|
5435
|
+
var _el$ = _tmpl$64();
|
|
4250
5436
|
insert(_el$, createComponent(Switch$1, {
|
|
4251
5437
|
get children() {
|
|
4252
5438
|
return [createComponent(Match, {
|
|
@@ -4544,7 +5730,7 @@ var Renderer = (props) => {
|
|
|
4544
5730
|
portalDivElement.style.height = "100%";
|
|
4545
5731
|
}
|
|
4546
5732
|
});
|
|
4547
|
-
return createComponent(Portal, {
|
|
5733
|
+
return createComponent(Portal$1, {
|
|
4548
5734
|
mount: node,
|
|
4549
5735
|
ref: (el) => {
|
|
4550
5736
|
portalDivElement = el;
|