@casinogate/ui 1.9.9 → 1.10.0

package/dist/assets/css/root.css

@@ -845,6 +845,12 @@
       background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 50%, transparent);
     }
   }
+  .cgui\:bg-neutral-100\/50 {
+    background-color: var(--cg-ui-palette-neutral-100);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-100) 50%, transparent);
+    }
+  }
   .cgui\:bg-primary-80 {
     background-color: var(--cg-ui-palette-primary-80);
   }

package/dist/assets/css/theme.css

@@ -177,7 +177,7 @@
 }
 
 @theme inline {
-  --color-*: initial;
+  /* --color-*: initial; */
 
   /* Primary colors */
   --color-primary-100: var(--cg-ui-palette-primary-100);

package/dist/components/dialog/dialog-host-item.svelte

@@ -12,10 +12,20 @@
   import Portal from './components/dialog.portal.svelte';
   import Positioner from './components/dialog.positioner.svelte';
   import Root from './components/dialog.root.svelte';
-  import type { DialogItemState } from './types.js';
+  import type { DialogItemState, InjectedDialogProps } from './types.js';
 
   let { component, props: dialogProps, options, open, id, close, update }: DialogItemState = $props();
 
+  function createCtx(): InjectedDialogProps {
+    return {
+      id,
+      close: (canceled?: boolean) => close(canceled),
+      update,
+    };
+  }
+
+  const ctx = $derived(createCtx());
+
   const {
     interactOutsideBehavior = 'close',
     escapeKeydownBehavior = 'close',
@@ -72,7 +82,7 @@
     () => open,
     (v) => {
       open = v;
-      close();
+      close(true);
     }
   }
 >
@@ -82,7 +92,7 @@
     {/if}
     <Positioner {...positionerProps}>
       <Content {...contentProps}>
-        <Component {...dialogProps} />
+        <Component {ctx} {...dialogProps} />
       </Content>
     </Positioner>
   </Portal>

package/dist/components/dialog/dialog-host.svelte

@@ -2,26 +2,17 @@
   export const createRegister = <TKey extends string, TComponent extends DialogComponent>(
     key: TKey,
     component: TComponent,
-    options?: Partial<DialogRegistrationOptions>
-  ): { [key in TKey]: DialogRegistrationValue<TKey, TComponent> } => {
+    options?: Partial<DialogOptions>
+  ): { [K in TKey]: DialogRegistrationValue<TComponent> } => {
     return {
-      [key]: {
-        key: key,
-        component,
-        options,
-      },
-    } as { [key in TKey]: DialogRegistrationValue<TKey, TComponent> };
+      [key]: { component, options },
+    } as { [K in TKey]: DialogRegistrationValue<TComponent> };
   };
 </script>
 
 <script lang="ts">
   import HostItem from './dialog-host-item.svelte';
-  import type {
-    DialogComponent,
-    DialogHostProps,
-    DialogRegistrationOptions,
-    DialogRegistrationValue,
-  } from './types.js';
+  import type { DialogComponent, DialogHostProps, DialogOptions, DialogRegistrationValue } from './types.js';
 
   import { boxWith } from 'svelte-toolbelt';
   import { DialogManagerState } from './model/dialog-manager.svelte.js';

package/dist/components/dialog/dialog-host.svelte.d.ts

@@ -1,5 +1,5 @@
-export declare const createRegister: <TKey extends string, TComponent extends DialogComponent>(key: TKey, component: TComponent, options?: Partial<DialogRegistrationOptions>) => { [key in TKey]: DialogRegistrationValue<TKey, TComponent>; };
-import type { DialogComponent, DialogHostProps, DialogRegistrationOptions, DialogRegistrationValue } from './types.js';
+export declare const createRegister: <TKey extends string, TComponent extends DialogComponent>(key: TKey, component: TComponent, options?: Partial<DialogOptions>) => { [K in TKey]: DialogRegistrationValue<TComponent>; };
+import type { DialogComponent, DialogHostProps, DialogOptions, DialogRegistrationValue } from './types.js';
 declare const DialogHost: import("svelte").Component<DialogHostProps, {}, "">;
 type DialogHost = ReturnType<typeof DialogHost>;
 export default DialogHost;

package/dist/components/dialog/index.d.ts

