kosui 0.0.7

package/dist/modal/modal.svelte

@@ -0,0 +1,123 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLDialogAttributes } from "svelte/elements";
+  import { scale } from "svelte/transition";
+  import { twMerge } from "tailwind-merge";
+  import { events } from "..";
+  import { mergeProps } from "../merge-props";
+  import { Shortcut } from "../shortcut";
+  import { type ClassName } from "../utils";
+
+  export type ModalProps = {
+    ref?: HTMLDialogElement;
+    onCancel?: () => void;
+    children: Snippet;
+  } & ClassName &
+    HTMLDialogAttributes;
+</script>
+
+<script lang="ts">
+  let {
+    ref = $bindable(),
+    open = $bindable(),
+    onCancel,
+    children,
+    class: className,
+    ...restProps
+  }: ModalProps = $props();
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (Shortcut.ESCAPE.matches(event)) {
+      open = false;
+      onCancel?.();
+      event.preventDefault();
+    }
+    event.stopImmediatePropagation();
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (ref && ref === event.target) {
+      const rect = ref.getBoundingClientRect();
+      if (
+        event.clientY < rect.top ||
+        event.clientY > rect.top + rect.height ||
+        event.clientX < rect.left ||
+        event.clientX > rect.left + rect.width
+      ) {
+        open = false;
+        onCancel?.();
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }
+  }
+
+  $effect(() => {
+    if (ref) {
+      ref.showModal();
+      events.on("keydown", handleKeydown);
+      events.on("mousedown", handleClickOutside);
+
+      return () => {
+        events.remove("keydown", handleKeydown);
+        events.remove("mousedown", handleClickOutside);
+      };
+    }
+  });
+</script>
+
+{#if open}
+  <dialog
+    bind:this={ref}
+    class={twMerge("m-auto rounded-lg p-5 shadow-lg", className)}
+    transition:scale={{ duration: 150, start: 0.95 }}
+    {...mergeProps(restProps, {
+      onintrostart: () => {
+        if (ref) {
+          ref.classList.remove("backdrop-out");
+          ref.classList.add("backdrop-in");
+        }
+      },
+      onoutrostart: () => {
+        if (ref) {
+          ref.classList.remove("backdrop-in");
+          ref.classList.add("backdrop-out");
+        }
+      },
+    })}
+  >
+    {@render children()}
+  </dialog>
+{/if}
+
+<style>
+  .backdrop-in::backdrop {
+    animation: backdrop-in 150ms forwards;
+  }
+
+  .backdrop-out::backdrop {
+    animation: backdrop-out 150ms forwards;
+  }
+
+  @keyframes backdrop-in {
+    from {
+      background: rgba(0, 0, 0, 0);
+      backdrop-filter: blur(0px);
+    }
+    to {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(2px);
+    }
+  }
+
+  @keyframes backdrop-out {
+    from {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(2px);
+    }
+    to {
+      background: rgba(0, 0, 0, 0);
+      backdrop-filter: blur(0px);
+    }
+  }
+</style>

package/dist/modal/modal.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLDialogAttributes } from "svelte/elements";
+import { type ClassName } from "../utils";
+export type ModalProps = {
+    ref?: HTMLDialogElement;
+    onCancel?: () => void;
+    children: Snippet;
+} & ClassName & HTMLDialogAttributes;
+declare const Modal: import("svelte").Component<ModalProps, {}, "open" | "ref">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/ordered-html-elements.d.ts

@@ -0,0 +1,7 @@
+export declare class OrderedHTMLElements {
+    #private;
+    get items(): HTMLElement[];
+    getInsertionIndex(item: HTMLElement): number;
+    add(item: HTMLElement): void;
+    delete(item: HTMLElement): void;
+}

package/dist/ordered-html-elements.js

