@casinogate/ui 1.11.14 → 2.0.1

package/dist/composed/data-table/styles.d.ts

@@ -0,0 +1,136 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+export type DataTableVariant = 'primary';
+export type DataTableAlign = 'start' | 'center' | 'end';
+export type DataTableRounded = 'sm' | 'md' | 'lg' | 'none';
+export type DataTableVariants = {
+    variant: DataTableVariant;
+    stripped: boolean;
+    align: DataTableAlign;
+    rounded: DataTableRounded;
+    resizable: boolean;
+};
+export type DataTableVariantsProps = Partial<DataTableVariants>;
+export declare const dataTableRootVariants: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        none: never[];
+    };
+}, undefined, string[], {
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        none: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        none: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dataTableTableVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const dataTableHeaderVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dataTableBodyVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+    };
+    stripped: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+    };
+    stripped: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+    };
+    stripped: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dataTableRowVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
+export declare const dataTableHeadVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        start: string[];
+        center: string[];
+        end: string[];
+    };
+    resizable: {
+        true: string[];
+    };
+}, undefined, string[], {
+    align: {
+        start: string[];
+        center: string[];
+        end: string[];
+    };
+    resizable: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        start: string[];
+        center: string[];
+        end: string[];
+    };
+    resizable: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dataTableCellVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        start: string[];
+        center: string[];
+        end: string[];
+    };
+}, undefined, string[], {
+    align: {
+        start: string[];
+        center: string[];
+        end: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        start: string[];
+        center: string[];
+        end: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dataTableSortButtonVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const dataTableResizeHandlerVariants: import("tailwind-variants").TVReturnType<{
+    resizable: {
+        true: string[];
+    };
+}, undefined, string[], {
+    resizable: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    resizable: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+type DataTableStylesContextValues = ReadableBox<DataTableVariants>;
+export declare const DataTableStylesContext: Context<DataTableStylesContextValues>;
+export {};

package/dist/composed/data-table/styles.js

@@ -0,0 +1,98 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const dataTableRootVariants = tv({
+    base: [
+        'cgui:flex cgui:flex-col',
+        'cgui:scrollbar-thin cgui:scrollbar-thumb-surface-regular cgui:scrollbar-track-surface-lightest cgui:scrollbar-thumb-rounded-full cgui:scrollbar-track-rounded-full',
+        'cgui:overflow-auto cgui:w-full',
+        'cgui:border cgui:border-stroke-divider',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+    ],
+    variants: {
+        rounded: {
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            none: [],
+        },
+    },
+});
+export const dataTableTableVariants = tv({
+    base: ['cgui:w-full', 'cgui:table-fixed'],
+});
+export const dataTableHeaderVariants = tv({
+    base: ['cgui:font-medium cgui:text-body-2 cgui:text-fg-darkest cgui:sticky cgui:z-1 cgui:top-0'],
+    variants: {
+        variant: {
+            primary: ['cgui:bg-surface-lightest'],
+        },
+    },
+});
+export const dataTableBodyVariants = tv({
+    base: [
+        'cgui:relative',
+        'cgui:text-body-2 cgui:text-fg-darkest',
+        'cgui:[&_tr:last-child]:border-0',
+        'cgui:[&_tr]:h-10',
+    ],
+    variants: {
+        variant: {
+            primary: ['cgui:[&_[data-slot=row]]:bg-neutral-0'],
+        },
+        stripped: {
+            true: ['cgui:[&_[data-slot=row]]:odd:bg-surface-white cgui:[&_[data-slot=row]]:even:bg-surface-lightest'],
+        },
+    },
+});
+export const dataTableRowVariants = tv({
+    base: [],
+});
+export const dataTableHeadVariants = tv({
+    base: ['cgui:h-12 cgui:relative cgui:px-2', 'cgui:whitespace-nowrap cgui:bg-clip-padding cgui:align-middle'],
+    variants: {
+        align: {
+            start: ['cgui:text-left'],
+            center: ['cgui:text-center'],
+            end: ['cgui:text-right'],
+        },
+        resizable: {
+            true: ['cgui:hover:[&_[data-slot=resize-handler]]:block'],
+        },
+    },
+});
+export const dataTableCellVariants = tv({
+    base: ['cgui:whitespace-nowrap cgui:bg-clip-padding cgui:p-2', 'cgui:font-normal cgui:align-middle', 'cgui:truncate'],
+    variants: {
+        align: {
+            start: ['cgui:text-left'],
+            center: ['cgui:text-center'],
+            end: ['cgui:text-right'],
+        },
+    },
+});
+export const dataTableSortButtonVariants = tv({
+    base: [
+        'cgui:absolute cgui:top-1/2 cgui:-translate-y-1/2 cgui:right-4',
+        'cgui:flex cgui:flex-col cgui:shrink-0 cgui:size-6 cgui:justify-center cgui:items-center cgui:text-icon-default',
+        'cgui:transition-all cgui:duration-200 cgui:ease-in-out',
+        'cgui:cursor-pointer cgui:select-none',
+        'cgui:[&_svg]:size-4 cgui:[&_svg]:transition-all cgui:[&_svg]:duration-200 cgui:[&_svg]:ease-in-out',
+        'cgui:data-[direction=asc]:[&_[data-direction=asc]]:text-icon-regular',
+        'cgui:data-[direction=desc]:[&_[data-direction=desc]]:text-icon-regular',
+    ],
+});
+export const dataTableResizeHandlerVariants = tv({
+    base: [
+        'cgui:absolute cgui:hidden cgui:top-0 cgui:right-0 cgui:w-1.5 cgui:h-full',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:bg-neutral-40/50',
+        'cgui:cursor-col-resize cgui:select-none cgui:touch-none',
+    ],
+    variants: {
+        resizable: {
+            true: ['cgui:hover:bg-surface-primary-active'],
+        },
+    },
+});
+export const DataTableStylesContext = new Context(keyWithPrefix('data-table-styles'));

package/dist/composed/data-table/types.d.ts

@@ -0,0 +1,40 @@
+import type { CreateTableReturn } from './models/create-table.svelte.js';
+import type { DataTableVariantsProps } from './styles.js';
+import type { PrimitiveButtonAttributes, PrimitiveDivAttributes, PrimitiveTableAttributes, PrimitiveTdAttributes } from '../../internal/types/html-attributes.js';
+import type { Cell, ColumnDef as ColumnDefPrimitive, Header, RowData as RowDataPrimitive } from '@tanstack/table-core';
+import type { Snippet } from 'svelte';
+import type { WithChild, WithChildren, WithElementRef, Without, WithoutChildren } from 'svelte-toolbelt';
+export type ColumnDef<TData extends RowData> = ColumnDefPrimitive<TData>;
+export type RowData = RowDataPrimitive;
+type DataTableRootPropsWithoutHTML<TData extends RowData> = WithElementRef<WithChildren<{
+    table: CreateTableReturn<TData>;
+}>> & DataTableVariantsProps;
+export type DataTableRootProps<TData extends RowData> = DataTableRootPropsWithoutHTML<TData> & Without<PrimitiveDivAttributes, DataTableRootPropsWithoutHTML<TData>>;
+type DataTableBodyPropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type DataTableBodyProps = DataTableBodyPropsWithoutHTML & Without<PrimitiveDivAttributes, DataTableBodyPropsWithoutHTML>;
+type DataTableCellPropsWithoutHTML = WithElementRef<WithChildren<{
+    cell: Cell<any, unknown> | null;
+    depth?: number;
+}>>;
+export type DataTableCellProps = DataTableCellPropsWithoutHTML & Without<PrimitiveTdAttributes, DataTableCellPropsWithoutHTML>;
+type DataTableHeadPropsWithoutHTML = WithElementRef<WithChildren<{
+    header: Header<any, unknown>;
+}>>;
+export type DataTableHeadProps = DataTableHeadPropsWithoutHTML & Without<PrimitiveDivAttributes, DataTableHeadPropsWithoutHTML>;
+type DataTableHeaderPropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type DataTableHeaderProps = DataTableHeaderPropsWithoutHTML & Without<PrimitiveDivAttributes, DataTableHeaderPropsWithoutHTML>;
+type DataTableResizeHandlerPropsWithoutHTML = WithElementRef<{}>;
+export type DataTableResizeHandlerProps = DataTableResizeHandlerPropsWithoutHTML & Without<PrimitiveDivAttributes, DataTableResizeHandlerPropsWithoutHTML>;
+type DataTableRowPropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type DataTableRowProps = DataTableRowPropsWithoutHTML & Without<PrimitiveDivAttributes, DataTableRowPropsWithoutHTML>;
+type DataTableSortButtonPropsWithoutHTML = WithElementRef<WithChild<{
+    direction?: 'asc' | 'desc' | null | undefined;
+}>>;
+export type DataTableSortButtonProps = DataTableSortButtonPropsWithoutHTML & Without<PrimitiveButtonAttributes, DataTableSortButtonPropsWithoutHTML>;
+type DataTableTablePropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type DataTableTableProps = DataTableTablePropsWithoutHTML & Without<PrimitiveTableAttributes, DataTableTablePropsWithoutHTML>;
+export type DataTableProps<TData extends RowData> = WithoutChildren<DataTableRootProps<TData>> & {
+    empty?: Snippet;
+    loading?: Snippet;
+};
+export {};

package/dist/composed/data-table/types.js

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

package/dist/composed/data-table/utils/expanded-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ExpandedState as ExpandedStateValue, Updater } from '@tanstack/table-core';
+type ExpandedStateOpts = {
+    defaultValue?: ExpandedStateValue;
+    onValueChange?: (value: ExpandedStateValue) => void;
+};
+export declare const useExpandedState: (opts?: ExpandedStateOpts) => {
+    value: ExpandedStateValue;
+    updater: (updater: Updater<ExpandedStateValue>) => void;
+};
+export {};

package/dist/composed/data-table/utils/expanded-state.svelte.js

@@ -0,0 +1,23 @@
+export const useExpandedState = (opts) => {
+    let value = $state(opts?.defaultValue ?? {});
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
+        },
+        updater: (updater) => {
+            let newExpandedState;
+            if (updater instanceof Function) {
+                newExpandedState = updater(value);
+            }
+            else {
+                newExpandedState = updater;
+            }
+            value = newExpandedState;
+            opts?.onValueChange?.(newExpandedState);
+        },
+    };
+};

