@casinogate/ui 1.5.6 → 1.6.1

package/dist/components/dialog/components/dialog.root.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { boxWith } from 'svelte-toolbelt';
+  import type { DialogRootProps } from '../types.js';
+  import { DialogRootState } from './dialog.svelte.js';
+
+  let { open = $bindable(false), children, ...restProps }: DialogRootProps = $props();
+
+  const rootState = DialogRootState.create({
+    open: boxWith(
+      () => open,
+      (v) => {
+        open = v;
+      }
+    ),
+  });
+</script>
+
+<DialogPrimitive.Root bind:open={rootState.opts.open.current} {...restProps}>
+  {@render children?.()}
+</DialogPrimitive.Root>

package/dist/components/dialog/components/dialog.root.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Dialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

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

@@ -0,0 +1,46 @@
+import type { RefAttachment } from '../../../internal/types/common.js';
+import { type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
+type DialogRootStateOpts = WritableBoxedValues<{
+    open: boolean;
+}>;
+export declare class DialogRootState {
+    static create(opts: DialogRootStateOpts): DialogRootState;
+    readonly opts: DialogRootStateOpts;
+    constructor(opts: DialogRootStateOpts);
+}
+type DialogContentStateOpts = WithRefProps<{}>;
+export declare class DialogContentState {
+    static create(opts: DialogContentStateOpts): DialogContentState;
+    readonly opts: DialogContentStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: DialogContentStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "content";
+    };
+}
+type DialogOverlayStateOpts = WithRefProps<{}>;
+export declare class DialogOverlayState {
+    static create(opts: DialogOverlayStateOpts): DialogOverlayState;
+    readonly opts: DialogOverlayStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: DialogOverlayStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "overlay";
+    };
+}
+type DialogPositionerStateOpts = WithRefProps<{}>;
+export declare class DialogPositionerState {
+    static create(opts: DialogPositionerStateOpts): DialogPositionerState;
+    readonly opts: DialogPositionerStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: DialogRootState;
+    constructor(opts: DialogPositionerStateOpts, root: DialogRootState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "positioner";
+        readonly 'data-state': string;
+    };
+}
+export {};

package/dist/components/dialog/components/dialog.svelte.js