@@ -0,0 +1,29 @@
+export class OrderedHTMLElements {
+    #items = [];
+    get items() {
+        return this.#items;
+    }
+    getInsertionIndex(item) {
+        if (this.#items.includes(item)) {
+            throw new Error(`Ordered items already contains ${item}`);
+        }
+        for (let i = 0; i < this.#items.length; i++) {
+            const position = item.compareDocumentPosition(this.#items[i]);
+            if ((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0) {
+                return i;
+            }
+        }
+        return this.#items.length;
+    }
+    add(item) {
+        const index = this.getInsertionIndex(item);
+        this.#items.splice(index, 0, item);
+    }
+    delete(item) {
+        const index = this.#items.indexOf(item);
+        if (index === -1) {
+            return;
+        }
+        this.items.splice(index, 1);
+    }
+}

package/dist/popover/index.d.ts

@@ -0,0 +1 @@
+export { default as Popover, type PopoverProps } from "./popover.svelte";

package/dist/popover/index.js

@@ -0,0 +1 @@
+export { default as Popover } from "./popover.svelte";

package/dist/popover/popover.svelte

@@ -0,0 +1,184 @@
+<script lang="ts" module>
+  import * as floatingUi from "@floating-ui/dom";
+  import { type Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { scale } from "svelte/transition";
+  import { twMerge, type ClassNameValue } from "tailwind-merge";
+  import { events } from "..";
+  import { mergeProps } from "../merge-props";
+  import { Shortcut } from "../shortcut";
+  import {
+    noop,
+    type ClassName,
+    type ElementRef,
+    type ToggleEventWithTarget,
+  } from "../utils";
+
+  export type PopoverProps = {
+    arrow?: boolean;
+    arrowClass?: ClassNameValue;
+    placement?: floatingUi.Placement;
+    strategy?: floatingUi.Strategy;
+    open?: boolean;
+    anchorEl?: HTMLElement;
+    onKeydownWhileOpen?: (event: KeyboardEvent) => void;
+    children: Snippet;
+  } & ClassName &
+    ElementRef &
+    HTMLAttributes<HTMLDivElement>;
+
+  type Side = "top" | "bottom" | "left" | "right";
+</script>
+
+<script lang="ts">
+  let {
+    arrow = false,
+    placement = "top",
+    strategy = "fixed",
+    open = $bindable(false),
+    anchorEl,
+    children,
+    onKeydownWhileOpen,
+    el: popoverEl = $bindable(),
+    ref = noop,
+    arrowClass,
+    class: className,
+    ...restProps
+  }: PopoverProps = $props();
+
+  let arrowEl: HTMLDivElement | undefined = $state();
+
+  function getArrowRotation(placement: Side) {
+    if (placement === "top") {
+      return "rotateZ(0deg)";
+    } else if (placement === "right") {
+      return "rotateZ(90deg)";
+    } else if (placement === "bottom") {
+      return "rotateZ(180deg)";
+    } else if (placement === "left") {
+      return "rotateZ(270deg)";
+    }
+  }
+
+  function handleEscape(event: KeyboardEvent) {
+    if (popoverEl && Shortcut.ESCAPE.matches(event)) {
+      popoverEl.hidePopover();
+      anchorEl?.focus();
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (
+      popoverEl &&
+      event.target instanceof Node &&
+      !popoverEl.contains(event.target) &&
+      (!anchorEl || !anchorEl.contains(event.target))
+    ) {
+      popoverEl.hidePopover();
+    }
+  }
+
+  function handleClickInside(event: MouseEvent) {
+    event.stopImmediatePropagation();
+  }
+
+  function onbeforetoggle(event: ToggleEventWithTarget<HTMLDivElement>) {
+    if (event.newState === "closed") {
+      open = false;
+    } else {
+      open = true;
+    }
+  }
+
+  $effect(() => {
+    if (popoverEl) {
+      popoverEl.showPopover();
+      events.on("keydown", handleEscape);
+      events.on("keydown", onKeydownWhileOpen);
+      events.on("mousedown", handleClickOutside);
+
+      return () => {
+        events.remove("keydown", handleEscape);
+        events.remove("keydown", onKeydownWhileOpen);
+        events.remove("mousedown", handleClickOutside);
+      };
+    }
+  });
+
+  $effect(() => {
+    if (anchorEl && popoverEl) {
+      return floatingUi.autoUpdate(anchorEl, popoverEl, updatePosition);
+    }
+  });
+
+  async function updatePosition() {
+    if (anchorEl && popoverEl && arrowEl) {
+      const computedPosition = await floatingUi.computePosition(
+        anchorEl,
+        popoverEl,
+        {
+          placement,
+          middleware: [
+            floatingUi.offset(6),
+            floatingUi.flip(),
+            floatingUi.shift({ padding: 5 }),
+            floatingUi.arrow({ element: arrowEl }),
+          ],
+          strategy,
+        },
+      );
+
+      Object.assign(popoverEl.style, {
+        left: `${computedPosition.x}px`,
+        top: `${computedPosition.y}px`,
+      });
+
+      if (computedPosition.middlewareData.arrow) {
+        const arrow = computedPosition.middlewareData.arrow;
+
+        const side = computedPosition.placement.split("-")[0] as Side;
+
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right",
+        }[side];
+
+        Object.assign(arrowEl.style, {
+          left: arrow.x != null ? `${arrow.x}px` : "",
+          top: arrow.y != null ? `${arrow.y}px` : "",
+          [staticSide]: "-4px",
+          transform: getArrowRotation(side),
+        });
+      }
+    }
+  }
+
+  if (!children) {
+    console.log(children);
+  }
+</script>
+
+{#if open}
+  <div
+    bind:this={popoverEl}
+    use:ref
+    popover="manual"
+    class={twMerge(className)}
+    transition:scale={{ duration: 150, start: 0.95 }}
+    {...mergeProps(restProps, { onbeforetoggle, onclick: handleClickInside })}
+  >
+    {@render children()}
+    <div
+      bind:this={arrowEl}
+      class={twMerge(
+        arrowClass,
+        "absolute size-2 rotate-45",
+        arrow ? "block" : "hidden",
+      )}
+    ></div>
+  </div>
+{/if}

package/dist/popover/popover.svelte.d.ts

@@ -0,0 +1,18 @@
+import * as floatingUi from "@floating-ui/dom";
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ClassNameValue } from "tailwind-merge";
+import { type ClassName, type ElementRef } from "../utils";
+export type PopoverProps = {
+    arrow?: boolean;
+    arrowClass?: ClassNameValue;
+    placement?: floatingUi.Placement;
+    strategy?: floatingUi.Strategy;
+    open?: boolean;
+    anchorEl?: HTMLElement;
+    onKeydownWhileOpen?: (event: KeyboardEvent) => void;
+    children: Snippet;
+} & ClassName & ElementRef & HTMLAttributes<HTMLDivElement>;
+declare const Popover: import("svelte").Component<PopoverProps, {}, "open" | "el">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/portal/index.d.ts

@@ -0,0 +1 @@
+export { default as Portal } from "./portal.svelte";

package/dist/portal/index.js

@@ -0,0 +1 @@
+export { default as Portal } from "./portal.svelte";

package/dist/portal/portal.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { mount, unmount, type Snippet } from "svelte";
+  import Proxy from "./proxy.svelte";
+
+  type Props = { children?: Snippet; target?: HTMLElement };
+  const { children, target = document.body }: Props = $props();
+
+  $effect(() => {
+    const instance = mount(Proxy, { target, props: { children } });
+    return () => unmount(instance);
+  });
+</script>

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

@@ -0,0 +1,8 @@
+import { type Snippet } from "svelte";
+type Props = {
+    children?: Snippet;
+    target?: HTMLElement;
+};
+declare const Portal: import("svelte").Component<Props, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/portal/proxy.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  type Props = { children?: Snippet };
+  const { children }: Props = $props();
+</script>
+
+{#if children}
+  {@render children()}
+{/if}

package/dist/portal/proxy.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children?: Snippet;
+};
+declare const Proxy: import("svelte").Component<Props, {}, "">;
+type Proxy = ReturnType<typeof Proxy>;
+export default Proxy;

package/dist/progress/circular-progress.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  const DASH_ARRAY = 2 * 3.1415926535 * 10;
+
+  type Props = {
+    children?: Snippet;
+    progress?: number;
+    size?: string | number;
+    trackColor?: string;
+    textColor?: string;
+    color?: string;
+    class?: string;
+  };
+
+  const {
+    children,
+    progress,
+    size = 24,
+    trackColor = "color-mix(in srgb, currentColor 10%, transparent)",
+    textColor = "currentColor",
+    color = "currentColor",
+    class: className,
+  }: Props = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="transparent"
+  class={className}
+  class:circular={progress === undefined}
+>
+  <circle cx="50%" cy="50%" r="10px" stroke={trackColor} stroke-width="2px" />
+  <circle
+    class:path={progress === undefined}
+    cx="50%"
+    cy="50%"
+    r="10px"
+    stroke={color}
+    stroke-width="2px"
+    stroke-linecap="round"
+    stroke-dasharray={DASH_ARRAY}
+    stroke-dashoffset={(1 - (progress ?? 1)) * DASH_ARRAY}
+    transform-origin="center"
+    transform="rotate(-90)"
+  />
+  <text
+    x="12"
+    y="12"
+    font-size="7"
+    text-anchor="middle"
+    dominant-baseline="central"
+    fill={textColor}
+  >
+    {@render children?.()}
+  </text>
+</svg>
+
+<style>
+  .circular {
+    animation: rotate 2s linear infinite;
+  }
+
+  .path {
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -62;
+    }
+  }
+</style>

package/dist/progress/circular-progress.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children?: Snippet;
+    progress?: number;
+    size?: string | number;
+    trackColor?: string;
+    textColor?: string;
+    color?: string;
+    class?: string;
+};
+declare const CircularProgress: import("svelte").Component<Props, {}, "">;
+type CircularProgress = ReturnType<typeof CircularProgress>;
+export default CircularProgress;

package/dist/progress/index.d.ts

@@ -0,0 +1 @@
+export { default as CircularProgress } from "./circular-progress.svelte";

package/dist/progress/index.js

@@ -0,0 +1 @@
+export { default as CircularProgress } from "./circular-progress.svelte";

package/dist/shortcut/index.d.ts

@@ -0,0 +1,2 @@
+export { Shortcut } from "./shortcut";
+export { default as ShortcutBadge, type ShortcutBadgeProps, } from "./shortcut-badge.svelte";

package/dist/shortcut/index.js

@@ -0,0 +1,2 @@
+export { Shortcut } from "./shortcut";
+export { default as ShortcutBadge, } from "./shortcut-badge.svelte";

package/dist/shortcut/shortcut-badge.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { twMerge, type ClassNameValue } from "tailwind-merge";
+  import { Box } from "../box";
+  import { noop, type ClassName, type ElementRef } from "../utils";
+  import type { Shortcut } from "./shortcut";
+
+  export type ShortcutBadgeProps = {
+    shortcut: Shortcut;
+    badgeClass?: ClassNameValue;
+  } & ElementRef &
+    ClassName &
+    HTMLInputAttributes;
+</script>
+
+<script lang="ts">
+  let {
+    shortcut,
+    el = $bindable(),
+    ref = noop,
+    class: className,
+    badgeClass,
+  }: ShortcutBadgeProps = $props();
+</script>
+
+<div
+  bind:this={el}
+  use:ref
+  class={twMerge("flex gap-1 text-m3-on-surface", className)}
+>
+  {#each shortcut as symbol, index (index)}
+    <Box
+      variant="elevated"
+      color="secondary"
+      centered
+      class={twMerge("h-5 min-w-5 rounded border p-1 text-xs", badgeClass)}
+    >
+      {symbol}
+    </Box>
+  {/each}
+</div>

package/dist/shortcut/shortcut-badge.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import { type ClassNameValue } from "tailwind-merge";
+import { type ClassName, type ElementRef } from "../utils";
+import type { Shortcut } from "./shortcut";
+export type ShortcutBadgeProps = {
+    shortcut: Shortcut;
+    badgeClass?: ClassNameValue;
+} & ElementRef & ClassName & HTMLInputAttributes;
+declare const ShortcutBadge: import("svelte").Component<ShortcutBadgeProps, {}, "el">;
+type ShortcutBadge = ReturnType<typeof ShortcutBadge>;
+export default ShortcutBadge;

package/dist/shortcut/shortcut.d.ts

@@ -0,0 +1,29 @@
+export declare class Shortcut {
+    key: string;
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    shift: boolean;
+    constructor(shortcut: {
+        key: string;
+        alt?: boolean;
+        ctrl?: boolean;
+        meta?: boolean;
+        shift?: boolean;
+    });
+    matches(event: KeyboardEvent): boolean;
+    toChar(): string;
+    toString(): string;
+    [Symbol.iterator](): Iterator<string>;
+    static isChar(event: KeyboardEvent): boolean;
+    static fromEvent(event: KeyboardEvent): Shortcut;
+    static ARROW_UP: Shortcut;
+    static ARROW_DOWN: Shortcut;
+    static END: Shortcut;
+    static ENTER: Shortcut;
+    static ESCAPE: Shortcut;
+    static HOME: Shortcut;
+    static SPACE: Shortcut;
+    static TAB_BACKWARD: Shortcut;
+    static TAB_FORWARD: Shortcut;
+}