package/dist/composed/data-table/utils/index.d.ts

@@ -0,0 +1,7 @@
+export { useExpandedState } from './expanded-state.svelte.js';
+export { usePaginationState } from './pagination-state.svelte.js';
+export { useResizeState } from './resize-state.svelte.js';
+export { rowModels } from './row-models.js';
+export { useRowSelectionState } from './row-selection-state.svelte.js';
+export { useSortState } from './use-sort-state.svelte.js';
+export { useVisibilityState } from './use-visibility-state.svelte.js';

package/dist/composed/data-table/utils/index.js

@@ -0,0 +1,7 @@
+export { useExpandedState } from './expanded-state.svelte.js';
+export { usePaginationState } from './pagination-state.svelte.js';
+export { useResizeState } from './resize-state.svelte.js';
+export { rowModels } from './row-models.js';
+export { useRowSelectionState } from './row-selection-state.svelte.js';
+export { useSortState } from './use-sort-state.svelte.js';
+export { useVisibilityState } from './use-visibility-state.svelte.js';

package/dist/composed/data-table/utils/pagination-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PaginationState as PaginationStateValue, Updater } from '@tanstack/table-core';
+type PaginationStateOpts = {
+    defaultValue?: PaginationStateValue;
+    onValueChange?: (value: PaginationStateValue) => void;
+};
+export declare const usePaginationState: (opts?: PaginationStateOpts) => {
+    value: PaginationStateValue;
+    updater: (updater: Updater<PaginationStateValue>) => void;
+};
+export {};

