@casinogate/ui 1.5.6 → 1.6.0

package/dist/assets/css/root.css

@@ -7,9 +7,12 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --cgui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --cgui-color-black: #000;
     --cgui-spacing: 0.25rem;
     --cgui-text-sm: 0.875rem;
     --cgui-text-sm--line-height: calc(1.25 / 0.875);
+    --cgui-text-lg: 1.125rem;
+    --cgui-text-lg--line-height: calc(1.75 / 1.125);
     --cgui-font-weight-normal: 400;
     --cgui-font-weight-medium: 500;
     --cgui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -218,6 +221,9 @@
   .cgui\:z-\(--cg-ui-z-index-select\) {
     z-index: var(--cg-ui-z-index-select);
   }
+  .cgui\:z-\(--z-index-dialog\) {
+    z-index: var(--z-index-dialog);
+  }
   .cgui\:z-1 {
     z-index: 1;
   }
@@ -230,6 +236,9 @@
   .cgui\:my-4 {
     margin-block: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:mt-4 {
+    margin-top: calc(var(--cgui-spacing) * 4);
+  }
   .cgui\:scrollbar-thin {
     &::-webkit-scrollbar-track {
       background-color: var(--scrollbar-track);
@@ -302,6 +311,10 @@
     width: calc(var(--cgui-spacing) * 14);
     height: calc(var(--cgui-spacing) * 14);
   }
+  .cgui\:size-40 {
+    width: calc(var(--cgui-spacing) * 40);
+    height: calc(var(--cgui-spacing) * 40);
+  }
   .cgui\:size-full {
     width: 100%;
     height: 100%;
@@ -432,6 +445,9 @@
   .cgui\:w-full {
     width: 100%;
   }
+  .cgui\:w-screen {
+    width: 100vw;
+  }
   .cgui\:max-w-32 {
     max-width: calc(var(--cgui-spacing) * 32);
   }
@@ -450,6 +466,12 @@
   .cgui\:max-w-100 {
     max-width: calc(var(--cgui-spacing) * 100);
   }
+  .cgui\:max-w-140 {
+    max-width: calc(var(--cgui-spacing) * 140);
+  }
+  .cgui\:max-w-200 {
+    max-width: calc(var(--cgui-spacing) * 200);
+  }
   .cgui\:min-w-\(--bits-select-anchor-width\) {
     min-width: var(--bits-select-anchor-width);
   }
@@ -690,6 +712,12 @@
   .cgui\:bg-bg-main {
     background-color: var(--cg-ui-palette-neutral-20);
   }
+  .cgui\:bg-black\/50 {
+    background-color: var(--cgui-color-black);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cgui-color-black) 50%, transparent);
+    }
+  }
   .cgui\:bg-neutral-20 {
     background-color: var(--cg-ui-palette-neutral-20);
   }
@@ -902,6 +930,10 @@
     font-size: var(--cg-ui-fz-heading-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-heading-2));
   }
+  .cgui\:text-lg {
+    font-size: var(--cgui-text-lg);
+    line-height: var(--tw-leading, var(--cgui-text-lg--line-height));
+  }
   .cgui\:text-sm {
     font-size: var(--cgui-text-sm);
     line-height: var(--tw-leading, var(--cgui-text-sm--line-height));
@@ -933,6 +965,9 @@
   .cgui\:text-fg-medium {
     color: var(--cg-ui-palette-neutral-60);
   }
+  .cgui\:text-fg-primary {
+    color: var(--cg-ui-palette-primary-80);
+  }
   .cgui\:text-fg-regular {
     color: var(--cg-ui-palette-neutral-50);
   }
@@ -981,6 +1016,10 @@
   .cgui\:opacity-50 {
     opacity: 50%;
   }
+  .cgui\:shadow-dialog {
+    --tw-shadow: var(--cg-ui-shadow-dialog);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .cgui\:shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1534,6 +1573,12 @@
       --tw-exit-opacity: 0;
     }
   }
+  .cgui\:data-\[state\=closed\]\:slide-out-to-bottom-20 {
+    &[data-state="closed"] {
+      --tw-exit-translate-y: calc(20*var(--spacing));
+      --tw-exit-translate-y: calc(.2*100%);
+    }
+  }
   .cgui\:data-\[state\=closed\]\:zoom-out-95 {
     &[data-state="closed"] {
       --tw-exit-scale: calc(95*1%);
@@ -1556,6 +1601,12 @@
       --tw-enter-opacity: 0;
     }
   }
