feat(snackbar): command signal and controller

ui/ui-kit/src/snackbar/controller.ts

@@ -0,0 +1,15 @@
+import {commandHandler} from '@alwatr/signal';
+
+import type {AlwatrSnackbar} from './element.js';
+import type {SnackbarOptions, SnackbarResponse} from './type.js';
+
+const currentSnackbar: AlwatrSnackbar | null = null;
+
+const _showSnackbar = (options: SnackbarOptions): SnackbarResponse => {
+  options.duration ??= 5;
+  // TODO: create new alwatr-snackbar and append to body
+  alert(options.message);
+  return {};
+};
+
+commandHandler.define<SnackbarOptions, SnackbarResponse>('show-snackbar-command', _showSnackbar);

ui/ui-kit/src/snackbar/element.ts

@@ -29,8 +29,8 @@ export class AlwatrSnackbar extends AlwatrSurface {
         gap: var(--sys-spacing-track);
         position: fixed;
         bottom: calc(2 * var(--sys-spacing-track));
-        left: calc(2 * var(--sys-spacing-track));
-        right: calc(2 * var(--sys-spacing-track));
+        left: calc(3 * var(--sys-spacing-track));
+        right: calc(3 * var(--sys-spacing-track));
         border-radius: var(--sys-radius-xsmall);
 
         box-sizing: border-box;

ui/ui-kit/src/snackbar/show-snackbar.ts

@@ -0,0 +1,36 @@
+import {commandTrigger} from '@alwatr/signal';
+import {MaybePromise} from '@alwatr/type';
+
+import type {SnackbarOptions, SnackbarResponse} from './type.js';
+
+export const snackbarSignalTrigger = commandTrigger.bind<SnackbarOptions, SnackbarResponse>('show-snackbar-command');
+
+/**
+ * Show snackbar with optional action.
+ *
+ * Example:
+ *
+ * Simple toast:
+ * ```ts
+ * showSnackbar({message: 'Form submitted successfully.'});
+ * ```
+ *
+ * With action label:
+ * ```ts
+ * const response = await showSnackbar({
+ *   message: 'Email archived.',
+ *   actionLabel: 'Undo',
+ * });
+ * if (response.actionClicked) {
+ *   // undo...
+ * }
+ * ```
+ */
+export function showSnackbar(options: SnackbarOptions): MaybePromise<SnackbarResponse> {
+  if (!options.actionLabel) {
+    return snackbarSignalTrigger.requestWithResponse(options);
+  }
+  // else
+  snackbarSignalTrigger.request(options);
+  return {};
+}

ui/ui-kit/src/snackbar/type.ts

@@ -0,0 +1,24 @@
+export type SnackbarOptions = {
+  /**
+   * Snackbar message.
+   */
+  message: string;
+
+  /**
+   * Snackbar action button label text.
+   */
+  actionLabel?: string;
+
+  /**
+   * Snackbar automatically disappear from the screen after a minimum of 4 seconds, and a maximum of 10 seconds.
+   *
+   * If duration is `-1` and `actionLabel` defined, snackbar remain until action button clicked.
+   *
+   * @default 5s
+   */
+  duration?: number;
+}
+
+export type SnackbarResponse = {
+  actionButton?: true;
+}