package/dist/composed/data-table/utils/pagination-state.svelte.js

@@ -0,0 +1,26 @@
+export const usePaginationState = (opts) => {
+    let value = $state({
+        pageIndex: opts?.defaultValue?.pageIndex ?? 0,
+        pageSize: opts?.defaultValue?.pageSize ?? 10,
+    });
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
+        },
+        updater: (updater) => {
+            let newPaginationState;
+            if (updater instanceof Function) {
+                newPaginationState = updater(value);
+            }
+            else {
+                newPaginationState = updater;
+            }
+            value = newPaginationState;
+            opts?.onValueChange?.(newPaginationState);
+        },
+    };
+};

package/dist/composed/data-table/utils/resize-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ColumnSizingState, Updater } from '@tanstack/table-core';
+type ResizeStateOpts = {
+    columnSizing?: ColumnSizingState;
+    onValueChange?: (value: ColumnSizingState) => void;
+};
+export declare const useResizeState: (opts?: ResizeStateOpts) => {
+    value: ColumnSizingState;
+    updater: (updater: Updater<ColumnSizingState>) => void;
+};
+export {};

package/dist/composed/data-table/utils/resize-state.svelte.js

@@ -0,0 +1,23 @@
+export const useResizeState = (opts) => {
+    let value = $state({});
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
+        },
+        updater: (updater) => {
+            let newColumnSizing;
+            if (updater instanceof Function) {
+                newColumnSizing = updater(value);
+            }
+            else {
+                newColumnSizing = updater;
+            }
+            value = newColumnSizing;
+            opts?.onValueChange?.(newColumnSizing);
+        },
+    };
+};