+  .cgui\:data-\[state\=open\]\:slide-in-from-bottom-20 {
+    &[data-state="open"] {
+      --tw-enter-translate-y: calc(20*var(--spacing));
+      --tw-enter-translate-y: calc(.2*100%);
+    }
+  }
   .cgui\:data-\[state\=open\]\:zoom-in-95 {
     &[data-state="open"] {
       --tw-enter-scale: calc(95*1%);
@@ -1920,6 +1971,7 @@
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
   --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
   --cg-ui-shadow-select: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.25);
+  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
   --cg-ui-fz-base: 16;
   --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);

package/dist/assets/css/theme.css

@@ -122,6 +122,7 @@
   --shadow-segment-thumb: var(--cg-ui-shadow-segment-item);
   --shadow-popover: var(--cg-ui-shadow-popover);
   --shadow-select: var(--cg-ui-shadow-select);
+  --shadow-dialog: var(--cg-ui-shadow-dialog);
 
   /* Font sizes, Line heights */
   --text-heading: var(--cg-ui-fz-heading);
@@ -203,6 +204,7 @@
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
   --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
   --cg-ui-shadow-select: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.25);
+  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 
   /* Font sizes, Line heights */
   --cg-ui-fz-base: 16;

package/dist/components/breadcrumb/breadcrumb.stories.svelte

@@ -28,8 +28,6 @@
     const pathname = '/organization/create';
     return pathname.split('/').filter(Boolean);
   });
-
-  $inspect(path);
 </script>
 
 <Story name="Primitive" {args} {parameters}>

package/dist/components/data-table/utils/render-helper.d.ts

@@ -1,90 +1,13 @@
 import type { Component, ComponentProps, Snippet } from 'svelte';
-/**
- * A helper class to make it easy to identify Svelte components in
- * `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderComponentConfig}
- *   {@const { component: Component, props } = result}
- *   <Component {...props} />
- * {/if}
- * ```
- */
 export declare class RenderComponentConfig<TComponent extends Component> {
     component: TComponent;
     props: ComponentProps<TComponent> | Record<string, never>;
     constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
 }
-/**
- * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderSnippetConfig}
- *   {@const { snippet, params } = result}
- *   {@render snippet(params)}
- * {/if}
- * ```
- */
 export declare class RenderSnippetConfig<TProps> {
     snippet: Snippet<[TProps]>;
     params: TProps;
     constructor(snippet: Snippet<[TProps]>, params: TProps);
 }
-/**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
- *
- * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
- *
- * @param component A Svelte component
- * @param props The props to pass to `component`
- * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
- *   }),
- *   columnHelper.accessor('state', {
- *     header: header => renderComponent(SortHeader, { label: 'State', header }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
 export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
-/**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
- *
- * The snippet must only take one parameter.
- *
- * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
- *
- * @param snippet
- * @param params
- * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
- *   }),
- *   columnHelper.accessor('state', {
- *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
 export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/components/data-table/utils/render-helper.js

@@ -1,19 +1,3 @@
-/**
- * A helper class to make it easy to identify Svelte components in
- * `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderComponentConfig}
- *   {@const { component: Component, props } = result}
- *   <Component {...props} />
- * {/if}
- * ```
- */
 export class RenderComponentConfig {
     component;
     props;
@@ -22,21 +6,6 @@ export class RenderComponentConfig {
         this.props = props;
     }
 }
-/**
- * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
- *
- * > NOTE: This class should only be used internally by the adapter. If you're
- * reading this and you don't know what this is for, you probably don't need it.
- *
- * @example
- * ```svelte
- * {@const result = content(context as any)}
- * {#if result instanceof RenderSnippetConfig}
- *   {@const { snippet, params } = result}
- *   {@render snippet(params)}
- * {/if}
- * ```
- */
 export class RenderSnippetConfig {
     snippet;
     params;
@@ -45,55 +14,9 @@ export class RenderSnippetConfig {
         this.params = params;
     }
 }
-/**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
- *
- * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
- *
- * @param component A Svelte component
- * @param props The props to pass to `component`
- * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
- *   }),
- *   columnHelper.accessor('state', {
- *     header: header => renderComponent(SortHeader, { label: 'State', header }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
 export function renderComponent(component, props = {}) {
     return new RenderComponentConfig(component, props);
 }
-/**
- * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
- *
- * The snippet must only take one parameter.
- *
- * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
- *
- * @param snippet
- * @param params
- * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
- * @example
- * ```ts
- * // +page.svelte
- * const defaultColumns = [
- *   columnHelper.accessor('name', {
- *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
- *   }),
- *   columnHelper.accessor('state', {
- *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
- *   }),
- * ]
- * ```
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
- */
 export function renderSnippet(snippet, params = {}) {
     return new RenderSnippetConfig(snippet, params);
 }

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

