@casinogate/ui 1.5.5 → 1.6.0

package/dist/components/dialog/styles.js

@@ -0,0 +1,54 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const dialogPositionerStyles = tv({
+    base: [
+        'cgui:pointer-events-none cgui:fixed cgui:top-0 cgui:left-0 cgui:z-(--z-index-dialog) cgui:overflow-hidden',
+        'cgui:flex cgui:flex-col cgui:size-full',
+    ],
+    variants: {
+        align: {
+            center: ['cgui:items-center cgui:justify-center'],
+        },
+    },
+    defaultVariants: {
+        align: 'center',
+    },
+});
+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: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',
+    ],
+});
+export const dialogContentStyles = tv({
+    base: [
+        'cgui:z-(--z-index-dialog) cgui:outline-none cgui:overflow-hidden',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=open]:fade-in-0 cgui:data-[state=open]:slide-in-from-bottom-20',
+        'cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=closed]:slide-out-to-bottom-20',
+    ],
+    variants: {
+        variant: {
+            default: ['cgui:shadow-dialog cgui:bg-surface-white'],
+            clean: [],
+        },
+        rounded: {
+            default: ['cgui:rounded-md'],
+            sm: ['cgui:rounded-sm'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+            clean: [],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        rounded: 'default',
+    },
+});
+export const dialogCloseStyles = tv({
+    base: [
+        'cgui:flex cgui:cursor-pointer cgui:items-center cgui:justify-center',
+        'cgui:text-icon-regular cgui:disabled:cursor-not-allowed cgui:disabled:opacity-50',
+    ],
+});

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

@@ -0,0 +1,76 @@
+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';
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { DialogCloseVariants, DialogContentVariants, DialogOverlayVariants, DialogPositionerVariants } from './styles.js';
+export type DialogRootProps = DialogRootPropsPrimitive;
+export type DialogPortalProps = DialogPortalPropsPrimitive;
+export type DialogContentProps = DialogContentPropsPrimitive & DialogContentVariants;
+export type DialogOverlayProps = DialogOverlayPropsPrimitive & DialogOverlayVariants;
+type DialogPositionerPropsWithoutHTML = WithElementRef<WithChildren<{}>> & DialogPositionerVariants;
+export type DialogPositionerProps = DialogPositionerPropsWithoutHTML & Without<PrimitiveDivAttributes, DialogPositionerPropsWithoutHTML>;
+export type DialogCloseProps = DialogClosePropsPrimitive & DialogCloseVariants;
+export type DialogHostProps = {
+    register?: Record<string, DialogRegistrationValue>;
+};
+export type DialogComponent = Component<any>;
+export interface RegisteredDialogsOverride {
+}
+export type RegisteredDialogCollectionOverwritten = RegisteredDialogsOverride extends {
+    dialogs: Record<string, DialogComponent>;
+} ? RegisteredDialogsOverride : {
+    dialogs: Record<string, DialogComponent>;
+};
+export type RegisteredDialogCollection = RegisteredDialogCollectionOverwritten['dialogs'];
+export type RegisteredDialogKeys = keyof RegisteredDialogCollectionOverwritten['dialogs'];
+export type DialogRegistrationValue<TKey extends string = string, TComponent extends DialogComponent = DialogComponent> = {
+    key: TKey;
+    component: TComponent;
+    options?: Partial<DialogRegistrationOptions>;
+};
+export type DialogRegistrationOptions = {
+    escapeKeydownBehavior?: DialogContentProps['escapeKeydownBehavior'];
+    interactOutsideBehavior?: DialogContentProps['interactOutsideBehavior'];
+};
+export type DialogOptions = Omit<DialogRootProps, 'open' | 'onOpenChangeComplete' | 'children'> & {
+    escapeKeydownBehavior?: Extract<DialogContentProps['escapeKeydownBehavior'], 'close' | 'ignore'>;
+    interactOutsideBehavior?: Extract<DialogContentProps['interactOutsideBehavior'], 'close' | 'ignore'>;
+};
+export type DialogItemState = {
+    id: string;
+    open: boolean;
+    props: Record<string, unknown>;
+    component: DialogComponent;
+    options: Partial<DialogOptions>;
+    update: (fn: (currentProps: Record<string, unknown>, currentOptions: Partial<DialogOptions>) => {
+        props: Record<string, unknown>;
+        options: Partial<DialogOptions>;
+    }) => void;
+    close: Fn;
+};
+export type OpenRegisteredDialogPayload<TKey extends RegisteredDialogKeys = RegisteredDialogKeys, TProps extends ComponentProps<RegisteredDialogCollection[TKey]> = ComponentProps<RegisteredDialogCollection[TKey]>> = {
+    key: TKey;
+    props: TProps;
+    options?: Partial<DialogOptions>;
+};
+export type OpenRegisteredDialogCommandPayload<TKey extends RegisteredDialogKeys = RegisteredDialogKeys, TProps extends ComponentProps<RegisteredDialogCollection[TKey]> = ComponentProps<RegisteredDialogCollection[TKey]>> = {
+    key: TKey;
+    props: Omit<TProps, 'id'>;
+    options?: Partial<DialogOptions>;
+};
+export type OpenDialogCommandPayload<TComponent extends DialogComponent = DialogComponent> = {
+    component: TComponent;
+    props: Omit<ComponentProps<TComponent>, 'id'>;
+    options?: Partial<DialogOptions>;
+};
+export type CloseDialogCommandPayload = {
+    id: string;
+};
+export type RegistereDialogProps<T extends Record<string, unknown>> = {
+    id: string;
+} & T;
+export type ExtractRegisterdDialogs<TData extends Record<string, DialogRegistrationValue>> = {
+    [TKey in keyof TData]: TData[TKey]['component'];
+};
+export {};

package/dist/components/dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/icons/cross.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
+  <path
+    d="M17.6346 8.05809L13.6926 12L17.6346 15.9419C17.7489 16.0523 17.8401 16.1844 17.9028 16.3305C17.9655 16.4765 17.9986 16.6336 18 16.7925C18.0013 16.9515 17.971 17.1091 17.9109 17.2562C17.8507 17.4033 17.7618 17.537 17.6494 17.6494C17.537 17.7618 17.4033 17.8507 17.2562 17.9109C17.1091 17.971 16.9515 18.0013 16.7925 18C16.6336 17.9986 16.4765 17.9655 16.3305 17.9028C16.1844 17.8401 16.0523 17.7489 15.9419 17.6346L12 13.6926L8.05809 17.6346C7.94766 17.7489 7.81557 17.8401 7.66953 17.9028C7.52348 17.9655 7.3664 17.9986 7.20746 18C7.04852 18.0013 6.89089 17.971 6.74377 17.9109C6.59666 17.8507 6.463 17.7618 6.35061 17.6494C6.23821 17.537 6.14933 17.4033 6.08914 17.2562C6.02895 17.1091 5.99866 16.9515 6.00005 16.7925C6.00143 16.6336 6.03445 16.4765 6.09719 16.3305C6.15992 16.1844 6.25112 16.0523 6.36545 15.9419L10.3074 12L6.36545 8.05809C6.25112 7.94766 6.15992 7.81557 6.09719 7.66953C6.03445 7.52348 6.00143 7.3664 6.00005 7.20746C5.99866 7.04852 6.02895 6.89089 6.08914 6.74377C6.14933 6.59666 6.23821 6.463 6.35061 6.35061C6.463 6.23821 6.59666 6.14933 6.74377 6.08914C6.89089 6.02895 7.04852 5.99866 7.20746 6.00005C7.3664 6.00143 7.52348 6.03445 7.66953 6.09719C7.81557 6.15992 7.94766 6.25112 8.05809 6.36545L12 10.3074L15.9419 6.36545C16.0523 6.25112 16.1844 6.15992 16.3305 6.09719C16.4765 6.03445 16.6336 6.00143 16.7925 6.00005C16.9515 5.99866 17.1091 6.02895 17.2562 6.08914C17.4033 6.14933 17.537 6.23821 17.6494 6.35061C17.7618 6.463 17.8507 6.59666 17.9109 6.74377C17.971 6.89089 18.0013 7.04852 18 7.20746C17.9986 7.3664 17.9655 7.52348 17.9028 7.66953C17.8401 7.81557 17.7489 7.94766 17.6346 8.05809Z"
+    fill={color}
+  />
+</svg>

package/dist/components/icons/cross.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Cross: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type Cross = ReturnType<typeof Cross>;
+export default Cross;

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

@@ -11,6 +11,7 @@ export { default as ChevronSmallLeft } from './chevron-small-left.svelte';
 export { default as ChevronSmallRight } from './chevron-small-right.svelte';
 export { default as ChevronSmallUp } from './chevron-small-up.svelte';
 export { default as ChevronUp } from './chevron-up.svelte';
+export { default as Cross } from './cross.svelte';
 export { default as Dots } from './dots.svelte';
 export { default as Error } from './error.svelte';
 export { default as EyeCrossed } from './eye-crossed.svelte';

package/dist/components/icons/exports.js

@@ -11,6 +11,7 @@ export { default as ChevronSmallLeft } from './chevron-small-left.svelte';
 export { default as ChevronSmallRight } from './chevron-small-right.svelte';
 export { default as ChevronSmallUp } from './chevron-small-up.svelte';
 export { default as ChevronUp } from './chevron-up.svelte';
+export { default as Cross } from './cross.svelte';
 export { default as Dots } from './dots.svelte';
 export { default as Error } from './error.svelte';
 export { default as EyeCrossed } from './eye-crossed.svelte';

package/dist/components/icons/sort.svelte

@@ -4,7 +4,7 @@
   let { width = 17, height = 16, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" width={width} height={height} {...props}>
+<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M11.1452 5.90609L9.92195 4.11401L9.17504 3.01419C8.85875 2.55082 8.34429 2.55082 8.028 3.01419L6.05402 5.90609C5.79489 6.28572 5.98161 6.93333 6.34364 6.93333H10.8556C11.2214 6.93333 11.4043 6.28572 11.1452 5.90609Z"
     fill={color}

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './collapsible/index.js';
 export * from './data-table/index.js';
+export * from './dialog/index.js';
 export * from './field/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';

package/dist/components/index.js

@@ -5,6 +5,7 @@ export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './collapsible/index.js';
 export * from './data-table/index.js';
+export * from './dialog/index.js';
 export * from './field/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';

package/dist/components/input-group/components/input-group.root.svelte.d.ts

@@ -0,0 +1,26 @@
+export default InputGroup;
+type InputGroup = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const InputGroup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/input-group/exports-primitive.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/input-group/exports-primitive.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/input-group/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/input-group/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/input-group/styles.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/input-group/styles.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/input-group/types.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/input-group/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -1,3 +1,3 @@
 export * as SelectPrimitive from './exports-primitive.js';
 export * as Select from './exports.js';
-export type { SelectAsyncCallback, SelectAsyncCallbackParams, SelectAsyncCallbackResult, SelectAsyncProps, SelectContentProps, SelectGroupHeadingProps, SelectGroupProps, SelectItem, SelectItemData, SelectItemGroup, SelectItemProps, SelectRootProps, SelectTriggerProps, SelectViewportProps, } from './types.js';
+export type { SelectAsyncCallback, SelectAsyncCallbackParams, SelectAsyncCallbackResult, SelectAsyncProps, SelectBaseItem, SelectContentProps, SelectData, SelectGroupHeadingProps, SelectGroupProps, SelectItem, SelectItemData, SelectItemGroup, SelectItemProps, SelectPortalProps, SelectProps, SelectRootProps, SelectTriggerProps, SelectViewportProps, } from './types.js';

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './components/index.js';
+export * from './internal/index.js';

package/dist/index.js

@@ -1 +1,2 @@
 export * from './components/index.js';
+export * from './internal/index.js';

package/dist/internal/index.d.ts

@@ -0,0 +1 @@
+export * from './utils/index.js';

package/dist/internal/index.js

@@ -0,0 +1 @@
+export * from './utils/index.js';

package/dist/internal/types/common.d.ts

@@ -1,7 +1,7 @@
 import type { attachRef } from 'svelte-toolbelt';
 export type Without<T extends object, U extends object> = Omit<T, keyof U>;
 export type Arrayable<T> = T[] | T;
-export type Fn = () => void;
+export type Fn<TArgs extends any[] = any[], TReturn = void> = (...args: TArgs) => TReturn;
 export type AnyFn = (...args: any[]) => any;
 export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 interface DecrementMap {

package/dist/internal/utils/attrs.d.ts

@@ -2,3 +2,4 @@ export declare function getDataDisabled(condition: boolean): '' | undefined;
 export declare function getDataActive(condition: boolean): '' | undefined;
 export declare function getDataIsResizing(condition: boolean): '' | undefined;
 export declare function boolAttr(condition: boolean): '' | undefined;
+export declare function getDataOpenState(condition: boolean): string;

package/dist/internal/utils/attrs.js

@@ -10,3 +10,6 @@ export function getDataIsResizing(condition) {
 export function boolAttr(condition) {
     return condition ? '' : undefined;
 }
+export function getDataOpenState(condition) {
+    return condition ? 'open' : 'closed';
+}

package/dist/internal/utils/event-dispatcher.d.ts

@@ -0,0 +1,12 @@
+export declare class EventDispatcher<TEventMap extends Record<string, any>> {
+    private target;
+    constructor(target?: EventTarget);
+    dispatch<K extends keyof TEventMap>(type: K, ...[detail]: TEventMap[K] extends void ? [] : [detail: TEventMap[K]]): boolean;
+    on<K extends keyof TEventMap>(type: K, listener: (event: CustomEvent<TEventMap[K]>) => void, options?: AddEventListenerOptions): () => void;
+    off<K extends keyof TEventMap>(type: K, listener: EventListenerOrEventListenerObject, options?: EventListenerOptions): void;
+    once<K extends keyof TEventMap>(type: K, listener: (event: CustomEvent<TEventMap[K]>) => void): () => void;
+    wait<K extends keyof TEventMap>(type: K, timeout?: number): Promise<TEventMap[K]>;
+    subscribe<K extends keyof TEventMap>(listeners: Partial<{
+        [K in keyof TEventMap]: (event: CustomEvent<TEventMap[K]>) => void;
+    }>): () => void;
+}

package/dist/internal/utils/event-dispatcher.js

@@ -0,0 +1,50 @@
+export class EventDispatcher {
+    target;
+    constructor(target) {
+        if (typeof window === 'undefined') {
+            this.target = new EventTarget();
+        }
+        else {
+            this.target = target || window;
+        }
+    }
+    dispatch(type, ...[detail]) {
+        const event = new CustomEvent(type, {
+            detail,
+        });
+        return this.target.dispatchEvent(event);
+    }
+    on(type, listener, options) {
+        const wrappedListener = (event) => {
+            listener(event);
+        };
+        this.target.addEventListener(type, wrappedListener, options);
+        return () => this.off(type, wrappedListener);
+    }
+    off(type, listener, options) {
+        this.target.removeEventListener(type, listener, options);
+    }
+    once(type, listener) {
+        return this.on(type, listener, { once: true });
+    }
+    async wait(type, timeout) {
+        return new Promise((resolve, reject) => {
+            let timeoutId;
+            const cleanup = this.once(type, (event) => {
+                if (timeoutId)
+                    clearTimeout(timeoutId);
+                resolve(event.detail);
+            });
+            if (timeout) {
+                timeoutId = setTimeout(() => {
+                    cleanup();
+                    reject(new Error(`Event ${String(type)} timeout after ${timeout}ms`));
+                }, timeout);
+            }
+        });
+    }
+    subscribe(listeners) {
+        const cleanupFns = Object.entries(listeners).map(([type, listener]) => this.on(type, listener));
+        return () => cleanupFns.forEach((cleanup) => cleanup());
+    }
+}

package/dist/internal/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { EventDispatcher } from './event-dispatcher.js';
+export { renderComponent, RenderComponentConfig, renderSnippet, RenderSnippetConfig } from './render.js';

package/dist/internal/utils/index.js

@@ -0,0 +1,2 @@
+export { EventDispatcher } from './event-dispatcher.js';
+export { renderComponent, RenderComponentConfig, renderSnippet, RenderSnippetConfig } from './render.js';

package/dist/internal/utils/render.d.ts

@@ -0,0 +1,13 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props: ComponentProps<TComponent> | Record<string, never>;
+    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
+}
+export declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps;
+    constructor(snippet: Snippet<[TProps]>, params: TProps);
+}
+export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
+export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/internal/utils/render.js

@@ -0,0 +1,22 @@
+export class RenderComponentConfig {
+    component;
+    props;
+    constructor(component, props = {}) {
+        this.component = component;
+        this.props = props;
+    }
+}
+export class RenderSnippetConfig {
+    snippet;
+    params;
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
+export function renderComponent(component, props = {}) {
+    return new RenderComponentConfig(component, props);
+}
+export function renderSnippet(snippet, params = {}) {
+    return new RenderSnippetConfig(snippet, params);
+}

package/package.json

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