package/dist/composed/data-table/utils/row-models.d.ts

@@ -0,0 +1,9 @@
+import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/table-core';
+export declare const rowModels: {
+    coreRowModel: typeof getCoreRowModel;
+    paginationRowModel: typeof getPaginationRowModel;
+    sortedRowModel: typeof getSortedRowModel;
+    filteredRowModel: typeof getFilteredRowModel;
+    expandedRowModel: typeof getExpandedRowModel;
+    groupedRowModel: typeof getGroupedRowModel;
+};

package/dist/composed/data-table/utils/row-models.js

@@ -0,0 +1,9 @@
+import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, } from '@tanstack/table-core';
+export const rowModels = {
+    coreRowModel: getCoreRowModel,
+    paginationRowModel: getPaginationRowModel,
+    sortedRowModel: getSortedRowModel,
+    filteredRowModel: getFilteredRowModel,
+    expandedRowModel: getExpandedRowModel,
+    groupedRowModel: getGroupedRowModel,
+};

package/dist/composed/data-table/utils/row-selection-state.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { RowSelectionState as RowSelectionStateValue, Updater } from '@tanstack/table-core';
+type RowSelectionStateOpts = {
+    defaultValue?: RowSelectionStateValue;
+    onValueChange?: (value: RowSelectionStateValue) => void;
+};
+export declare const useRowSelectionState: (opts?: RowSelectionStateOpts) => {
+    value: RowSelectionStateValue;
+    updater: (updater: Updater<RowSelectionStateValue>) => void;
+};
+export {};

package/dist/composed/data-table/utils/row-selection-state.svelte.js

@@ -0,0 +1,23 @@
+export const useRowSelectionState = (opts) => {
+    let value = $state({});
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
+        },
+        updater: (updater) => {
+            let newRowSelection;
+            if (updater instanceof Function) {
+                newRowSelection = updater(value);
+            }
+            else {
+                newRowSelection = updater;
+            }
+            value = newRowSelection;
+            opts?.onValueChange?.(newRowSelection);
+        },
+    };
+};

package/dist/composed/data-table/utils/use-sort-state.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { OnChangeFn, SortingState } from '@tanstack/table-core';
+type Opts = {
+    defaultValue?: () => SortingState;
+    onValueChange?: (value: SortingState) => void;
+};
+declare class SortState {
+    #private;
+    constructor(opts?: Opts);
+    updater: OnChangeFn<SortingState>;
+    get dir(): "asc" | "desc" | null;
+    get field(): string | null;
+    get current(): SortingState;
+    set current(value: SortingState);
+}
+export declare const useSortState: (opts?: Opts) => SortState;
+export {};

package/dist/composed/data-table/utils/use-sort-state.svelte.js

