@streamscloud/kit 0.2.4 → 0.2.6

package/dist/styles/_input.scss

@@ -72,7 +72,7 @@
   --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
   position: relative;
   box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
-  @include transitions.transition(box-shadow);
+  @include transitions.transition(box-shadow border-color width background padding);
 
   &:focus,
   &:focus-within {

package/dist/ui/badge/cmp.badge.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">const { color = undefined, rounded = false, children } = $props();
+export {};
+</script>
+
+<div
+  class="badge"
+  class:badge--default={color === 'default'}
+  class:badge--gray={color === 'gray'}
+  class:badge--green={color === 'green'}
+  class:badge--red={color === 'red'}
+  class:badge--orange={color === 'orange'}
+  class:badge--blue={color === 'blue'}
+  class:badge--rounded={rounded}>
+  <div class="badge__content">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+Displays a small color-coded label for statuses, categories, or counts.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--badge--color` | Text color | `gray-800` / `white` |
+| `--sc-kit--badge--background-color` | Background color | `white` / `gray-800` |
+| `--sc-kit--badge--font-size` | Content font size | `0.625em` |
+| `--sc-kit--badge--border-radius` | Corner radius | `0.25em` |
+| `--sc-kit--badge--width` | Badge width | `5em` |
+| `--sc-kit--badge--height` | Badge height | `1.5em` |
+| `--sc-kit--badge--content-padding` | Content padding | `0` |
+| `--sc-kit--badge--line-break` | Line break behavior | `auto` |
+-->
+
+<style>.badge {
+  --_badge--color: var(--sc-kit--badge--color, light-dark(#2e2e2e, #ffffff));
+  --_badge--background-color: var(--sc-kit--badge--background-color, light-dark(#ffffff, #2e2e2e));
+  --_badge--font-size: var(--sc-kit--badge--font-size, 0.625em);
+  --_badge--border-radius: var(--sc-kit--badge--border-radius, 0.25em);
+  --_badge--width: var(--sc-kit--badge--width, 5em);
+  --_badge--height: var(--sc-kit--badge--height, 1.5em);
+  --_badge--content-padding: var(--sc-kit--badge--content-padding, 0rem);
+  --_badge--line-break: var(--sc-kit--badge--line-break, auto);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--_badge--color);
+  background: var(--_badge--background-color);
+  width: var(--_badge--width);
+  height: var(--_badge--height);
+  border-radius: var(--_badge--border-radius);
+  line-break: var(--_badge--line-break);
+}
+.badge__content {
+  font-size: var(--_badge--font-size);
+  padding: var(--_badge--content-padding);
+}
+.badge--default {
+  --_badge--color: light-dark(#2e2e2e, #ffffff);
+  --_badge--background-color: light-dark(#ffffff, #2e2e2e);
+}
+.badge--gray {
+  --_badge--color: light-dark(#6b7280, #f2f2f3);
+  --_badge--background-color: light-dark(#f2f2f3, #374151);
+}
+.badge--green {
+  --_badge--color: #0cce6b;
+  --_badge--background-color: #ecfef4;
+}
+.badge--red {
+  --_badge--color: #e71d36;
+  --_badge--background-color: #fef1f3;
+}
+.badge--orange {
+  --_badge--color: #ffa62b;
+  --_badge--background-color: #fffbeb;
+}
+.badge--blue {
+  --_badge--color: light-dark(#144ab0, #5a8dec);
+  --_badge--background-color: #f9fafb;
+}
+.badge--rounded {
+  --_badge--border-radius: calc(var(--_badge--height) / 2);
+}</style>

package/dist/ui/badge/cmp.badge.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { BadgeColor } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** @default undefined */
+    color?: BadgeColor | null;
+    rounded?: boolean;
+    children: Snippet;
+};
+/**
+ * Displays a small color-coded label for statuses, categories, or counts.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--badge--color` | Text color | `gray-800` / `white` |
+ * | `--sc-kit--badge--background-color` | Background color | `white` / `gray-800` |
+ * | `--sc-kit--badge--font-size` | Content font size | `0.625em` |
+ * | `--sc-kit--badge--border-radius` | Corner radius | `0.25em` |
+ * | `--sc-kit--badge--width` | Badge width | `5em` |
+ * | `--sc-kit--badge--height` | Badge height | `1.5em` |
+ * | `--sc-kit--badge--content-padding` | Content padding | `0` |
+ * | `--sc-kit--badge--line-break` | Line break behavior | `auto` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './cmp.badge.svelte';
+export type { BadgeColor } from './types';

package/dist/ui/badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './cmp.badge.svelte';

package/dist/ui/badge/types.d.ts

@@ -0,0 +1 @@
+export type BadgeColor = 'default' | 'blue' | 'green' | 'gray' | 'orange' | 'red';

package/dist/ui/badge/types.js

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

package/dist/ui/button/cmp.button.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ButtonSize, ButtonVariant } from './resources/types';
 import type { Snippet } from 'svelte';
 type Props = {
+    /** @default 'button' */
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     autofocus?: boolean;

package/dist/ui/button/cmp.options-button.svelte.d.ts

@@ -2,6 +2,7 @@ import type { ButtonSize, ButtonVariant } from './resources/types';
 import { type Placement } from '@popperjs/core';
 import type { Snippet } from 'svelte';
 type Props = {
+    /** @default 'button' */
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     autofocus?: boolean;

package/dist/ui/checkbox/cmp.checkbox.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_20_filled.svg?raw';
+import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_20_regular.svg?raw';
+const { checked, disabled = false, label = undefined, stopPropagation = true, title = '', checkedIcon = IconCheckboxChecked, uncheckedIcon = IconCheckboxUnchecked, children, on } = $props();
+let iconRef;
+const onCheckboxClick = (event) => {
+    if (stopPropagation) {
+        event.stopPropagation();
+    }
+    if (disabled) {
+        return;
+    }
+    on?.change(!checked);
+};
+const onCheckboxKeyPress = (event) => {
+    if (event.code === 'Space' || event.key === ' ') {
+        event.preventDefault();
+        onCheckboxClick(event);
+        setTimeout(() => {
+            iconRef.focus();
+        });
+    }
+};
+</script>
+
+<div
+  class="checkbox"
+  onclick={onCheckboxClick}
+  class:checkbox--disabled={disabled}
+  class:checkbox--align-top={!!children}
+  title={title}
+  onkeydown={onCheckboxKeyPress}
+  role="none">
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <span class="checkbox__icon" class:checkbox__icon--checked={checked} tabindex="0" bind:this={iconRef}>
+    <Icon src={checked ? checkedIcon : uncheckedIcon} />
+  </span>
+  {#if label}
+    <span class="checkbox__label">{label}</span>
+  {:else if children}
+    <div class="checkbox__body">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+A checkbox control with optional label or custom body content.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--checkbox--gap` | Gap between icon and label | `0.625em` |
+| `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
+| `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
+| `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
+| `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
+| `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
+| `--sc-kit--checkbox--color--checked` | Checked icon color | `primary-500` / `primary-400` |
+-->
+
+<style>.checkbox {
+  --_checkbox--gap: var(--sc-kit--checkbox--gap, 0.625em);
+  --_checkbox--icon--size: var(--sc-kit--checkbox--icon--size, 1.5em);
+  --_checkbox--label--font-size: var(--sc-kit--checkbox--label--font-size, 1em);
+  --_checkbox--label--line-height: var(--sc-kit--checkbox--label--line-height, 1em);
+  --_checkbox--align-items: var(--sc-kit--checkbox--align-items, center);
+  --_checkbox--color: var(--sc-kit--checkbox--color, light-dark(#6b7280, #4b5563));
+  --_checkbox--color--checked: var(--sc-kit--checkbox--color--checked, light-dark(#144ab0, #5a8dec));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_checkbox--gap);
+}
+.checkbox--align-top {
+  align-items: var(--_checkbox--align-items);
+}
+.checkbox__icon {
+  --sc-kit--icon--size: var(--_checkbox--icon--size);
+  --sc-kit--icon--color: var(--_checkbox--color);
+  cursor: pointer;
+}
+.checkbox__icon:focus {
+  filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.25));
+}
+.checkbox__icon--checked {
+  --sc-kit--icon--color: var(--_checkbox--color--checked);
+}
+.checkbox__label, .checkbox__body {
+  font-size: var(--_checkbox--label--font-size);
+  line-height: var(--_checkbox--label--line-height);
+  cursor: pointer;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.checkbox__label :global([contenteditable]), .checkbox__body :global([contenteditable]) {
+  user-select: text;
+}
+.checkbox--disabled {
+  opacity: 0.5;
+  cursor: default;
+}</style>

package/dist/ui/checkbox/cmp.checkbox.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    disabled?: boolean;
+    label?: string;
+    /** @default true */
+    stopPropagation?: boolean;
+    title?: string;
+    /** Custom icon for checked state */
+    checkedIcon?: string;
+    /** Custom icon for unchecked state */
+    uncheckedIcon?: string;
+    children?: Snippet;
+    on?: {
+        change: (value: boolean) => void;
+    };
+};
+/**
+ * A checkbox control with optional label or custom body content.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--checkbox--gap` | Gap between icon and label | `0.625em` |
+ * | `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
+ * | `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
+ * | `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
+ * | `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
+ * | `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
+ * | `--sc-kit--checkbox--color--checked` | Checked icon color | `primary-500` / `primary-400` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/checkbox/cmp.three-state-checkbox.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_20_filled.svg?raw';
+import IconCheckboxIndeterminate from '@fluentui/svg-icons/icons/checkbox_indeterminate_20_filled.svg?raw';
+import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_20_regular.svg?raw';
+const { state, disabled = false, label = undefined, stopPropagation = true, title = '', checkedIcon = IconCheckboxChecked, uncheckedIcon = IconCheckboxUnchecked, indeterminateIcon = IconCheckboxIndeterminate, children, on } = $props();
+let iconRef;
+const onCheckboxClick = (event) => {
+    if (stopPropagation) {
+        event.stopPropagation();
+    }
+    if (disabled) {
+        return;
+    }
+    on?.change(state !== 'checked');
+};
+const onCheckboxKeyPress = (event) => {
+    if (event.code === 'Space' || event.key === ' ') {
+        event.preventDefault();
+        onCheckboxClick(event);
+        setTimeout(() => {
+            iconRef.focus();
+        });
+    }
+};
+const checkboxIcon = $derived.by(() => {
+    if (state === 'checked') {
+        return checkedIcon;
+    }
+    if (state === 'indeterminate') {
+        return indeterminateIcon;
+    }
+    return uncheckedIcon;
+});
+</script>
+
+<div
+  class="checkbox"
+  onclick={onCheckboxClick}
+  class:checkbox--disabled={disabled}
+  class:checkbox--align-top={!!children}
+  title={title}
+  onkeydown={onCheckboxKeyPress}
+  role="none">
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <span class="checkbox__icon" class:checkbox__icon--checked={state !== 'unchecked'} tabindex="0" bind:this={iconRef}>
+    <Icon src={checkboxIcon} />
+  </span>
+  {#if label}
+    <span class="checkbox__label">{label}</span>
+  {:else if children}
+    <div class="checkbox__body">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+A three-state checkbox (unchecked, checked, indeterminate) with optional label or custom body.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--checkbox--gap` | Gap between icon and label | `0.625em` |
+| `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
+| `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
+| `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
+| `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
+| `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
+| `--sc-kit--checkbox--color--checked` | Checked/indeterminate icon color | `primary-500` / `primary-400` |
+-->
+
+<style>.checkbox {
+  --_checkbox--gap: var(--sc-kit--checkbox--gap, 0.625em);
+  --_checkbox--icon--size: var(--sc-kit--checkbox--icon--size, 1.5em);
+  --_checkbox--label--font-size: var(--sc-kit--checkbox--label--font-size, 1em);
+  --_checkbox--label--line-height: var(--sc-kit--checkbox--label--line-height, 1em);
+  --_checkbox--align-items: var(--sc-kit--checkbox--align-items, center);
+  --_checkbox--color: var(--sc-kit--checkbox--color, light-dark(#6b7280, #4b5563));
+  --_checkbox--color--checked: var(--sc-kit--checkbox--color--checked, light-dark(#144ab0, #5a8dec));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_checkbox--gap);
+}
+.checkbox--align-top {
+  align-items: var(--_checkbox--align-items);
+}
+.checkbox__icon {
+  --sc-kit--icon--size: var(--_checkbox--icon--size);
+  --sc-kit--icon--color: var(--_checkbox--color);
+  cursor: pointer;
+}
+.checkbox__icon:focus {
+  filter: drop-shadow(1px 1px 0.5px rgba(0, 0, 0, 0.25));
+}
+.checkbox__icon--checked {
+  --sc-kit--icon--color: var(--_checkbox--color--checked);
+}
+.checkbox__label, .checkbox__body {
+  font-size: var(--_checkbox--label--font-size);
+  line-height: var(--_checkbox--label--line-height);
+  cursor: pointer;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.checkbox__label :global([contenteditable]), .checkbox__body :global([contenteditable]) {
+  user-select: text;
+}
+.checkbox--disabled {
+  opacity: 0.5;
+  cursor: default;
+}</style>

package/dist/ui/checkbox/cmp.three-state-checkbox.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { CheckboxState } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    state: CheckboxState;
+    disabled?: boolean;
+    label?: string;
+    /** @default true */
+    stopPropagation?: boolean;
+    title?: string;
+    /** Custom icon for checked state */
+    checkedIcon?: string;
+    /** Custom icon for unchecked state */
+    uncheckedIcon?: string;
+    /** Custom icon for indeterminate state */
+    indeterminateIcon?: string;
+    children?: Snippet;
+    on?: {
+        change: (value: boolean) => void;
+    };
+};
+/**
+ * A three-state checkbox (unchecked, checked, indeterminate) with optional label or custom body.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--checkbox--gap` | Gap between icon and label | `0.625em` |
+ * | `--sc-kit--checkbox--icon--size` | Checkbox icon size | `1.5em` |
+ * | `--sc-kit--checkbox--label--font-size` | Label font size | `1em` |
+ * | `--sc-kit--checkbox--label--line-height` | Label line height | `1em` |
+ * | `--sc-kit--checkbox--align-items` | Alignment when children present | `center` |
+ * | `--sc-kit--checkbox--color` | Unchecked icon color | `neutral-500` / `neutral-600` |
+ * | `--sc-kit--checkbox--color--checked` | Checked/indeterminate icon color | `primary-500` / `primary-400` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Checkbox } from './cmp.checkbox.svelte';
+export { default as ThreeStateCheckbox } from './cmp.three-state-checkbox.svelte';
+export type { CheckboxState } from './types';

package/dist/ui/checkbox/index.js

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './cmp.checkbox.svelte';
+export { default as ThreeStateCheckbox } from './cmp.three-state-checkbox.svelte';

package/dist/ui/checkbox/types.d.ts

@@ -0,0 +1 @@
+export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';

package/dist/ui/checkbox/types.js

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

package/dist/ui/confirmation-dialog/cmp.confirmation-dialog.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import { Dialog, DialogButton, DialogCancelButton } from '../dialog';
+import { IconText } from '../icon-text';
+import { ConfirmationDialogLocalization } from './confirmation-dialog-localization';
+import {} from './types';
+import { untrack } from 'svelte';
+const { controller, data } = $props();
+const localization = new ConfirmationDialogLocalization();
+const titleText = $derived(data.title);
+const bodyText = $derived(data.text);
+const style = $derived(data.style);
+const icon = $derived(data.icon);
+const STYLE_TO_VARIANT = {
+    alert: 'alert',
+    warning: 'warning',
+    info: 'primary'
+};
+const buttonVariant = $derived(STYLE_TO_VARIANT[style]);
+const confirm = () => {
+    controller.ok(true);
+};
+const close = () => {
+    controller.cancel(false);
+};
+untrack(() => {
+    controller.updateSettings({ closeOnClickOutside: true, closeOnEsc: true });
+    controller.updateContainerSettings({ size: 'small', position: 'center' });
+});
+</script>
+
+<div class="confirmation-dialog" class:confirmation-dialog--alert={style === 'alert'} class:confirmation-dialog--warning={style === 'warning'}>
+  <Dialog controller={controller} hideCloseButton={true}>
+    {#snippet title()}
+      {titleText}
+    {/snippet}
+    {#snippet body()}
+      {#if bodyText}
+        {bodyText}
+      {/if}
+    {/snippet}
+    {#snippet footer()}
+      <DialogCancelButton on={{ click: close }}>{localization.no}</DialogCancelButton>
+      <DialogButton on={{ click: confirm }} autofocus={true} variant={buttonVariant}>
+        {#if icon}
+          <IconText icon={icon}>
+            {localization.yes}
+          </IconText>
+        {:else}
+          {localization.yes}
+        {/if}
+      </DialogButton>
+    {/snippet}
+  </Dialog>
+</div>
+
+<style>.confirmation-dialog {
+  --sc-kit--dialog--body--padding-inline: 1.5rem;
+  --sc-kit--dialog--body--padding-block: 1.5rem 3rem;
+}</style>

package/dist/ui/confirmation-dialog/cmp.confirmation-dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type DialogController } from '../dialog';
+import { type ConfirmationDialogData } from './types';
+type Props = {
+    controller: DialogController<boolean, boolean>;
+    data: ConfirmationDialogData;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/confirmation-dialog/confirmation-dialog-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class ConfirmationDialogLocalization {
+    get yes(): string;
+    get no(): string;
+}

package/dist/ui/confirmation-dialog/confirmation-dialog-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+export class ConfirmationDialogLocalization {
+    get yes() {
+        return loc.yes[AppLocale.current];
+    }
+    get no() {
+        return loc.no[AppLocale.current];
+    }
+}
+const loc = {
+    yes: {
+        en: 'Yes',
+        no: 'Ja'
+    },
+    no: {
+        en: 'No',
+        no: 'Nei'
+    }
+};

package/dist/ui/confirmation-dialog/index.d.ts

@@ -0,0 +1,19 @@
+import { type ConfirmationDialogStyle } from './types';
+/**
+ * Opens a confirmation dialog with Yes/No buttons.
+ *
+ * ### Options
+ * - `title` — dialog title text
+ * - `text` — optional body text
+ * - `style` — visual style: `'info'`, `'warning'`, or `'alert'` (default `'alert'`)
+ * - `icon` — optional SVG string for the confirm button icon
+ */
+export declare const openConfirmationDialog: (init: {
+    title: string;
+    text?: string;
+    style?: ConfirmationDialogStyle;
+    icon?: string;
+}) => Promise<{
+    wasCanceled: boolean;
+}>;
+export type { ConfirmationDialogStyle } from './types';

package/dist/ui/confirmation-dialog/index.js

@@ -0,0 +1,22 @@
+import { Dialogs } from '../dialog';
+import ConfirmationDialog from './cmp.confirmation-dialog.svelte';
+import {} from './types';
+/**
+ * Opens a confirmation dialog with Yes/No buttons.
+ *
+ * ### Options
+ * - `title` — dialog title text
+ * - `text` — optional body text
+ * - `style` — visual style: `'info'`, `'warning'`, or `'alert'` (default `'alert'`)
+ * - `icon` — optional SVG string for the confirm button icon
+ */
+export const openConfirmationDialog = async (init) => {
+    const { title, text = '', style = 'alert', icon } = init;
+    const data = { title, text, style, icon };
+    const res = await Dialogs.open({
+        view: ConfirmationDialog,
+        data,
+        explicitSettings: { closeOnClickOutside: false }
+    });
+    return { wasCanceled: res.wasCanceled };
+};

package/dist/ui/confirmation-dialog/types.d.ts

@@ -0,0 +1,7 @@
+export type ConfirmationDialogStyle = 'info' | 'warning' | 'alert';
+export type ConfirmationDialogData = {
+    title: string;
+    text: string;
+    style: ConfirmationDialogStyle;
+    icon?: string;
+};

package/dist/ui/confirmation-dialog/types.js

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