@@ -0,0 +1,72 @@
+import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+import { getDataOpenState } from '../../../internal/utils/attrs.js';
+import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { Context } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
+const DialogRootContext = new Context(keyWithPrefix('dialog-root'));
+const SLOT_ATTR_VALUES = {
+    content: 'content',
+    overlay: 'overlay',
+    positioner: 'positioner',
+    close: 'close',
+};
+export class DialogRootState {
+    static create(opts) {
+        return DialogRootContext.set(new DialogRootState(opts));
+    }
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+    }
+}
+export class DialogContentState {
+    static create(opts) {
+        return new DialogContentState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.content,
+        ...this.attachment,
+    }));
+}
+export class DialogOverlayState {
+    static create(opts) {
+        return new DialogOverlayState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.overlay,
+        ...this.attachment,
+    }));
+}
+export class DialogPositionerState {
+    static create(opts) {
+        return new DialogPositionerState(opts, DialogRootContext.get());
+    }
+    opts;
+    attachment;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+        this.root = root;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.positioner,
+        'data-state': getDataOpenState(this.root.opts.open.current),
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  import { Context, watch } from 'runed';
+
+  const DialogItemContext = new Context<Omit<DialogItemState, 'component'>>('dialog-item');
+
+  export const useDialogItemContext = () => DialogItemContext.get();
+</script>
+
+<script lang="ts">
+  import Content from './components/dialog.content.svelte';
+  import Overlay from './components/dialog.overlay.svelte';
+  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';
+
+  let { component, props: dialogProps, options, open, id, close, update }: DialogItemState = $props();
+
+  const { interactOutsideBehavior = 'close', escapeKeydownBehavior = 'close', onOpenChange, ...restOptions } = options;
+  const Component = $derived(component);
+  const contentProps = $derived({
+    interactOutsideBehavior,
+    escapeKeydownBehavior,
+  });
+
+  DialogItemContext.set({
+    props: dialogProps,
+    options,
+    open,
+    id,
+    update,
+    close,
+  });
+
+  watch(
+    () => open,
+    () => {
+      onOpenChange?.(open);
+    }
+  );
+</script>
+
+<Root
+  {...restOptions}
+  bind:open={
+    () => open,
+    (v) => {
+      open = v;
+      close();
+    }
+  }
+>
+  <Portal>
+    <Overlay />
+    <Positioner>
+      <Content {...contentProps}>
+        <Component {...dialogProps} />
+      </Content>
+    </Positioner>
+  </Portal>
+</Root>

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

@@ -0,0 +1,5 @@
+export declare const useDialogItemContext: () => Omit<DialogItemState, "component">;
+import type { DialogItemState } from './types.js';
+declare const DialogHostItem: import("svelte").Component<DialogItemState, {}, "">;
+type DialogHostItem = ReturnType<typeof DialogHostItem>;
+export default DialogHostItem;

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

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  export const createRegister = <TKey extends string, TComponent extends DialogComponent>(
+    key: TKey,
+    component: TComponent,
+    options?: Partial<DialogRegistrationOptions>
+  ): { [key in TKey]: DialogRegistrationValue<TKey, TComponent> } => {
+    return {
+      [key]: {
+        key: key,
+        component,
+        options,
+      },
+    } as { [key in TKey]: DialogRegistrationValue<TKey, TComponent> };
+  };
+</script>
+
+<script lang="ts">
+  import HostItem from './dialog-host-item.svelte';
+  import type {
+    DialogComponent,
+    DialogHostProps,
+    DialogRegistrationOptions,
+    DialogRegistrationValue,
+  } from './types.js';
+
+  import { boxWith } from 'svelte-toolbelt';
+  import { DialogManagerState } from './model/dialog-manager.svelte.js';
+
+  let { register = {} }: DialogHostProps = $props();
+
+  const managerState = DialogManagerState.create({
+    register: boxWith(() => register),
+  });
+</script>
+
+{#each managerState.dialogs as dialog (dialog.id)}
+  <HostItem {...dialog} />
+{/each}

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

@@ -0,0 +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';
+declare const DialogHost: import("svelte").Component<DialogHostProps, {}, "">;
+type DialogHost = ReturnType<typeof DialogHost>;
+export default DialogHost;

package/dist/components/dialog/dialog.stories.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" module>
+  import { Button } from '../button/index.js';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import { BasicDialog } from './_ui/basic-dialog/index.js';
+  import { NestedDialog } from './_ui/nested-dialog/index.js';
+  import DialogRoot from './components/dialog.root.svelte';
+  import DialogHost, { createRegister } from './dialog-host.svelte';
+  import { DialogPrimitive } from './index.js';
+  import { dialogs } from './model/dialog-manager.svelte.js';
+
+  const register = {
+    ...createRegister('basic', BasicDialog),
+    ...createRegister('nested', NestedDialog),
+  };
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['open'],
+    },
+
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Dialog',
+    component: DialogRoot,
+    // subcomponents: {
+    //   'dialog-host': DialogHost,
+    // },
+    tags: ['autodocs'],
+    parameters,
+    // argTypes: {
+    // open: {
+    //   table: {
+    //     defaultValue: { summary: 'false', detail: '$bindable(false)' },
+    //   },
+    // },
+    // },
+  });
+
+  type Args = ComponentProps<typeof DialogRoot>;
+
+  const args: Args = {
+    open: true,
+  };
+</script>
+
+<script lang="ts">
+  let basicOpen = $state(false);
+</script>
+
+<DialogHost {register} />
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:bg-bg-primary cgui:h-full cgui:w-full">
+      <Button onclick={() => (basicOpen = !basicOpen)}>Toggle</Button>
+
+      <DialogRoot {...args} bind:open={basicOpen}>
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay />
+
+          <DialogPrimitive.Positioner>
+            <DialogPrimitive.Content class="cgui:bg-surface-white cgui:size-40">
+              <DialogPrimitive.Close />
+
+              Content
+            </DialogPrimitive.Content>
+          </DialogPrimitive.Positioner>
+        </DialogPrimitive.Portal>
+      </DialogRoot>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Registered">
+  {#snippet template()}
+    <div class="cgui:bg-bg-primary cgui:h-full cgui:w-full cgui:flex cgui:items-center cgui:justify-center cgui:gap-4">
+      <Button
+        onclick={() =>
+          dialogs.openRegistered({
+            key: 'basic',
+            props: {
+              name: 'John Doe',
+            },
+            options: {
+              onOpenChange: (open) => {
+                console.log('OPEN CHANGE', open);
+              },
+            },
+          })}>Open</Button
+      >
+    </div>
+  {/snippet}
+</Story>

package/dist/components/dialog/dialog.stories.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Dialog: import("svelte").Component<Record<string, never>, {}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/dialog/exports-primitive.d.ts

@@ -0,0 +1,6 @@
+export { default as Close } from './components/dialog.close.svelte';
+export { default as Content } from './components/dialog.content.svelte';
+export { default as Overlay } from './components/dialog.overlay.svelte';
+export { default as Portal } from './components/dialog.portal.svelte';
+export { default as Positioner } from './components/dialog.positioner.svelte';
+export { default as Root } from './components/dialog.root.svelte';

package/dist/components/dialog/exports-primitive.js

@@ -0,0 +1,6 @@
+export { default as Close } from './components/dialog.close.svelte';
+export { default as Content } from './components/dialog.content.svelte';
+export { default as Overlay } from './components/dialog.overlay.svelte';
+export { default as Portal } from './components/dialog.portal.svelte';
+export { default as Positioner } from './components/dialog.positioner.svelte';
+export { default as Root } from './components/dialog.root.svelte';

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

@@ -0,0 +1 @@
+export { createRegister, default as Host } from './dialog-host.svelte';

package/dist/components/dialog/exports.js

@@ -0,0 +1 @@
+export { createRegister, default as Host } from './dialog-host.svelte';

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

@@ -0,0 +1,5 @@
+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, RegistereDialogProps, } from './types.js';