@@ -0,0 +1,39 @@
+import { noop } from '../../../internal/utils/common.js';
+class SortState {
+    #current;
+    #onValueChange;
+    constructor(opts) {
+        this.#current = $state(opts?.defaultValue?.() ?? []);
+        this.#onValueChange = opts?.onValueChange ?? noop;
+    }
+    updater = (updater) => {
+        let newSort;
+        if (updater instanceof Function) {
+            newSort = updater(this.#current);
+        }
+        else {
+            newSort = updater;
+        }
+        this.current = newSort;
+        this.#onValueChange(newSort);
+    };
+    get dir() {
+        if (!this.#current?.[0])
+            return null;
+        return this.#current?.[0]?.desc ? 'desc' : 'asc';
+    }
+    get field() {
+        if (!this.#current?.[0])
+            return null;
+        return this.#current?.[0]?.id;
+    }
+    get current() {
+        return this.#current;
+    }
+    set current(value) {
+        this.#current = value;
+    }
+}
+export const useSortState = (opts) => {
+    return new SortState(opts);
+};

package/dist/composed/data-table/utils/use-visibility-state.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { OnChangeFn, VisibilityState as VisibilityStateType } from '@tanstack/table-core';
+type Opts = {
+    defaultValue?: () => VisibilityStateType;
+    onValueChange?: (value: VisibilityStateType) => void;
+};
+declare class VisibilityState {
+    #private;
+    constructor(opts?: Opts);
+    updater: OnChangeFn<VisibilityStateType>;
+    get current(): VisibilityStateType;
+    set current(value: VisibilityStateType);
+}
+export declare const useVisibilityState: (opts?: Opts) => VisibilityState;
+export {};

package/dist/composed/data-table/utils/use-visibility-state.svelte.js

@@ -0,0 +1,29 @@
+import { noop } from '../../../internal/utils/common.js';
+class VisibilityState {
+    #current;
+    #onValueChange;
+    constructor(opts) {
+        this.#current = $state(opts?.defaultValue?.() ?? {});
+        this.#onValueChange = opts?.onValueChange ?? noop;
+    }
+    updater = (updater) => {
+        let newVisibility;
+        if (updater instanceof Function) {
+            newVisibility = updater(this.#current);
+        }
+        else {
+            newVisibility = updater;
+        }
+        this.current = newVisibility;
+        this.#onValueChange(newVisibility);
+    };
+    get current() {
+        return this.#current;
+    }
+    set current(value) {
+        this.#current = value;
+    }
+}
+export const useVisibilityState = (opts) => {
+    return new VisibilityState(opts);
+};

package/dist/composed/dialog/_ui/basic-dialog/basic-dialog.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { useDialogItemContext } from '../../dialog-host-item.svelte';
+  import { dialogs } from '../../model/dialog-manager.svelte.js';
+  import { watch } from 'runed';
+  import { onMountEffect } from 'svelte-toolbelt';
+
+  const itemCtx = useDialogItemContext();
+
+  let {
+    name,
+    ...restProps
+  }: {
+    name: string;
+  } = $props();
+
+  let nameValue = $state('');
+
+  onMountEffect(() => {
+    nameValue = name;
+  });
+
+  watch(
+    () => nameValue,
+    () => {
+      itemCtx.update((currentProps, currentOptions) => {
+        return {
+          props: {
+            ...currentProps,
+            name: nameValue,
+          },
+          options: currentOptions,
+        };
+      });
+    }
+  );
+</script>
+
+<div class="cgui:max-w-200 cgui:w-screen cgui:p-4" {...restProps}>
+  <h2 class="cgui:text-lg cgui:font-medium cgui:text-fg-primary cgui:text-center">Basic Dialog</h2>
+
+  <p class="cgui:text-center cgui:p-4">
+    Hello {name}
+  </p>
+
+  <div>
+    <input type="text" bind:value={nameValue} />
+  </div>
+
+  <div class="cgui:flex cgui:flex-col cgui:gap-2">
+    <button
+      class="cgui:mt-4 cgui:w-full cgui:text-center cgui:bg-primary-80 cgui:text-fg-white cgui:p-2 cgui:rounded-md cgui:cursor-pointer"
+      onclick={() => {
+        dialogs.openRegistered('nested', {
+          props: {},
+        });
+      }}>Open Nested Dialog</button
+    >
+
+    <button
+      class="cgui:mt-4 cgui:w-full cgui:text-center cgui:bg-primary-80 cgui:text-fg-white cgui:p-2 cgui:rounded-md cgui:cursor-pointer"
+      onclick={() => {
+        const names = [
+          'Alice Johnson',
+          'Bob Smith',
+          'Charlie Brown',
+          'Diana Prince',
+          'Ethan Hunt',
+          'Fiona Green',
+          'George Wilson',
+          'Hannah Lee',
+          'Isaac Newton',
+          'Julia Roberts',
+        ];
+        const newName = names[Math.floor(Math.random() * names.length)];
+        nameValue = newName ?? '';
+        itemCtx.update((currentProps, currentOptions) => {
+          return {
+            props: {
+              ...currentProps,
+              name: newName,
+            },
+            options: currentOptions,
+          };
+        });
+      }}>Update Name</button
+    >
+  </div>
+</div>

package/dist/composed/dialog/_ui/basic-dialog/basic-dialog.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    name: string;
+};
+declare const BasicDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type BasicDialog = ReturnType<typeof BasicDialog>;
+export default BasicDialog;

package/dist/composed/dialog/_ui/basic-dialog/index.d.ts

@@ -0,0 +1 @@
+export { default as BasicDialog } from './basic-dialog.svelte';

package/dist/composed/dialog/_ui/basic-dialog/index.js

@@ -0,0 +1 @@
+export { default as BasicDialog } from './basic-dialog.svelte';

package/dist/composed/dialog/_ui/nested-dialog/index.d.ts

@@ -0,0 +1 @@
+export { default as NestedDialog } from './nested-dialog.svelte';