svseeds 0.5.3 → 0.6.0

package/_svseeds/_ColorPicker.svelte

@@ -25,10 +25,17 @@
   ```
   ### Exports
   ```ts
-  type RgbColor = [number, number, number];
-  function getHex(rgb: RgbColor): string
-  // getHex([255, 123, 34])  => "#ff7b22"
-  // getHex([255, 255, 255]) => "#ffffff"
+  /**
+  * Converts RGB color values to hexadecimal color code.
+  *
+  * @param rgb - Array of RGB values [red, green, blue] where each value is 0-255
+  * @returns Hexadecimal color code string starting with '#'
+  *
+  * @example
+  * getHex([255, 123, 34])  // "#ff7b22"
+  * getHex([255, 255, 255]) // "#ffffff"
+  */
+  function getHex(rgb: [number, number, number]): string
   ```
 -->
 <script module lang="ts">

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -14,38 +14,4 @@ type RgbColor = [number, number, number];
 import { type Action } from "svelte/action";
 import { type HTMLInputAttributes } from "svelte/elements";
 import { type SVSClass } from "./core";
-/**
- * ### Types
- * default value: *`(value)`*
- * ```ts
- * interface ColorPickerProps {
- *   value?: string; // bindable ("#000000")
- *   alpha?: number; // bindable (1)
- *   attributes?: HTMLInputAttributes;
- *   action?: Action;
- *   element?: HTMLInputElement; // bindable
- *   styling?: SVSClass;
- *   variant?: string; // bindable (VARIANT.NEUTRAL)
- * }
- * ```
- * ### Anatomy
- * ```svelte
- * <label class="whole">
- *   <div class="middle"> // this middle element is background for transparency color
- *     <div class="main"> // this main element is color sample
- *       <input type="color" {...attributes} bind:value bind:this={element} use:action />
- *     </div>
- *   </div>
- * </label>
- * ```
- * ### Exports
- * ```ts
- * type RgbColor = [number, number, number];
- * function getHex(rgb: RgbColor): string
- * // getHex([255, 123, 34])  => "#ff7b22"
- * // getHex([255, 255, 255]) => "#ffffff"
- * ```
- */
-declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "variant" | "alpha" | "value" | "element">;
-type ColorPicker = ReturnType<typeof ColorPicker>;
-export default ColorPicker;
+export {};

package/_svseeds/_Disclosure.svelte

@@ -7,7 +7,7 @@
     label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
-    duration?: number; // (400)
+    duration?: number; // (200)
     attributes?: HTMLDetailsAttributes;
     action?: Action;
     element?: HTMLDetailsElement; // bindable
@@ -32,7 +32,7 @@
     label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
-    duration?: number; // (400)
+    duration?: number; // (200)
     attributes?: HTMLDetailsAttributes;
     action?: Action;
     element?: HTMLDetailsElement; // bindable
@@ -43,10 +43,13 @@
   export type DisclosureBindProps = "open" | "variant" | "element";
 
   type DisclosureTarget = { currentTarget: EventTarget & HTMLDetailsElement };
-  const DEFAULT_DURATION = 400;
+  const DEFAULT_DURATION = 200;
   const preset = "svs-disclosure";
 
-  const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec));
+  function isPrefersReducedMotion(): boolean {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
   class ToggleGurad {
     #active = false;
     get active(): boolean {
@@ -54,7 +57,7 @@
     }
     activate(duration: number) {
       this.#active = true;
-      sleep(duration).then(() => this.#active = false);
+      setTimeout(() => this.#active = false, duration);
     }
   }
 
@@ -70,6 +73,7 @@
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
+  if (isPrefersReducedMotion()) duration = 0;
   if (!isUnsignedInteger(duration)) duration = DEFAULT_DURATION;
   const cls = fnClass(preset, styling);
   const attrs = omit(attributes, "class", "open", "ontoggle");
@@ -88,7 +92,7 @@
     if (open) {
       toggle(true);
     } else {
-      sleep(duration).then(() => toggle(false));
+      setTimeout(() => toggle(false), duration);
     }
   }
   function toggle(bool: boolean) {

package/_svseeds/_Disclosure.svelte.d.ts

@@ -23,7 +23,7 @@ import { type SVSClass } from "./core";
  *   label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
  *   children: Snippet<[string]>; // Snippet<[variant]>
  *   open?: boolean; // bindable (false)
- *   duration?: number; // (400)
+ *   duration?: number; // (200)
  *   attributes?: HTMLDetailsAttributes;
  *   action?: Action;
  *   element?: HTMLDetailsElement; // bindable

package/_svseeds/_Drawer.svelte

@@ -43,9 +43,13 @@
   export type DrawerReqdProps = "children";
   export type DrawerBindProps = "open" | "variant" | "element";
 
+  const DEFAULT_DURATION = 200;
   const preset = "svs-drawer";
 
-  const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec));
+  function isPrefersReducedMotion(): boolean {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
   function getPositionProp(position: Position): string {
     switch (position) {
       case "top":
@@ -63,14 +67,16 @@
 
   import { type Snippet, untrack } from "svelte";
   import { type HTMLAttributes } from "svelte/elements";
-  import { type SVSClass, VARIANT, PARTS, fnClass, omit } from "./core";
+  import { type SVSClass, VARIANT, PARTS, fnClass, isUnsignedInteger, omit } from "./core";
 </script>
 
 <script lang="ts">
-  let { children, open = $bindable(false), position = "left", size = "auto", duration = 200, closable = true, id, attributes, element = $bindable(), styling, variant = $bindable("") }: DrawerProps = $props();
+  let { children, open = $bindable(false), position = "left", size = "auto", duration = -1, closable = true, id, attributes, element = $bindable(), styling, variant = $bindable("") }: DrawerProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
+  if (isPrefersReducedMotion()) duration = 0;
+  if (!isUnsignedInteger(duration)) duration = DEFAULT_DURATION;
   const cls = fnClass(preset, styling);
   const attrs = omit(attributes, "class", "id", "style", "popover", "ontoggle");
   const popover = closable ? "auto" : "manual";
@@ -95,7 +101,7 @@
     attributes?.["ontoggle"]?.(ev as any);
     open = ev.newState === "open";
     style = baseStyle + "overflow:hidden;";
-    sleep(duration).finally(() => style = baseStyle);
+    setTimeout(() => style = baseStyle, duration);
   }
   $effect(() => untrack(() => { if (open) element?.showPopover(); }));
 </script>

package/_svseeds/_Toast.svelte

@@ -0,0 +1,258 @@
+<!--
+  @component
+  ### Types
+  default value: *`(value)`*
+  ```ts
+  interface ToastProps {
+    children: Snippet<[string, string, string, string]>; // Snippet<[message,type,id,variant]>
+    name?: string;
+    timeout?: number;
+    duration?: number; // (200)
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+  }
+  ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    {#each}
+      <div class="middle" animate:flip={{ duration }}>
+        <div class="main">
+          {children}
+        </div>
+      </div>
+    {/each}
+  </div>
+  ```
+  ### Exports
+  ```ts
+  /**
+   * Displays a toast notification.
+   *
+   * @param message - Text message to display in the toast
+   * @param type - Optional toast type/category (also used for part of aria-label)
+   * @param name - Unique identifier for the toast component
+   * @param timeout - Custom auto-dismiss timeout in milliseconds
+   * @returns ID of the displayed toast
+   */
+  function toast(message: string, type?: string, name?: string, timeout?: number): string
+  /**
+   * Removes a specific toast notification.
+   *
+   * @param id - ID of the toast to remove
+   * @param name - Unique identifier for the toast component
+   */
+  function removeToast(id: string, name?: string)
+  ```
+-->
+<script module lang="ts">
+  export interface ToastProps {
+    children: Snippet<[string, string, string, string]>; // Snippet<[message,type,id,variant]>
+    name?: string;
+    timeout?: number;
+    duration?: number; // (200)
+    styling?: SVSClass;
+    variant?: string; // bindable (VARIANT.NEUTRAL)
+  }
+  export type ToastReqdProps = "children";
+  export type ToastBindProps = "variant";
+
+  export function toast(message: string, type?: string, name?: string, timeout?: number): string {
+    return core.add(message, type, name, timeout);
+  }
+  export function removeToast(id: string, name?: string) {
+    core.remove(id, name);
+  }
+
+  const preset = "svs-toast";
+  const DEFALT_DURATION = 200;
+
+  function isPrefersReducedMotion(): boolean {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  function isValidTimeout(timeout?: number): timeout is number {
+    return !!timeout && isUnsignedInteger(timeout);
+  }
+  class ToastCore {
+    #containers: Map<string, ToastContainer> = new Map();
+    #uniqueId;
+
+    constructor() {
+      this.#uniqueId = new UniqueId();
+    }
+    register(container: ToastContainer, name?: string) {
+      this.#containers.set(this.#uniqueId.register(name), container);
+    }
+    add(message: string, type?: string, name?: string, timeout?: number): string {
+      return this.#containers.get(name ?? this.#uniqueId.default)?.addToast(type ?? "", message, timeout) ?? "";
+    }
+    remove(id: string, name?: string) {
+      this.#containers.get(name ?? this.#uniqueId.default)?.hideToast(id);
+    }
+  }
+  class UniqueId {
+    #default = "";
+    #ids: Set<string> = new Set();
+    get default(): string {
+      return this.#default;
+    }
+    register(name?: string): string {
+      const id = name ? name : elemId.id;
+      if (this.#ids.has(id)) return "";
+      if (!this.#default) this.#default = id;
+      this.#ids.add(id);
+      return id;
+    }
+  }
+  class ToastContainer {
+    #open: boolean = $state(false);
+    #style: string;
+    #keydownFn = (ev: KeyboardEvent) => {};
+    element = $state<HTMLDivElement>();
+    toasts: Toast[] = $state([]);
+    onkeydown = $derived(this.#open ? this.#keydownFn : undefined);
+
+    constructor(duration: number, onkeydown: (ev: KeyboardEvent) => void, timeout?: number) {
+      this.#style = `position:fixed;background-color:transparent;pointer-events:none;`;
+      this.#keydownFn = onkeydown;
+      Toast.init(duration, timeout);
+    }
+    addToast(type: string, message: string, timeout?: number): string {
+      if (!this.toasts.length) this.#show();
+      const toast = new Toast(type, message, (id) => this.remove(id), timeout);
+      this.toasts.push(toast);
+      return toast.id;
+    }
+    hideToast(id: string) {
+      this.toasts.find((x) => x.id === id)?.hide();
+    }
+    remove(id: string) {
+      this.toasts = this.toasts.filter((x) => x.id !== id);
+      if (!this.toasts.length) this.hide();
+    }
+    #show() {
+      this.element?.showPopover();
+      this.#open = true;
+    }
+    hide() {
+      this.element?.hidePopover();
+      this.#open = false;
+    }
+
+    get open(): boolean {
+      return this.#open;
+    }
+    get style(): string {
+      return this.#style;
+    }
+  }
+  class Toast {
+    static #DEFALT_TIMEOUT = Infinity;
+    static #DURATION = 0;
+    #isVisible = $state(false);
+    #id: string;
+    #type: string;
+    #message: string;
+    #remove: (id: string) => void;
+    #timeout: number;
+    #timeoutId: number = 0;
+    constructor(type: string, message: string, remove: (id: string) => void, timeout?: number) {
+      this.#id = elemId.id;
+      this.#type = type;
+      this.#message = message;
+      this.#remove = remove;
+      this.#timeout = isValidTimeout(timeout) ? timeout : Toast.#DEFALT_TIMEOUT;
+      this.#setAutoDismiss();
+    }
+    show() {
+      this.#isVisible = true;
+    }
+    hide() {
+      this.#isVisible = false;
+      this.reset();
+      setTimeout(() => {
+        this.#remove(this.#id);
+      }, Toast.#DURATION);
+    }
+    reset() {
+      clearTimeout(this.#timeoutId);
+    }
+    restart(ev: PointerEvent) {
+      this.#setAutoDismiss(ev.pointerType === "touch");
+    }
+    #setAutoDismiss(extend?: boolean) {
+      if (!Number.isFinite(this.#timeout)) return;
+      if (typeof window === "undefined") return;
+      const timer = extend ? this.#timeout * 1.5 : this.#timeout;
+      this.#timeoutId = window.setTimeout(() => this.hide(), timer);
+    }
+
+    static init(duration: number, timeout?: number) {
+      Toast.#DEFALT_TIMEOUT = isValidTimeout(timeout) ? timeout : Infinity;
+      Toast.#DURATION = duration;
+    }
+    get label(): string {
+      return this.#type ? `${this.#type} message` : "message";
+    }
+    get isVisible(): boolean {
+      return this.#isVisible;
+    }
+    get id(): string {
+      return this.#id;
+    }
+    get type(): string {
+      return this.#type;
+    }
+    get message(): string {
+      return this.#message;
+    }
+  }
+  const core = new ToastCore();
+
+  import { type Snippet } from "svelte";
+  import { flip } from "svelte/animate";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass, isUnsignedInteger } from "./core";
+</script>
+
+<script lang="ts">
+  let { children, name, timeout, duration = -1, styling, variant = $bindable("") }: ToastProps = $props();
+
+  // *** Initialize *** //
+  if (!variant) variant = VARIANT.NEUTRAL;
+  const cls = fnClass(preset, styling);
+  if (isPrefersReducedMotion()) duration = 0;
+  if (!isUnsignedInteger(duration)) duration = DEFALT_DURATION;
+  const container = new ToastContainer(duration, onkeydown, timeout);
+  core.register(container, name);
+
+  // *** Event Handlers *** //
+  function mount(_node: HTMLDivElement, index: number) {
+    setTimeout(() => container.toasts[index].show(), 0);
+  }
+  function enter(index: number): () => void {
+    return () => container.toasts[index].reset();
+  }
+  function leave(index: number): (ev: PointerEvent) => void {
+    return (ev) => container.toasts[index].restart(ev);
+  }
+  function onkeydown(ev: KeyboardEvent) {
+    if (ev.key !== "F6") return;
+    if (ev.composed) return;
+    container.element?.focus();
+  }
+</script>
+
+<!---------------------------------------->
+<svelte:body onkeydown={container.onkeydown} />
+
+<div bind:this={container.element} class={cls(PARTS.WHOLE, variant)} role="region" tabindex="-1" popover="manual" aria-label={`${container.toasts.length} notifications`} style={container.style}>
+  {#each container.toasts as toast, i (toast.id)}
+    {@const v = toast.isVisible ? variant : VARIANT.INACTIVE}
+    <div class={cls(PARTS.MIDDLE, v)} style="width:fit-content;height:fit-content;overflow:hidden;" tabindex="-1" animate:flip={{ duration }}>
+      <div class={cls(PARTS.MAIN, v)} role="dialog" aria-modal="false" aria-label={toast.label} tabindex="0" style="pointer-events:auto;" onpointerenter={enter(i)} onpointerleave={leave(i)} onpointercancel={leave(i)} use:mount={i}>
+        {@render children(toast.message, toast.type, toast.id, variant)}
+      </div>
+    </div>
+  {/each}
+</div>

package/_svseeds/_Toast.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface ToastProps {
+    children: Snippet<[string, string, string, string]>;
+    name?: string;
+    timeout?: number;
+    duration?: number;
+    styling?: SVSClass;
+    variant?: string;
+}
+export type ToastReqdProps = "children";
+export type ToastBindProps = "variant";
+export declare function toast(message: string, type?: string, name?: string, timeout?: number): string;
+export declare function removeToast(id: string, name?: string): void;
+import { type Snippet } from "svelte";
+import { type SVSClass } from "./core";

package/_svseeds/_Tooltip.svelte

@@ -27,6 +27,22 @@
     {/if}
   </div>
   ```
+  ### Exports
+  ```ts
+  /**
+  * Action function for use with SvSeeds components.
+  *
+  * @param text - Text content for the tooltip's aria-label
+  * @param delay - Delay in milliseconds before the tooltip appears (default: 1000)
+  * @param cursor - Whether the tooltip should follow cursor movement
+  * @param name - Unique identifier for the tooltip component
+  */
+  function tooltipAction(text: string, delay?: number, cursor?: boolean, name?: string): Action
+  /**
+  * Action function for use with standard HTML elements.
+  */
+  function tooltip(node: HTMLElement, params: { text: string, delay?: number, cursor?: boolean, name?: string }): ActionReturn
+  ```
 -->
 <script module lang="ts">
   export interface TooltipProps {

package/_svseeds/_Tooltip.svelte.d.ts

@@ -26,35 +26,3 @@ export type Align = "start" | "center" | "end";
 import { type Snippet } from "svelte";
 import { type Action, type ActionReturn } from "svelte/action";
 import { type SVSClass } from "./core";
-/**
- * ### Types
- * default value: *`(value)`*
- * ```ts
- * interface TooltipProps {
- *   children?: Snippet<[string, string, boolean]>; // Snippet<[text,variant,isFlipped]>
- *   name?: string;
- *   position?: Position; // ("top")
- *   align?: Align; // ("center")
- *   offset?: Vector; // ({ x: 0, y: 0 })
- *   element?: HTMLDivElement; // bindable
- *   styling?: SVSClass;
- *   variant?: string; // bindable (VARIANT.NEUTRAL)
- * }
- * type Vector = { x: number, y: number };
- * type Position = "top" | "right" | "bottom" | "left";
- * type Align = "start" | "center" | "end";
- * ```
- * ### Anatomy
- * ```svelte
- * <div class="whole" bind:this={element} conditional>
- *   {#if children}
- *     {children}
- *   {:else}
- *     {text} // `text` is an argument of the tooltip/tooltipAction function
- *   {/if}
- * </div>
- * ```
- */
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "variant" | "element">;
-type Tooltip = ReturnType<typeof Tooltip>;
-export default Tooltip;

package/index.d.ts

@@ -15,6 +15,7 @@ export { default as Sortable, type SortableProps, type SortableReqdProps, type S
 export { default as Tabs, type TabsProps, type TabsReqdProps, type TabsBindProps } from "./_svseeds/_Tabs.svelte";
 export { default as TagsInput, type TagsInputProps, type TagsInputReqdProps, type TagsInputBindProps, type TagsInputEvents } from "./_svseeds/_TagsInput.svelte";
 export { default as TextField, type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps, type TextFieldValidation } from "./_svseeds/_TextField.svelte";
+export { default as Toast, type ToastProps, type ToastReqdProps, type ToastBindProps, toast, removeToast } from "./_svseeds/_Toast.svelte";
 export { default as Toggle, type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./_svseeds/_Toggle.svelte";
 export { default as ToggleGroup, type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindProps } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, type TooltipProps, type TooltipReqdProps, type TooltipBindProps, type Vector, type Position, type Align, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";

package/index.js

@@ -15,6 +15,7 @@ export { default as Sortable, SortableItems } from "./_svseeds/_Sortable.svelte"
 export { default as Tabs } from "./_svseeds/_Tabs.svelte";
 export { default as TagsInput } from "./_svseeds/_TagsInput.svelte";
 export { default as TextField } from "./_svseeds/_TextField.svelte";
+export { default as Toast, toast, removeToast } from "./_svseeds/_Toast.svelte";
 export { default as Toggle } from "./_svseeds/_Toggle.svelte";
 export { default as ToggleGroup } from "./_svseeds/_ToggleGroup.svelte";
 export { default as Tooltip, tooltip, tooltipAction } from "./_svseeds/_Tooltip.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svseeds",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Simple components for Svelte.",
   "type": "module",
   "main": "./index.js",