svseeds 0.5.2 → 0.6.0

package/README.md

@@ -6,4 +6,10 @@
 
 SvSeeds is a collection of essential functional components for Svelte development. These components are intentionally designed with minimal styling, giving you complete freedom to apply your own styles based on your project requirements. For specialized needs, you can download the components as .svelte files through our CLI tool and customize their functionality directly.
 
-**WIP**
+## Documentation
+
+Visit https://svseeds.dev to view the documentation.
+
+## License
+
+Licensed under the [MIT license](https://github.com/scirexs/svseeds-ui/blob/main/LICENSE).

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/_Modal.svelte

@@ -55,7 +55,7 @@
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
   const cls = fnClass(preset, styling);
-  const attrs = omit(attributes, "class", "id", "autofocus", "aria-label", "onclick", "onkeydown", "ontoggle");
+  const attrs = omit(attributes, "class", "id", "aria-label", "onclick", "onkeydown", "ontoggle");
 
   // *** Bind Handlers *** //
   $effect.pre(() => {
@@ -90,7 +90,7 @@
 
 <!---------------------------------------->
 
-<dialog bind:this={element} class={cls(PARTS.WHOLE, variant)} aria-label={ariaLabel} {id} {onclick} {onkeydown} {ontoggle} autofocus={true} {...attrs} style="margin:auto;background-color:transparent;">
+<dialog bind:this={element} class={cls(PARTS.WHOLE, variant)} aria-label={ariaLabel} {id} {onclick} {onkeydown} {ontoggle} {...attrs} style="margin:auto;background-color:transparent;">
   {#if open}
     <div class={cls(PARTS.MAIN, variant)} transition:fade={{ duration, easing: cubicOut }}>
       {@render children(variant)}

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.2",
+  "version": "0.6.0",
   "description": "Simple components for Svelte.",
   "type": "module",
   "main": "./index.js",