package/dist/components/dialog/index.js

@@ -0,0 +1,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';

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

@@ -0,0 +1,28 @@
+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';
+export declare const DialogManagerContext: Context<DialogManagerState>;
+type DialogManagerOpts = ReadableBoxedValues<{
+    register: Record<string, DialogRegistrationValue>;
+}>;
+export declare class DialogManagerState {
+    #private;
+    static create(opts: DialogManagerOpts): DialogManagerState;
+    readonly opts: DialogManagerOpts;
+    constructor(opts: DialogManagerOpts);
+    innerClose(payload: CloseDialogCommandPayload): void;
+    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 close(payload: CloseDialogCommandPayload): void;
+declare function closeAll(): void;
+export declare const dialogs: {
+    openRegistered: typeof openRegistered;
+    open: typeof open;
+    close: typeof close;
+    closeAll: typeof closeAll;
+};
+export {};

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

@@ -0,0 +1,156 @@
+import { EventDispatcher } from '../../../internal/index.js';
+import { keyWithPrefix, useId } from '../../../internal/utils/common.js';
+import { Context } from 'runed';
+import {} from 'svelte';
+import { mergeProps } from 'svelte-toolbelt';
+const Dispatcher = new EventDispatcher();
+export const DialogManagerContext = new Context(keyWithPrefix('dialog-manager'));
+export class DialogManagerState {
+    static create(opts) {
+        return DialogManagerContext.set(new DialogManagerState(opts));
+    }
+    #dialogs = $state([]);
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+        $effect(() => {
+            this.#subscribeToEvents();
+            return () => {
+                this.#unsubscribe?.();
+            };
+        });
+    }
+    #unsubscribe;
+    #subscribeToEvents() {
+        this.#unsubscribe = Dispatcher.subscribe({
+            'dialog:openRegistered': (event) => this.#handleOpenRegistered(event.detail),
+            'dialog:open': (event) => this.#handleOpen(event.detail),
+            'dialog:close': (event) => this.#handleClose(event.detail),
+            'dialog:closeAll': () => this.#handleCloseAll(),
+        });
+    }
+    #handleOpenRegistered(payload) {
+        const { key, props, options = {}, id } = payload;
+        const registeredValue = this.opts.register.current?.[key];
+        if (!registeredValue) {
+            throw new Error(`Dialog with key "${key}" is not registered`);
+        }
+        const { component, options: registeredOptions } = registeredValue;
+        const componentProps = {
+            id,
+            ...props,
+        };
+        const mergedOptions = mergeProps(registeredOptions, options);
+        const state = {
+            component: component,
+            props: componentProps,
+            id,
+            close: () => close({ id }),
+            update: (fn) => {
+                this.#updateDialog(id, fn);
+            },
+            options: mergedOptions,
+            open: true,
+        };
+        const newDialogs = [...this.#dialogs.map((d) => ({ ...d, open: false })), state];
+        this.dialogs = newDialogs;
+    }
+    #updateDialog(id, fn) {
+        const dialogIndex = this.#dialogs.findIndex((d) => d.id === id);
+        if (dialogIndex === -1)
+            return;
+        const currentDialog = this.#dialogs[dialogIndex];
+        if (!currentDialog)
+            return;
+        const { props: newProps, options: newOptions } = fn(currentDialog.props, currentDialog.options);
+        currentDialog.props = { id, ...newProps };
+        currentDialog.options = newOptions;
+    }
+    #handleOpen(payload) {
+        const { component, props, options = {}, id } = payload;
+        const componentProps = {
+            id,
+            ...props,
+        };
+        const state = {
+            component: component,
+            props: componentProps,
+            id,
+            close: () => close({ id }),
+            update: (fn) => {
+                this.#updateDialog(id, fn);
+            },
+            options,
+            open: true,
+        };
+        this.dialogs = [...this.dialogs.map((d) => ({ ...d, open: false })), state];
+    }
+    #handleClose(payload) {
+        const { id } = payload;
+        for (let i = this.#dialogs.length - 1; i >= 0; i--) {
+            const dialog = this.#dialogs[i];
+            console.log('dialog IDX', i);
+            if (!dialog)
+                continue;
+            if (dialog.id === id) {
+                dialog.open = false;
+                continue;
+            }
+            if (!dialog.open) {
+                dialog.open = true;
+                break;
+            }
+        }
+        setTimeout(() => {
+            console.log('afterTick');
+            this.dialogs = this.dialogs.filter((d) => d.id !== id);
+        }, 150);
+    }
+    #handleCloseAll() {
+        this.dialogs = [];
+    }
+    innerClose(payload) {
+        this.#handleClose(payload);
+    }
+    get dialogs() {
+        return this.#dialogs;
+    }
+    set dialogs(value) {
+        this.#dialogs = value;
+    }
+}
+function openRegistered(payload) {
+    const { key, props, options } = payload;
+    const id = useId();
+    Dispatcher.dispatch('dialog:openRegistered', {
+        key,
+        props,
+        id,
+        options,
+    });
+    return id;
+}
+function open(payload) {
+    const { component, props, options } = payload;
+    const id = useId();
+    Dispatcher.dispatch('dialog:open', {
+        component,
+        props,
+        options,
+        id,
+    });
+    return id;
+}
+function close(payload) {
+    const { id } = payload;
+    Dispatcher.dispatch('dialog:close', { id });
+}
+function closeAll() {
+    Dispatcher.dispatch('dialog:closeAll');
+}
+export const dialogs = {
+    openRegistered,
+    open,
+    close,
+    closeAll,
+};

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

@@ -0,0 +1 @@
+export { DialogManagerContext, DialogManagerState, dialogs } from './dialog-manager.svelte.js';

package/dist/components/dialog/model/index.js

@@ -0,0 +1 @@
+export { DialogManagerContext, DialogManagerState, dialogs } from './dialog-manager.svelte.js';

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

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const dialogPositionerStyles: import("tailwind-variants").TVReturnType<{
+    align: {
+        center: string[];
+    };
+}, undefined, string[], {
+    align: {
+        center: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        center: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dialogOverlayStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const dialogContentStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+        clean: never[];
+    };
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        clean: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        clean: never[];
+    };
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        clean: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+        clean: never[];
+    };
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        clean: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dialogCloseStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type DialogPositionerVariants = VariantProps<typeof dialogPositionerStyles>;
+export type DialogOverlayVariants = VariantProps<typeof dialogOverlayStyles>;
+export type DialogContentVariants = VariantProps<typeof dialogContentStyles>;
+export type DialogCloseVariants = VariantProps<typeof dialogCloseStyles>;