@@ -2,4 +2,4 @@ export * as DialogPrimitive from './exports-primitive.js';
 export * as Dialog from './exports.js';
 export { useDialogItemContext } from './dialog-host-item.svelte';
 export { dialogs } from './model/index.js';
-export type { DialogCloseProps, DialogContentProps, DialogOptions, DialogOverlayProps, DialogPortalProps, DialogPositionerProps, DialogRootProps, ExtractRegisterdDialogs, RegisteredDialogCollection, RegisteredDialogKeys, RegisteredDialogsOverride, WithDialogProps, } from './types.js';
+export type { DialogCloseProps, DialogContentProps, DialogCustomProps, DialogHandle, DialogOptions, DialogOverlayProps, DialogPortalProps, DialogPositionerProps, DialogRootProps, DialogRegistrationValue, ExtractRegisterdDialogs, InjectedDialogProps, RegisteredDialogCollection, RegisteredDialogKeys, RegisteredDialogsOverride, WithDialogProps, } from './types.js';

package/dist/components/dialog/model/dialog-manager.svelte.d.ts

@@ -1,7 +1,6 @@
 import { Context } from 'runed';
-import { type ComponentProps } from 'svelte';
 import { type ReadableBoxedValues } from 'svelte-toolbelt';
-import type { CloseDialogCommandPayload, DialogComponent, DialogItemState, DialogRegistrationValue, OpenDialogCommandPayload, OpenRegisteredDialogCommandPayload, RegisteredDialogCollection, RegisteredDialogKeys } from '../types.js';
+import type { CloseDialogCommandPayload, DialogComponent, DialogHandle, DialogItemState, DialogOptions, DialogRegistrationValue, OpenDialogCommandPayload, OpenRegisteredDialogCommandPayload, RegisteredDialogKeys } from '../types.js';
 export declare const DialogManagerContext: Context<DialogManagerState>;
 type DialogManagerOpts = ReadableBoxedValues<{
     register: Record<string, DialogRegistrationValue>;
@@ -15,14 +14,21 @@ export declare class DialogManagerState {
     get dialogs(): DialogItemState[];
     set dialogs(value: DialogItemState[]);
 }
-declare function openRegistered<TKey extends RegisteredDialogKeys = RegisteredDialogKeys, TProps extends ComponentProps<RegisteredDialogCollection[TKey]> = ComponentProps<RegisteredDialogCollection[TKey]>>(payload: OpenRegisteredDialogCommandPayload<TKey, TProps>): string;
-declare function open<TComponent extends DialogComponent>(payload: OpenDialogCommandPayload<TComponent>): string;
+declare function openRegistered<TKey extends RegisteredDialogKeys>(key: TKey, payload: OpenRegisteredDialogCommandPayload<TKey>): DialogHandle;
+declare function open<TComponent extends DialogComponent>(payload: OpenDialogCommandPayload<TComponent>): DialogHandle;
 declare function close(payload: CloseDialogCommandPayload): void;
 declare function closeAll(): void;
+declare function update(payload: {
+    id: string;
+}, fn: (currentProps: Record<string, unknown>, currentOptions: Partial<DialogOptions>) => {
+    props: Record<string, unknown>;
+    options: Partial<DialogOptions>;
+}): void;
 export declare const dialogs: {
     openRegistered: typeof openRegistered;
     open: typeof open;
     close: typeof close;
     closeAll: typeof closeAll;
+    update: typeof update;
 };
 export {};

package/dist/components/dialog/model/dialog-manager.svelte.js

@@ -27,6 +27,7 @@ export class DialogManagerState {
             'dialog:open': (event) => this.#handleOpen(event.detail),
             'dialog:close': (event) => this.#handleClose(event.detail),
             'dialog:closeAll': () => this.#handleCloseAll(),
+            'dialog:update': (event) => this.#updateDialog(event.detail.id, event.detail.fn),
         });
     }
     #updateDialog(id, fn) {