@@ -0,0 +1,89 @@
+<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({
+          key: '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/components/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/components/dialog/_ui/basic-dialog/index.d.ts

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

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

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

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

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

package/dist/components/dialog/_ui/nested-dialog/index.js

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

package/dist/components/dialog/_ui/nested-dialog/nested-dialog.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { dialogs } from '../../model/dialog-manager.svelte.js';
+</script>
+
+<div class="cgui:bg-surface-white cgui:max-w-140 cgui:p-4">
+  <h2 class="cgui:text-lg cgui:font-medium cgui:text-fg-primary cgui:text-center">Nested Dialog</h2>
+
+  <p>
+    Amet ullamco cupidatat dolor. Ut deserunt consequat enim elit ad aliqua aliqua dolore minim. Sint reprehenderit
+    commodo cillum ut laborum amet fugiat dolor incididunt laborum ut laboris irure qui veniam. Non officia
+    reprehenderit est tempor id. Minim ea qui consectetur. Incididunt fugiat enim ut veniam. Tempor labore eiusmod ut
+    ullamco esse nulla cupidatat et est amet. Ullamco velit sunt anim ex elit nostrud incididunt. Anim minim elit
+    laborum fugiat incididunt. Aute sit irure enim do ea id et tempor sunt sit ea id in excepteur. Non culpa consequat
+    Lorem est sit. Cillum culpa do nostrud. Ipsum aliquip fugiat cillum incididunt dolor occaecat eu et. Ipsum culpa
+    amet culpa culpa in id.
+  </p>
+
+  <button
+    onclick={() => {
+      dialogs.openRegistered({
+        key: 'basic',
+        props: {},
+      });
+    }}>Close</button
+  >
+</div>

package/dist/components/dialog/_ui/nested-dialog/nested-dialog.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const NestedDialog: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NestedDialog = InstanceType<typeof NestedDialog>;
+export default NestedDialog;

package/dist/components/dialog/components/dialog.close.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { dialogCloseStyles } from '../styles.js';
+  import type { DialogCloseProps } from '../types.js';
+
+  let { class: className, children, ...rest }: DialogCloseProps = $props();
+</script>
+
+<DialogPrimitive.Close class={cn(dialogCloseStyles(), className)} {...rest}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <Icon.Cross width={24} height={24} class="cgui:size-6" />
+  {/if}
+</DialogPrimitive.Close>

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

@@ -0,0 +1,4 @@
+import type { DialogCloseProps } from '../types.js';
+declare const Dialog: import("svelte").Component<DialogCloseProps, {}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/dialog/components/dialog.content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { dialogContentStyles } from '../styles.js';
+  import type { DialogContentProps } from '../types.js';
+  import { DialogContentState } from './dialog.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    id = useId(uid),
+    ref = $bindable(null),
+    class: className,
+    variant = 'default',
+    rounded = 'default',
+    ...restProps
+  }: DialogContentProps = $props();
+
+  const contentState = DialogContentState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, contentState.props, { class: cn(dialogContentStyles({ variant, rounded }), className) })
+  );
+</script>
+
+<DialogPrimitive.Content {...mergedProps}>
+  {@render children?.()}
+</DialogPrimitive.Content>

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

@@ -0,0 +1,4 @@
+import type { DialogContentProps } from '../types.js';
+declare const Dialog: import("svelte").Component<DialogContentProps, {}, "ref">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/dialog/components/dialog.overlay.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { dialogOverlayStyles } from '../styles.js';
+  import type { DialogOverlayProps } from '../types.js';
+  import { DialogOverlayState } from './dialog.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    id = useId(uid),
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogOverlayProps = $props();
+
+  const overlayState = DialogOverlayState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, overlayState.props, { class: cn(dialogOverlayStyles(), className) })
+  );
+</script>
+
+<DialogPrimitive.Overlay {...mergedProps} />

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

@@ -0,0 +1,4 @@
+import type { DialogOverlayProps } from '../types.js';
+declare const Dialog: import("svelte").Component<DialogOverlayProps, {}, "ref">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/dialog/components/dialog.portal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { DialogPortalProps } from '../types.js';
+
+  let { children, ...restProps }: DialogPortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps}>
+  {@render children?.()}
+</DialogPrimitive.Portal>

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

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

package/dist/components/dialog/components/dialog.positioner.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { dialogPositionerStyles } from '../styles.js';
+  import type { DialogPositionerProps } from '../types.js';
+  import { DialogPositionerState } from './dialog.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    id = useId(uid),
+    ref = $bindable(null),
+    class: className,
+    align = 'center',
+    ...restProps
+  }: DialogPositionerProps = $props();
+
+  const positionerState = DialogPositionerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, positionerState.props, { class: cn(dialogPositionerStyles({ align }), className) })
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,4 @@
+import type { DialogPositionerProps } from '../types.js';
+declare const Dialog: import("svelte").Component<DialogPositionerProps, {}, "ref">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;