@surrealdb/ui 1.0.19 → 1.0.21

package/dist/fonts.d.ts

@@ -33,7 +33,7 @@ declare module "@mantine/core" {
         variant?: import("@mantine/core").BadgeVariant | SurrealVariant;
     }
     interface CheckboxProps {
-        variant?: import("@mantine/core").CheckboxVariant | SurrealVariant;
+        variant?: import("@mantine/core").CheckboxVariant | SurrealVariant | "gradient";
     }
     interface PasswordInputProps {
         variant?: import("@mantine/core").InputVariant | SurrealVariant;
@@ -77,6 +77,9 @@ declare module "@mantine/core" {
     interface KbdProps {
         variant?: SurrealVariant;
     }
+    interface SwitchProps {
+        variant?: SurrealVariant | "gradient";
+    }
     interface TitleProps {
         variant?: "gradient" | "surreal-gradient";
     }

package/dist/ui.css

@@ -1,4 +1,4 @@
 @layer surreal {
-:root{--surreal-opacity-subtle: .07;--surreal-opacity-medium: .3;--surreal-opacity-strong: .6;--surreal-glass-subtle: rgba(255, 255, 255, var(--surreal-opacity-subtle));--surreal-glass-medium: rgba(255, 255, 255, var(--surreal-opacity-medium));--surreal-glass-strong: rgba(255, 255, 255, var(--surreal-opacity-strong));--surreal-blur: blur(12px);--surreal-paper-background: color-mix(in srgb, var(--mantine-color-slate-7) calc(var(--surreal-opacity-strong) * 100%), transparent);--surreal-pink: #ff00a0;--surreal-purple: #9800ff;--surreal-energy: #D255FE;--surreal-passion: #651DDD}.mantine-ActionIcon-root[data-variant=surreal]{border-width:1px;border-style:solid}.mantine-CloseButton-root[data-variant=surreal]{color:var(--mantine-color-slate-outline)}.mantine-CloseButton-root[data-variant=surreal]:hover{background-color:var(--surreal-glass-subtle)}.mantine-Button-root[data-variant=surreal]{border-width:1px;border-style:solid}.mantine-ActionIcon-root[data-variant=surreal]:disabled{opacity:var(--surreal-opacity-medium)}.mantine-Button-root[data-variant=transparent]:disabled,.mantine-ActionIcon-root[data-variant=transparent]:disabled{background-color:unset;opacity:var(--surreal-opacity-strong)}.mantine-Button-root[data-variant=surreal]:disabled,.mantine-ActionIcon-root[data-variant=surreal]:disabled,.mantine-Checkbox-root[data-variant=surreal]:disabled{border-color:var(--surreal-glass-subtle);background-color:var(--surreal-glass-subtle);color:var(--mantine-color-slate-outline)}.mantine-Button-root[data-variant=gradient]{border:1px solid var(--surreal-glass-medium);background-origin:border-box}.mantine-InputWrapper-root[data-variant=surreal] .mantine-InputWrapper-label{color:var(--mantine-color-bright);font-weight:600;margin-bottom:4px}.mantine-InputWrapper-root[data-variant=surreal] .mantine-Input-input{color:var(--mantine-color-bright);background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);transition:all .25s ease}.mantine-InputWrapper-root[data-variant=surreal] .mantine-Input-input:focus-within{border-color:color-mix(in srgb,var(--mantine-color-violet-3) 75%,var(--surreal-glass-subtle));background-color:color-mix(in srgb,var(--mantine-color-violet-3) 10%,var(--surreal-glass-subtle))}.mantine-InputWrapper-root[data-variant=surreal] .mantine-Input-input::placeholder{color:var(--surreal-glass-medium)}.mantine-Autocomplete-dropdown[data-variant=surreal]{overflow:hidden}.mantine-Autocomplete-dropdown[data-variant=surreal] .mantine-Autocomplete-options{padding:4px 0 4px 4px}.mantine-Autocomplete-dropdown[data-variant=surreal] .mantine-Autocomplete-option{border-radius:var(--mantine-radius-xl)}.mantine-Autocomplete-dropdown[data-variant=surreal] .mantine-Autocomplete-option:hover{background-color:var(--surreal-glass-subtle)}.mantine-Paper-root[data-variant=surreal]{background:linear-gradient(135deg,var(--mantine-color-obsidian-8),var(--mantine-color-obsidian-9))}.mantine-Paper-root[data-variant=surreal][data-with-border]{border:1px solid var(--surreal-glass-subtle)}.mantine-Paper-root[data-variant=glass]{background:linear-gradient(135deg,var(--mantine-color-obsidian-8),rgba(from var(--mantine-color-obsidian-9) r g b/0));backdrop-filter:var(--surreal-blur);box-shadow:0 12px 45px var(--mantine-color-obsidian-9)}.mantine-Paper-root[data-variant=glass][data-with-border]{border:1px solid var(--surreal-glass-subtle)}.mantine-ScrollArea-root[data-variant=surreal] .mantine-ScrollArea-scrollbar{transition:opacity .25s ease;opacity:0}.mantine-ScrollArea-root[data-variant=surreal] .mantine-ScrollArea-scrollbar[data-state=visible]{opacity:1}.mantine-ScrollArea-root[data-variant=surreal] .mantine-ScrollArea-scrollbar:hover{background-color:var(--surreal-glass-subtle);border-radius:var(--mantine-radius-xl)}.mantine-Divider-root[data-variant=surreal]{--divider-color: var(--surreal-glass-subtle)}.mantine-Divider-root[data-variant=surreal][data-orientation=horizontal]{border-top:var(--divider-size) solid var(--divider-color)}.mantine-Divider-root[data-variant=surreal][data-orientation=vertical]{border-left:var(--divider-size) solid var(--divider-color)}.mantine-Notification-root[data-variant=surreal]{background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);backdrop-filter:var(--surreal-blur);align-items:flex-start;padding:var(--mantine-spacing-md)}.mantine-Notification-root[data-variant=surreal] .mantine-Notification-title{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);margin-block:var(--mantine-spacing-xs);font-weight:600}.mantine-Notification-root[data-variant=surreal] .mantine-Notification-description{color:var(--mantine-color-slate-2)}.mantine-Notification-root[data-variant=surreal] .mantine-Notification-icon{background-color:transparent;border:1px solid var(--surreal-glass-subtle);padding:15px;color:var(--notification-color);font-size:5rem}.mantine-Loader-root[data-variant=surreal]:after{border:none;background:conic-gradient(from 0,transparent 15%,var(--loader-color) 100%);mask:radial-gradient(circle at center,transparent 50%,#000 0%)}.mantine-ThemeIcon-root[data-variant=surreal]{border-width:1px;border-style:solid;background-color:transparent;color:var(--ti-color)}.mantine-Tooltip-tooltip[data-variant=surreal]{color:var(--tooltip-color, var(--mantine-color-text));background-color:var(--tooltip-bg, var(--mantine-color-violet-8));border:1px solid var(--tooltip-bg, var(--mantine-color-violet-8));box-shadow:var(--mantine-shadow-md);padding-block:var(--mantine-spacing-xs);padding-inline:var(--mantine-spacing-md);color:#fff}:root[data-mantine-color-scheme=light] .mantine-Tooltip-tooltip[data-variant=surreal]{background-color:var(--tooltip-bg, var(--mantine-color-violet-4));border-color:var(--tooltip-bg, var(--mantine-color-violet-4))}.mantine-Menu-dropdown[data-variant=surreal]{background-color:color-mix(in srgb,var(--mantine-color-slate-6) calc(var(--surreal-opacity-strong) * 100%),transparent);background-color:var(--surreal-glass-subtle);border:1px solid rgba(255,255,255,.125);backdrop-filter:var(--surreal-blur);border-radius:22px;padding:0}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-divider{border-color:#ffffff20;margin-inline:0;margin-block:var(--mantine-spacing-xs)}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-label{color:var(--mantine-color-bright);opacity:var(--surreal-opacity-strong);font-size:var(--mantine-font-size-xs);font-weight:600}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-item{border-radius:100px;color:var(--mantine-color-bright);font-weight:500}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-item:hover{background-color:var(--surreal-glass-subtle)}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-itemSection svg{opacity:var(--surreal-opacity-strong)}.mantine-Popover-dropdown[data-variant=surreal],.mantine-HoverCard-dropdown[data-variant=surreal]{background-color:color-mix(in srgb,var(--mantine-color-slate-6) calc(var(--surreal-opacity-strong) * 100%),transparent);background-color:var(--surreal-glass-subtle);border:1px solid rgba(255,255,255,.125);backdrop-filter:var(--surreal-blur);border-radius:22px;padding:0}.mantine-Popover-dropdown[data-variant=transparent],.mantine-HoverCard-dropdown[data-variant=transparent]{background-color:transparent;border:unset;padding:0}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-inner,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-inner{overflow-y:auto;display:grid}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-content,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-content{background-color:color-mix(in srgb,var(--mantine-color-slate-6) calc(var(--surreal-opacity-strong) * 100%),transparent);background-color:var(--surreal-glass-subtle);border:1px solid rgba(255,255,255,.125);backdrop-filter:var(--surreal-blur);border-radius:22px;overflow-y:unset;max-height:unset;width:var(--modal-size)}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-header,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-header{background-color:unset;border-bottom:1px solid var(--surreal-glass-subtle);margin-bottom:var(--mb-padding, var(--mantine-spacing-md));position:static;padding-block:0}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-title,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-title{font-size:var(--mantine-font-size-lg);color:var(--mantine-color-bright);font-weight:600}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-header{border:none;margin-bottom:0}.mantine-Overlay-root[data-variant=surreal]{background-color:color-mix(in srgb,var(--mantine-color-slate-9),transparent)}.mantine-Anchor-root[data-variant=surreal]{color:var(--mantine-color-bright)}.mantine-Anchor-root[data-variant=surreal]:hover,.mantine-Anchor-root[data-variant=surreal]:focus-within{color:var(--mantine-color-violet-text)}.mantine-Anchor-root[data-variant=glow]>div{position:relative}.mantine-Anchor-root[data-variant=glow]>div:before,.mantine-Anchor-root[data-variant=glow]>div:after{content:"";position:absolute;pointer-events:none;transition:all .25s ease;inset:9px;z-index:-2;opacity:0;filter:blur(6px);mix-blend-mode:screen}.mantine-Anchor-root[data-variant=glow]>div:before{background:radial-gradient(120% 170% at 0% 0%,var(--surreal-energy) 0%,rgba(197,91,255,0) 50%),radial-gradient(120% 170% at 100% 100%,var(--surreal-passion) 0%,rgba(96,114,255,0) 50%)}.mantine-Anchor-root[data-variant=glow]>div:after{background:radial-gradient(100% 100% at 0% 0%,var(--surreal-energy) 0%,rgba(197,91,255,0) 35%),radial-gradient(100% 100% at 100% 100%,var(--surreal-passion) 0%,rgba(96,114,255,0) 35%)}.mantine-Anchor-root[data-variant=glow]>div:hover:before,.mantine-Anchor-root[data-variant=glow]>div:hover:after{inset:-9px;opacity:1}.mantine-Select-root[data-variant=surreal] input{border-radius:var(--mantine-radius-xl)}.mantine-Badge-root[data-variant=surreal],.mantine-Checkbox-root[data-variant=surreal] .mantine-Checkbox-input{border-radius:var(--mantine-radius-xl);background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);color:var(--mantine-color-bright)}.mantine-Checkbox-label{user-select:none}.mantine-Tabs-tab[data-variant=surreal]{border:1px solid var(--surreal-glass-subtle);border-radius:var(--mantine-radius-xl)}.mantine-Tabs-tab[data-variant=surreal][aria-selected=true]{border:1px solid var(--surreal-glass-subtle);background-color:var(--surreal-glass-subtle)}.mantine-Tabs-tab[data-variant=surreal][aria-selected=false]{border:1px solid transparent;background-color:transparent}.mantine-Skeleton-root[data-variant=surreal]{background-color:var(--surreal-glass-subtle)}.mantine-SegmentedControl-root[data-variant=surreal]{background-color:transparent;overflow:visible}.mantine-SegmentedControl-root[data-variant=surreal] .mantine-SegmentedControl-indicator{border-radius:3px 3px 0 0;top:unset;bottom:0;height:4px!important;background:linear-gradient(to bottom,var(--surreal-gradient-from),var(--surreal-gradient-to))}.mantine-NavLink-root[data-variant=surreal]{transition:background-color .25s ease;border-radius:var(--mantine-radius-lg);padding:var(--mantine-spacing-xs)}.mantine-NavLink-root[data-variant=surreal] .mantine-NavLink-label{font-weight:500;color:var(--mantine-color-bright)}.mantine-NavLink-root[data-variant=surreal] .mantine-NavLink-description{font-size:var(--mantine-font-size-xs);color:var(--mantine-color-slate-2);opacity:var(--surreal-opacity-strong)}.mantine-NavLink-root[data-variant=surreal]:hover{background-color:var(--surreal-glass-subtle)}.mantine-Kbd-root[data-variant=surreal]{background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);color:var(--mantine-color-bright);border-radius:var(--mantine-radius-xs)}.mantine-Title-root[data-variant=gradient]{color:var(--mantine-color-bright);background:linear-gradient(180deg,var(--mantine-color-slate-0),var(--mantine-color-slate-3));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mantine-Tabs-list[data-variant=gradient]{background:linear-gradient(135deg,var(--mantine-color-obsidian-8),var(--mantine-color-obsidian-9));border:1px solid var(--surreal-glass-subtle);border-radius:var(--mantine-radius-xl);padding:4px;gap:4px;width:fit-content}.mantine-Tabs-tab[data-variant=gradient]{border-radius:var(--mantine-radius-xl);border:1px solid transparent;color:var(--mantine-color-slate-2);transition:background-color .2s ease,color .2s ease,border-color .2s ease;background-origin:border-box}.mantine-Tabs-tab[data-variant=gradient][aria-selected=true]{background:linear-gradient(135deg,var(--surreal-energy),var(--surreal-passion));border-color:var(--surreal-glass-subtle);color:var(--mantine-color-bright);background-origin:border-box}.mantine-Tabs-tab[data-variant=gradient][aria-selected=false]:hover{background-color:var(--surreal-glass-subtle);color:var(--mantine-color-bright)}._root_744ed_1{vertical-align:middle;flex-shrink:0}._path_744ed_6{fill:currentColor}._spinning_744ed_10{animation:_spin_744ed_10 .5s linear infinite}@keyframes _spin_744ed_10{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+:root{--surreal-opacity-subtle: .07;--surreal-opacity-medium: .3;--surreal-opacity-strong: .6;--surreal-glass-subtle: rgba(255, 255, 255, var(--surreal-opacity-subtle));--surreal-glass-medium: rgba(255, 255, 255, var(--surreal-opacity-medium));--surreal-glass-strong: rgba(255, 255, 255, var(--surreal-opacity-strong));--surreal-blur: blur(12px);--surreal-paper-background: color-mix(in srgb, var(--mantine-color-slate-7) calc(var(--surreal-opacity-strong) * 100%), transparent);--surreal-pink: #ff00a0;--surreal-purple: #9800ff;--surreal-energy: #D255FE;--surreal-passion: #651DDD}.mantine-ActionIcon-root[data-variant=surreal]{border-width:1px;border-style:solid}.mantine-CloseButton-root[data-variant=surreal]{color:var(--mantine-color-slate-outline)}.mantine-CloseButton-root[data-variant=surreal]:hover{background-color:var(--surreal-glass-subtle)}.mantine-Button-root[data-variant=surreal]{border-width:1px;border-style:solid}.mantine-ActionIcon-root[data-variant=surreal]:disabled{opacity:var(--surreal-opacity-medium)}.mantine-Button-root[data-variant=transparent]:disabled,.mantine-ActionIcon-root[data-variant=transparent]:disabled{background-color:unset;opacity:var(--surreal-opacity-strong)}.mantine-Button-root[data-variant=surreal]:disabled,.mantine-ActionIcon-root[data-variant=surreal]:disabled,.mantine-Checkbox-root[data-variant=surreal]:disabled{border-color:var(--surreal-glass-subtle);background-color:var(--surreal-glass-subtle);color:var(--mantine-color-slate-outline)}.mantine-Button-root[data-variant=gradient]{border:1px solid var(--surreal-glass-medium);background-origin:border-box}.mantine-InputWrapper-root[data-variant=surreal] .mantine-InputWrapper-label{color:var(--mantine-color-bright);font-weight:600;margin-bottom:4px}.mantine-InputWrapper-root[data-variant=surreal] .mantine-Input-input{color:var(--mantine-color-bright);background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);transition:all .25s ease}.mantine-InputWrapper-root[data-variant=surreal] .mantine-Input-input:focus-within{border-color:color-mix(in srgb,var(--mantine-color-violet-3) 75%,var(--surreal-glass-subtle));background-color:color-mix(in srgb,var(--mantine-color-violet-3) 10%,var(--surreal-glass-subtle))}.mantine-InputWrapper-root[data-variant=surreal] .mantine-Input-input::placeholder{color:var(--surreal-glass-medium)}.mantine-Autocomplete-dropdown[data-variant=surreal]{overflow:hidden}.mantine-Autocomplete-dropdown[data-variant=surreal] .mantine-Autocomplete-options{padding:4px 0 4px 4px}.mantine-Autocomplete-dropdown[data-variant=surreal] .mantine-Autocomplete-option{border-radius:var(--mantine-radius-xl)}.mantine-Autocomplete-dropdown[data-variant=surreal] .mantine-Autocomplete-option:hover{background-color:var(--surreal-glass-subtle)}.mantine-Paper-root[data-variant=surreal]{background:linear-gradient(135deg,var(--mantine-color-obsidian-8),var(--mantine-color-obsidian-9))}.mantine-Paper-root[data-variant=surreal][data-with-border]{border:1px solid var(--surreal-glass-subtle)}.mantine-Paper-root[data-variant=glass]{background:linear-gradient(135deg,var(--mantine-color-obsidian-8),rgba(from var(--mantine-color-obsidian-9) r g b/0));backdrop-filter:var(--surreal-blur);box-shadow:0 12px 45px var(--mantine-color-obsidian-9)}.mantine-Paper-root[data-variant=glass][data-with-border]{border:1px solid var(--surreal-glass-subtle)}.mantine-ScrollArea-root[data-variant=surreal] .mantine-ScrollArea-scrollbar{transition:opacity .25s ease;opacity:0}.mantine-ScrollArea-root[data-variant=surreal] .mantine-ScrollArea-scrollbar[data-state=visible]{opacity:1}.mantine-ScrollArea-root[data-variant=surreal] .mantine-ScrollArea-scrollbar:hover{background-color:var(--surreal-glass-subtle);border-radius:var(--mantine-radius-xl)}.mantine-Divider-root[data-variant=surreal]{--divider-color: var(--surreal-glass-subtle)}.mantine-Divider-root[data-variant=surreal][data-orientation=horizontal]{border-top:var(--divider-size) solid var(--divider-color)}.mantine-Divider-root[data-variant=surreal][data-orientation=vertical]{border-left:var(--divider-size) solid var(--divider-color)}.mantine-Notification-root[data-variant=surreal]{background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);backdrop-filter:var(--surreal-blur);align-items:flex-start;padding:var(--mantine-spacing-md)}.mantine-Notification-root[data-variant=surreal] .mantine-Notification-title{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);margin-block:var(--mantine-spacing-xs);font-weight:600}.mantine-Notification-root[data-variant=surreal] .mantine-Notification-description{color:var(--mantine-color-slate-2)}.mantine-Notification-root[data-variant=surreal] .mantine-Notification-icon{background-color:transparent;border:1px solid var(--surreal-glass-subtle);padding:15px;color:var(--notification-color);font-size:5rem}.mantine-Loader-root[data-variant=surreal]:after{border:none;background:conic-gradient(from 0,transparent 15%,var(--loader-color) 100%);mask:radial-gradient(circle at center,transparent 50%,#000 0%)}.mantine-ThemeIcon-root[data-variant=surreal]{border-width:1px;border-style:solid;background-color:transparent;color:var(--ti-color)}.mantine-Tooltip-tooltip[data-variant=surreal]{color:var(--tooltip-color, var(--mantine-color-text));background-color:var(--tooltip-bg, var(--mantine-color-violet-8));border:1px solid var(--tooltip-bg, var(--mantine-color-violet-8));box-shadow:var(--mantine-shadow-md);padding-block:var(--mantine-spacing-xs);padding-inline:var(--mantine-spacing-md);color:#fff}:root[data-mantine-color-scheme=light] .mantine-Tooltip-tooltip[data-variant=surreal]{background-color:var(--tooltip-bg, var(--mantine-color-violet-4));border-color:var(--tooltip-bg, var(--mantine-color-violet-4))}.mantine-Menu-dropdown[data-variant=surreal]{background-color:color-mix(in srgb,var(--mantine-color-slate-6) calc(var(--surreal-opacity-strong) * 100%),transparent);background-color:var(--surreal-glass-subtle);border:1px solid rgba(255,255,255,.125);backdrop-filter:var(--surreal-blur);border-radius:22px;padding:0}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-divider{border-color:#ffffff20;margin-inline:0;margin-block:var(--mantine-spacing-xs)}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-label{color:var(--mantine-color-bright);opacity:var(--surreal-opacity-strong);font-size:var(--mantine-font-size-xs);font-weight:600}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-item{border-radius:100px;color:var(--mantine-color-bright);font-weight:500}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-item:hover{background-color:var(--surreal-glass-subtle)}.mantine-Menu-dropdown[data-variant=surreal] .mantine-Menu-itemSection svg{opacity:var(--surreal-opacity-strong)}.mantine-Popover-dropdown[data-variant=surreal],.mantine-HoverCard-dropdown[data-variant=surreal]{background-color:color-mix(in srgb,var(--mantine-color-slate-6) calc(var(--surreal-opacity-strong) * 100%),transparent);background-color:var(--surreal-glass-subtle);border:1px solid rgba(255,255,255,.125);backdrop-filter:var(--surreal-blur);border-radius:22px;padding:0}.mantine-Popover-dropdown[data-variant=transparent],.mantine-HoverCard-dropdown[data-variant=transparent]{background-color:transparent;border:unset;padding:0}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-inner,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-inner{overflow-y:auto;display:grid}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-content,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-content{background-color:color-mix(in srgb,var(--mantine-color-slate-6) calc(var(--surreal-opacity-strong) * 100%),transparent);background-color:var(--surreal-glass-subtle);border:1px solid rgba(255,255,255,.125);backdrop-filter:var(--surreal-blur);border-radius:22px;overflow-y:unset;max-height:unset;width:var(--modal-size)}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-header,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-header{background-color:unset;border-bottom:1px solid var(--surreal-glass-subtle);margin-bottom:var(--mb-padding, var(--mantine-spacing-md));position:static;padding-block:0}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-title,.mantine-Modal-root[data-variant=surreal] .mantine-Modal-title{font-size:var(--mantine-font-size-lg);color:var(--mantine-color-bright);font-weight:600}.mantine-Modal-root[data-variant=fluid] .mantine-Modal-header{border:none;margin-bottom:0}.mantine-Overlay-root[data-variant=surreal]{background-color:color-mix(in srgb,var(--mantine-color-slate-9),transparent)}.mantine-Anchor-root[data-variant=surreal]{color:var(--mantine-color-bright)}.mantine-Anchor-root[data-variant=surreal]:hover,.mantine-Anchor-root[data-variant=surreal]:focus-within{color:var(--mantine-color-violet-text)}.mantine-Anchor-root[data-variant=glow]>div{position:relative}.mantine-Anchor-root[data-variant=glow]>div:before,.mantine-Anchor-root[data-variant=glow]>div:after{content:"";position:absolute;pointer-events:none;transition:all .25s ease;inset:9px;z-index:-2;opacity:0;filter:blur(6px);mix-blend-mode:screen}.mantine-Anchor-root[data-variant=glow]>div:before{background:radial-gradient(120% 170% at 0% 0%,var(--surreal-energy) 0%,rgba(197,91,255,0) 50%),radial-gradient(120% 170% at 100% 100%,var(--surreal-passion) 0%,rgba(96,114,255,0) 50%)}.mantine-Anchor-root[data-variant=glow]>div:after{background:radial-gradient(100% 100% at 0% 0%,var(--surreal-energy) 0%,rgba(197,91,255,0) 35%),radial-gradient(100% 100% at 100% 100%,var(--surreal-passion) 0%,rgba(96,114,255,0) 35%)}.mantine-Anchor-root[data-variant=glow]>div:hover:before,.mantine-Anchor-root[data-variant=glow]>div:hover:after{inset:-9px;opacity:1}.mantine-Select-root[data-variant=surreal] input{border-radius:var(--mantine-radius-xl)}.mantine-Badge-root[data-variant=surreal],.mantine-Checkbox-root[data-variant=gradient] .mantine-Checkbox-input,.mantine-Checkbox-root[data-variant=surreal] .mantine-Checkbox-input{border-radius:var(--mantine-radius-xl);background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);color:var(--mantine-color-bright)}.mantine-Checkbox-root[data-variant=gradient] .mantine-Checkbox-input:checked,.mantine-Checkbox-root[data-variant=surreal] .mantine-Checkbox-input:checked{background-color:var(--checkbox-color)}.mantine-Checkbox-root[data-variant=gradient] .mantine-Checkbox-label,.mantine-Checkbox-root[data-variant=surreal] .mantine-Checkbox-label{user-select:none}.mantine-Checkbox-root[data-variant=gradient] .mantine-Checkbox-input:checked{background:linear-gradient(135deg,var(--surreal-energy),var(--surreal-passion));background-origin:border-box}.mantine-Switch-root[data-variant=gradient] .mantine-Switch-track,.mantine-Switch-root[data-variant=surreal] .mantine-Switch-track{background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle)}.mantine-Switch-root[data-variant=gradient] .mantine-Switch-input:checked+.mantine-Switch-track,.mantine-Switch-root[data-variant=surreal] .mantine-Switch-input:checked+.mantine-Switch-track{background-color:var(--switch-color)}.mantine-Switch-root[data-variant=gradient] .mantine-Switch-input:checked+.mantine-Switch-track{background:linear-gradient(135deg,var(--surreal-energy),var(--surreal-passion));background-origin:border-box}.mantine-Tabs-tab[data-variant=surreal]{border:1px solid var(--surreal-glass-subtle);border-radius:var(--mantine-radius-xl)}.mantine-Tabs-tab[data-variant=surreal][aria-selected=true]{border:1px solid var(--surreal-glass-subtle);background-color:var(--surreal-glass-subtle)}.mantine-Tabs-tab[data-variant=surreal][aria-selected=false]{border:1px solid transparent;background-color:transparent}.mantine-Skeleton-root[data-variant=surreal]{background-color:var(--surreal-glass-subtle)}.mantine-SegmentedControl-root[data-variant=surreal]{background-color:transparent;overflow:visible}.mantine-SegmentedControl-root[data-variant=surreal] .mantine-SegmentedControl-indicator{border-radius:3px 3px 0 0;top:unset;bottom:0;height:4px!important;background:linear-gradient(to bottom,var(--surreal-gradient-from),var(--surreal-gradient-to))}.mantine-NavLink-root[data-variant=surreal]{transition:background-color .25s ease;border-radius:var(--mantine-radius-lg);padding:var(--mantine-spacing-xs)}.mantine-NavLink-root[data-variant=surreal] .mantine-NavLink-label{font-weight:500;color:var(--mantine-color-bright)}.mantine-NavLink-root[data-variant=surreal] .mantine-NavLink-description{font-size:var(--mantine-font-size-xs);color:var(--mantine-color-slate-2);opacity:var(--surreal-opacity-strong)}.mantine-NavLink-root[data-variant=surreal]:hover{background-color:var(--surreal-glass-subtle)}.mantine-Kbd-root[data-variant=surreal]{background-color:var(--surreal-glass-subtle);border:1px solid var(--surreal-glass-subtle);color:var(--mantine-color-bright);border-radius:var(--mantine-radius-xs)}.mantine-Title-root[data-variant=gradient]{color:var(--mantine-color-bright);background:linear-gradient(180deg,var(--mantine-color-slate-0),var(--mantine-color-slate-3));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mantine-Tabs-list[data-variant=gradient]{background:linear-gradient(135deg,var(--mantine-color-obsidian-8),var(--mantine-color-obsidian-9));border:1px solid var(--surreal-glass-subtle);border-radius:var(--mantine-radius-xl);padding:4px;gap:4px;width:fit-content}.mantine-Tabs-tab[data-variant=gradient]{border-radius:var(--mantine-radius-xl);border:1px solid transparent;color:var(--mantine-color-slate-2);transition:background-color .2s ease,color .2s ease,border-color .2s ease;background-origin:border-box}.mantine-Tabs-tab[data-variant=gradient][aria-selected=true]{background:linear-gradient(135deg,var(--surreal-energy),var(--surreal-passion));border-color:var(--surreal-glass-subtle);color:var(--mantine-color-bright);background-origin:border-box}.mantine-Tabs-tab[data-variant=gradient][aria-selected=false]:hover{background-color:var(--surreal-glass-subtle);color:var(--mantine-color-bright)}._root_744ed_1{vertical-align:middle;flex-shrink:0}._path_744ed_6{fill:currentColor}._spinning_744ed_10{animation:_spin_744ed_10 .5s linear infinite}@keyframes _spin_744ed_10{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._root_1ph8i_1 .mantine-Button-label{opacity:var(--surrealist-opacity-strong)}._root_1ph8i_1:hover .mantine-Button-label{opacity:1}._root_f9ked_1{min-height:0;flex:1}._root_f9ked_1 .cm-editor{outline:none;height:100%}._root_f9ked_1 .cm-scroller{font-family:var(--mantine-font-family-monospace)}._root_f9ked_1[data-padding] .cm-scroller{padding:var(--mantine-spacing-sm)}._root_f9ked_1 .cm-gutters{border-right:none}._root_f9ked_1 .cm-gutters,._root_f9ked_1 .cm-gutterElement{background-color:unset}._root_f9ked_1 .cm-lineNumbers{color:var(--mantine-color-slate-5)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-lineNumbers{color:var(--mantine-color-slate-3)}._root_f9ked_1 .cm-activeLineGutter{color:var(--mantine-color-slate-2)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-activeLineGutter{color:var(--mantine-color-slate-9)}._root_f9ked_1 .cm-cursor,._root_f9ked_1 .cm-dropCursor{border-color:currentColor;border-width:2px}._root_f9ked_1 .cm-selectionBackground{background-color:#479aff66!important}._root_f9ked_1 .cm-selectionMatch{background-color:transparent!important}._root_f9ked_1 .cm-searchMatch{background-color:var(--mantine-color-surreal-6)!important;border-radius:6px}._root_f9ked_1 .cm-searchMatch *{color:#fff}._root_f9ked_1 .cm-foldPlaceholder{background-color:var(--mantine-color-slate-6);border:none}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-foldPlaceholder{background-color:var(--mantine-color-slate-1)}._root_f9ked_1 .cm-tooltip{box-shadow:var(--mantine-shadow-md);border-radius:var(--mantine-radius-sm);border-color:var(--mantine-color-dark-4);background-color:color-mix(in srgb,var(--mantine-color-body) 75%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-tooltip{border-color:var(--mantine-color-slate-2)}._root_f9ked_1 .cm-tooltip-autocomplete{padding:var(--mantine-spacing-xs)}._root_f9ked_1 .cm-tooltip-autocomplete ul{font-family:var(--mantine-font-family-monospace)!important}._root_f9ked_1 .cm-tooltip-autocomplete ul li{border-radius:var(--mantine-radius-sm);color:var(--mantine-color-slate-1)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-tooltip-autocomplete ul li{color:var(--mantine-color-slate-6)}._root_f9ked_1 .cm-tooltip-autocomplete ul li[aria-selected]{background-color:var(--mantine-color-slate-6);color:var(--mantine-color-bright)!important}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-tooltip-autocomplete ul li[aria-selected]{background-color:var(--mantine-color-slate-1)}._root_f9ked_1 .cm-completionMatchedText{text-decoration:none;font-weight:600}._root_f9ked_1 .cm-panels{z-index:1;background-color:var(--mantine-body-color);border-color:var(--mantine-color-slate-7)}._root_f9ked_1 .cm-panels label{display:inline-flex;align-items:center;color:var(--mantine-color-bright)}._root_f9ked_1 .cm-panels button{color:var(--mantine-color-bright);background-image:unset!important;background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-xs);border-color:var(--mantine-color-slate-6)}._root_f9ked_1 .cm-panels button:active{background-color:var(--mantine-color-slate-6)!important}._root_f9ked_1 .cm-panels input{background-color:var(--mantine-color-slate-6);border-radius:var(--mantine-radius-xs);color:var(--mantine-color-bright);border:none;outline:none}._root_f9ked_1 .cm-panels input[type=checkbox]{accent-color:var(--mantine-color-surreal-7)}._root_f9ked_1 .cm-panels button:focus-visible,._root_f9ked_1 .cm-panels input:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem * var(--mantine-scale));border-radius:var(--mantine-radius-xs)}._root_f9ked_1 .cm-panels button[name=close]{width:24px;height:24px;transform:translateY(4px)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-panels{border-color:var(--mantine-color-slate-2)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-panels button{border-color:var(--mantine-color-slate-2)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-panels button:active{background-color:var(--mantine-color-slate-2)!important}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-panels input{background-color:var(--mantine-color-slate-1)}._root_f9ked_1 .cm-gotoLine input{margin-left:var(--mantine-spacing-xs)}._root_f9ked_1 .cm-completionIcon{padding-left:4px;opacity:1}._root_f9ked_1 .cm-completionDetail{color:var(--surrealist-kind-color)}._root_f9ked_1 .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionIcon:after{filter:brightness(0) saturate(100%) invert(1)}:root[data-mantine-color-scheme=light] ._root_f9ked_1 .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionIcon:after{filter:brightness(0) saturate(100%)}._root_f9ked_1 .cm-diagnosticText{font-family:var(--mantine-font-family-monospace)}._root_f9ked_1 .cm-diagnostic{max-width:600px}._root_f9ked_1 .cm-lintRange{background-image:none;text-decoration:underline;text-decoration-style:wavy}._root_f9ked_1 .cm-lintRange-error{text-decoration-color:var(--mantine-color-red-6)}._root_f9ked_1 .cm-lintRange-warning{text-decoration-color:var(--mantine-color-yellow-6)}._root_f9ked_1 .cm-lintRange-info{text-decoration-color:var(--mantine-color-blue-6)}._root_f9ked_1 .cm-lintRange-hint{text-decoration-color:var(--mantine-color-slate-5)}._root_f9ked_1 .cm-diagnostic-error{border-color:var(--mantine-color-red-6)}._root_f9ked_1 .cm-diagnostic-warning{border-color:var(--mantine-color-yellow-6)}._root_f9ked_1 .cm-diagnostic-info{border-color:var(--mantine-color-blue-6)}._root_f9ked_1 .cm-diagnostic-hint{border-color:var(--mantine-color-slate-5)}._root_f9ked_1 .cm-completionIcon-class:after{content:var(--surrealist-editor-icon-class)}._root_f9ked_1 .cm-completionIcon-constant:after{content:var(--surrealist-editor-icon-constant)}._root_f9ked_1 .cm-completionIcon-enum:after{content:var(--surrealist-editor-icon-enum)}._root_f9ked_1 .cm-completionIcon-function:after{content:var(--surrealist-editor-icon-function)}._root_f9ked_1 .cm-completionIcon-interface:after{content:var(--surrealist-editor-icon-interface)}._root_f9ked_1 .cm-completionIcon-keyword:after{content:var(--surrealist-editor-icon-keyword)}._root_f9ked_1 .cm-completionIcon-method:after{content:var(--surrealist-editor-icon-method)}._root_f9ked_1 .cm-completionIcon-namespace:after{content:var(--surrealist-editor-icon-namespace)}._root_f9ked_1 .cm-completionIcon-property:after{content:var(--surrealist-editor-icon-property)}._root_f9ked_1 .cm-completionIcon-text:after{content:var(--surrealist-editor-icon-text)}._root_f9ked_1 .cm-completionIcon-type:after{content:var(--surrealist-editor-icon-type)}._root_f9ked_1 .cm-completionIcon-variable:after{content:var(--surrealist-editor-icon-variable)}._editor_f9ked_235{position:absolute;inset:0}
 
 }

package/dist/ui.d.ts

@@ -1,9 +1,16 @@
 import { AlertProps } from '@mantine/core';
 import { BoxProps } from '@mantine/core';
+import { ButtonProps } from '@mantine/core';
+import { EditorSelection } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { ElementProps } from '@mantine/core';
+import { Extension } from '@codemirror/state';
 import { FC } from 'react';
 import { Highlighter } from '@lezer/highlight';
 import { HighlightStyle } from '@codemirror/language';
 import { HTMLAttributes } from 'react';
+import { ImageProps } from '@mantine/core';
+import { KeyBinding } from '@codemirror/view';
 import { MantineColor } from '@mantine/core';
 import { MantineColorScheme } from '@mantine/core';
 import { MantineFontSize } from '@mantine/core';
@@ -11,11 +18,30 @@ import { MantineThemeOverride } from '@mantine/core';
 import { PaperProps } from '@mantine/core';
 import type * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { RefObject } from 'react';
 import { Root } from 'mdast';
 import { StackProps } from '@mantine/core';
+import { StateField } from '@codemirror/state';
+
+/**
+ * A keybind used to accept a completion
+ */
+export declare const acceptWithTab: KeyBinding;
+
+/**
+ * A keymap used to add a cursor below and above the current position
+ */
+export declare const addCursorVerticallyKeymap: readonly KeyBinding[];
 
 declare type AnyFn = (...rest: any[]) => any;
 
+/**
+ * Apply automatic folding to objects/arrays at the specified depth level
+ * @param view - CodeMirror editor view
+ * @param autoCollapseDepth - Depth level to start folding (0 = disabled)
+ */
+export declare function applyAutoFolding(view: EditorView, autoCollapseDepth: number): void;
+
 export declare interface BooleanHandle {
     open: () => void;
     close: () => void;
@@ -175,6 +201,8 @@ export declare const brandYaacomm: string;
 
 export declare const brandYouTube: string;
 
+export declare const BreadcrumbButton: FC<ButtonProps & ElementProps<"button">>;
+
 export declare function clsx(...args: unknown[]): string;
 
 /**
@@ -188,8 +216,25 @@ export declare interface CodeBlockProps extends Omit<PaperProps, "children" | "s
     lang?: string;
 }
 
+export declare const CodeEditor: FC<CodeEditorProps>;
+
+export declare interface CodeEditorProps extends BoxProps {
+    controller: EditorController;
+    autoFocus?: boolean;
+    innerProps?: BoxProps;
+    withPadding?: boolean;
+    ref?: RefObject<EditorView>;
+}
+
 export declare type ColorScheme = keyof ThemeConfig;
 
+declare type ColorScheme_2 = keyof ThemeConfig_2;
+
+/**
+ * Common extensions applied to all CodeMirror editors
+ */
+export declare const commonExtensions: () => Extension;
+
 /**
  * Create a style highlighter for the given color scheme and syntax theme
  */
@@ -201,10 +246,53 @@ export declare function createHighlighter(colorScheme: ColorScheme): Highlighter
  */
 export declare function createMarkdownComponents(): Record<string, React_2.ComponentType<Record<string, unknown>>>;
 
+/**
+ * Create a style highlighter for the given color scheme and syntax theme
+ */
+export declare function createStyleHighlighter(theme: ThemeConfig_2, colorScheme: ColorScheme_2): Highlighter;
+
+/**
+ * A custom variant of the history keymap that uses
+ * the Mod key instead of the Ctrl key
+ */
+export declare const customHistoryKeymap: readonly KeyBinding[];
+
 export declare type DefaultSort = {
     [key: string]: unknown;
 };
 
+export declare interface EditorController {
+    ref: RefObject<HTMLDivElement | null>;
+    mounted: boolean;
+    getEditor: () => EditorView;
+    restoreState: (snapshot: EditorStateSnapshot) => void;
+}
+
+/**
+ * Extensions applicable to all full editors
+ */
+export declare const editorExtensions: () => Extension;
+
+export declare interface EditorOptions {
+    fields?: StateFields;
+    theme?: ThemeConfig;
+    document?: string;
+    state?: EditorStateSnapshot;
+    readOnly?: boolean;
+    extensions?: Extension;
+    lineNumbers?: boolean;
+    onChangeDocument?: (document: string) => void;
+    onChangeSelection?: (selection: EditorSelection) => void;
+    onChangeState?: (snapshot: EditorStateSnapshot) => void;
+}
+
+export declare type EditorStateSnapshot = Record<string, unknown>;
+
+/**
+ * Use a specific syntax theme with the given color scheme
+ */
+export declare function editorTheme(theme: ThemeConfig_2, colorScheme: ColorScheme_2): Extension;
+
 export declare interface ExtractedCode {
     test?: string;
     code: string;
@@ -1110,6 +1198,10 @@ export declare interface SortOptions<T = DefaultSort> {
 
 export declare const Spacer: FC<BoxProps>;
 
+export declare type StateFields = {
+    [prop: string]: StateField<any>;
+};
+
 export declare const SYNTAX_THEME_CONFIG: ThemeConfig;
 
 export declare type ThemeConfig = {
@@ -1117,6 +1209,28 @@ export declare type ThemeConfig = {
     dark: HighlightStyle;
 };
 
+declare type ThemeConfig_2 = {
+    light: HighlightStyle;
+    dark: HighlightStyle;
+};
+
+/**
+ * ThemedImage component that displays different images based on the current color scheme.
+ * Extends Mantine's Image component with support for light/dark mode images.
+ * Uses Mantine's useColorScheme hook to determine the current theme.
+ * Users can override via the colorScheme prop.
+ *
+ * For pre-loading both images, consider adding <link rel="preload"> tags in your HTML head.
+ */
+export declare const ThemedImage: FC<ThemedImageProps>;
+
+export declare interface ThemedImageProps extends ImageProps {
+    darkSrc: string;
+    colorScheme?: "light" | "dark";
+}
+
+export declare function useEditor(options?: EditorOptions): EditorController;
+
 /**
  * Trigger a new render and invoke the passed function
  * during this next call. Useful when you require the component
@@ -1149,6 +1263,11 @@ export declare function useSwitch(initialState?: boolean, callbacks?: {
     onClose?: () => void;
 }): readonly [boolean, BooleanHandle];
 
+/**
+ * The default UI Kit editor theme
+ */
+export declare const VIVID_THEME: ThemeConfig_2;
+
 export { }
 
 declare module "@mantine/core" {
@@ -1184,7 +1303,7 @@ declare module "@mantine/core" {
         variant?: import("@mantine/core").BadgeVariant | SurrealVariant;
     }
     interface CheckboxProps {
-        variant?: import("@mantine/core").CheckboxVariant | SurrealVariant;
+        variant?: import("@mantine/core").CheckboxVariant | SurrealVariant | "gradient";
     }
     interface PasswordInputProps {
         variant?: import("@mantine/core").InputVariant | SurrealVariant;
@@ -1228,6 +1347,9 @@ declare module "@mantine/core" {
     interface KbdProps {
         variant?: SurrealVariant;
     }
+    interface SwitchProps {
+        variant?: SurrealVariant | "gradient";
+    }
     interface TitleProps {
         variant?: "gradient" | "surreal-gradient";
     }