@@ -56,7 +57,7 @@ export class DialogManagerState {
             component: component,
             props: componentProps,
             id,
-            close: () => close({ id }),
+            close: (canceled) => close({ id, canceled }),
             update: (fn) => {
                 this.#updateDialog(id, fn);
             },
@@ -76,7 +77,7 @@ export class DialogManagerState {
             component: component,
             props: componentProps,
             id,
-            close: () => close({ id }),
+            close: (canceled) => close({ id, canceled }),
             update: (fn) => {
                 this.#updateDialog(id, fn);
             },
@@ -86,7 +87,9 @@ export class DialogManagerState {
         this.dialogs = [...this.dialogs.map((d) => ({ ...d, open: false })), state];
     }
     #handleClose(payload) {
-        const { id } = payload;
+        const { id, canceled = true } = payload;
+        // Find the dialog to get its onClose callback
+        const closingDialog = this.#dialogs.find((d) => d.id === id);
         for (let i = this.#dialogs.length - 1; i >= 0; i--) {
             const dialog = this.#dialogs[i];
             if (!dialog)
@@ -100,6 +103,8 @@ export class DialogManagerState {
                 break;
             }
         }
+        // Call onClose callback with canceled flag
+        closingDialog?.options.onClose?.(canceled);
         setTimeout(() => {
             this.dialogs = this.dialogs.filter((d) => d.id !== id);
         }, 150);
@@ -117,8 +122,15 @@ export class DialogManagerState {
         this.#dialogs = value;
     }
 }
-function openRegistered(payload) {
-    const { key, props, options } = payload;
+function createHandle(id) {
+    return {
+        id,
+        close: (canceled) => close({ id, canceled }),
+        update: (fn) => update({ id }, fn),
+    };
+}
+function openRegistered(key, payload) {
+    const { props, options } = payload;
     const id = useId();
     Dispatcher.dispatch('dialog:openRegistered', {
         key,
@@ -126,7 +138,7 @@ function openRegistered(payload) {
         id,
         options,
     });
-    return id;
+    return createHandle(id);
 }
 function open(payload) {
     const { component, props, options } = payload;
@@ -137,18 +149,22 @@ function open(payload) {
         options,
         id,
     });
-    return id;
+    return createHandle(id);
 }
 function close(payload) {
-    const { id } = payload;
-    Dispatcher.dispatch('dialog:close', { id });
+    const { id, canceled } = payload;
+    Dispatcher.dispatch('dialog:close', { id, canceled });
 }
 function closeAll() {
     Dispatcher.dispatch('dialog:closeAll');
 }
+function update(payload, fn) {
+    Dispatcher.dispatch('dialog:update', { id: payload.id, fn });
+}
 export const dialogs = {
     openRegistered,
     open,
     close,
     closeAll,
+    update,
 };

package/dist/components/dialog/styles.js

@@ -17,7 +17,7 @@ export const dialogOverlayStyles = tv({
     base: [
         'cgui:pointer-events-none cgui:fixed cgui:top-0 cgui:left-0 cgui:z-(--z-index-dialog) cgui:overflow-hidden',
         'cgui:size-full',
-        'cgui:bg-black/50',
+        'cgui:bg-neutral-100/50',
         'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0',
     ],
 });

package/dist/components/dialog/types.d.ts

@@ -1,4 +1,3 @@
-import type { Fn } from '../../internal/types/common.js';
 import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
 import type { DialogCloseProps as DialogClosePropsPrimitive, DialogContentProps as DialogContentPropsPrimitive, DialogOverlayProps as DialogOverlayPropsPrimitive, DialogPortalProps as DialogPortalPropsPrimitive, DialogRootProps as DialogRootPropsPrimitive } from 'bits-ui';
 import type { Component, ComponentProps } from 'svelte';
@@ -18,19 +17,16 @@ export type DialogComponent = Component<any>;
 export interface RegisteredDialogsOverride {
 }
 export type RegisteredDialogCollectionOverwritten = keyof RegisteredDialogsOverride extends never ? {
-    dialogs: Record<string, DialogComponent>;
+    dialogs: Record<string, DialogRegistrationValue>;
 } : RegisteredDialogsOverride;
 export type RegisteredDialogCollection = RegisteredDialogCollectionOverwritten['dialogs'];
 export type RegisteredDialogKeys = keyof RegisteredDialogCollectionOverwritten['dialogs'];
-export type DialogRegistrationValue<TKey extends string = string, TComponent extends DialogComponent = DialogComponent> = {
-    key: TKey;
+export type DialogRegistrationValue<TComponent extends DialogComponent = DialogComponent> = {
     component: TComponent;
-    options?: Partial<DialogRegistrationOptions>;
-};
-export type DialogRegistrationOptions = {
-    escapeKeydownBehavior?: DialogContentProps['escapeKeydownBehavior'];
-    interactOutsideBehavior?: DialogContentProps['interactOutsideBehavior'];
+    options?: Partial<DialogOptions>;
 };
+/** Extract custom props from a dialog component (omit injected ctx) */
+export type DialogCustomProps<T extends Component<any>> = Omit<ComponentProps<T>, 'ctx'>;
 export type DialogOptions = Omit<DialogRootProps, 'open' | 'onOpenChangeComplete' | 'children'> & {
     withOverlay?: boolean;
     escapeKeydownBehavior?: Extract<DialogContentProps['escapeKeydownBehavior'], 'close' | 'ignore'>;
@@ -41,6 +37,8 @@ export type DialogOptions = Omit<DialogRootProps, 'open' | 'onOpenChangeComplete
     contentProps?: Partial<Omit<DialogContentProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
     positionerProps?: Partial<Omit<DialogPositionerProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
     overlayProps?: Partial<Omit<DialogOverlayProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
+    /** Called when dialog closes. `canceled: true` means user dismissed (escape, click outside, cancel button) */
+    onClose?: (canceled: boolean) => void;
 };
 export type DialogItemState = {
     id: string;
@@ -52,29 +50,45 @@ export type DialogItemState = {
         props: Record<string, unknown>;
         options: Partial<DialogOptions>;
     }) => void;
-    close: Fn;
+    close: (canceled?: boolean) => void;
 };
-export type OpenRegisteredDialogPayload<TKey extends RegisteredDialogKeys = RegisteredDialogKeys, TProps extends ComponentProps<RegisteredDialogCollection[TKey]> = ComponentProps<RegisteredDialogCollection[TKey]>> = {
+export type OpenRegisteredDialogPayload<TKey extends RegisteredDialogKeys = RegisteredDialogKeys> = {
     key: TKey;
-    props: TProps;
+    props: DialogCustomProps<RegisteredDialogCollection[TKey]['component']>;
     options?: Partial<DialogOptions>;
 };
-export type OpenRegisteredDialogCommandPayload<TKey extends RegisteredDialogKeys = RegisteredDialogKeys, TProps extends ComponentProps<RegisteredDialogCollection[TKey]> = ComponentProps<RegisteredDialogCollection[TKey]>> = {
-    key: TKey;
-    props: Omit<TProps, 'id'>;
+export type OpenRegisteredDialogCommandPayload<TKey extends RegisteredDialogKeys = RegisteredDialogKeys> = {
+    props: DialogCustomProps<RegisteredDialogCollection[TKey]['component']>;
     options?: Partial<DialogOptions>;
 };
 export type OpenDialogCommandPayload<TComponent extends DialogComponent = DialogComponent> = {
     component: TComponent;
-    props: Omit<ComponentProps<TComponent>, 'id'>;
+    props: DialogCustomProps<TComponent>;
     options?: Partial<DialogOptions>;
 };
 export type CloseDialogCommandPayload = {
     id: string;
+    canceled?: boolean;
 };
-export type WithDialogProps<T extends Record<string, unknown>> = {
+export type InjectedDialogProps = {
     id: string;
+    close: (canceled?: boolean) => void;
+    update: (fn: (currentProps: Record<string, unknown>, currentOptions: Partial<DialogOptions>) => {
+        props: Record<string, unknown>;
+        options: Partial<DialogOptions>;
+    }) => void;
+};
+export type WithDialogProps<T extends Record<string, unknown>> = {
+    ctx: InjectedDialogProps;
 } & T;
+export type DialogHandle = {
+    id: string;
+    close: (canceled?: boolean) => void;
+    update: (fn: (currentProps: Record<string, unknown>, currentOptions: Partial<DialogOptions>) => {
+        props: Record<string, unknown>;
+        options: Partial<DialogOptions>;
+    }) => void;
+};
 export type ExtractRegisterdDialogs<TData extends Record<string, DialogRegistrationValue>> = {
     [TKey in keyof TData]: TData[TKey]['component'];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.9.9",
+  "version": "1.10.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",