kosui 0.0.7

package/dist/menu/menu-actions.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { Check } from "@lucide/svelte";
+  import { MenuDivider, MenuHeader, MenuItem } from ".";
+  import type { Action } from "../command";
+
+  export type MenuActionsProps = {
+    actions: Action[];
+  };
+  let { actions }: MenuActionsProps = $props();
+
+  let categoryHasSelected = $derived(
+    actions.reduce(
+      (acc, { category, selected }) => ({
+        ...acc,
+        [category]: acc[category] || selected !== undefined,
+      }),
+      {} as Record<string, boolean>,
+    ),
+  );
+</script>
+
+{#each actions as action, index (action)}
+  {@const Icon = action.icon}
+  {#if index === 0 || actions[index - 1].category !== action.category}
+    {#if index !== 0}
+      <MenuDivider />
+    {/if}
+    <MenuHeader>{action.category}</MenuHeader>
+  {/if}
+  <MenuItem
+    class="gap-2"
+    onSelect={action.callback}
+    title={action.description}
+    disabled={!action.enabled()}
+  >
+    {#if categoryHasSelected[action.category]}
+      {#if action.selected?.()}
+        <Check class="text-m3-primary" size={16} />
+      {:else}
+        <div class="size-4"></div>
+      {/if}
+    {/if}
+    <Icon size={16} />
+    {action.name}
+    {#if action.shortcut}
+      <div class="ml-auto pl-2 text-xs">
+        {action.shortcut.toString()}
+      </div>
+    {/if}
+  </MenuItem>
+{/each}

package/dist/menu/menu-actions.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Action } from "../command";
+export type MenuActionsProps = {
+    actions: Action[];
+};
+declare const MenuActions: import("svelte").Component<MenuActionsProps, {}, "">;
+type MenuActions = ReturnType<typeof MenuActions>;
+export default MenuActions;

package/dist/menu/menu-content.svelte

@@ -0,0 +1,47 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import { mergeComponentProps } from "../merge-props";
+  import { Popover, type PopoverProps } from "../popover";
+  import { type ClassName } from "../utils";
+  import { getMenuContext } from "./menu-context.svelte";
+
+  export type MenuContentProps = {
+    children: Snippet;
+  } & ClassName &
+    Variants &
+    Omit<PopoverProps, "children" | "open">;
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    class: className,
+    variant = "elevated",
+    color = "primary",
+    shape = "rounded",
+    placement = "bottom",
+    ...restProps
+  }: MenuContentProps = $props();
+
+  const ctx = getMenuContext();
+</script>
+
+<Popover
+  bind:open={ctx.open}
+  role="menu"
+  class={twMerge(
+    baseClasses({ variant, color, shape }),
+    "max-h-[60%] border bg-m3-surface-container-highest p-1 shadow",
+    className,
+  )}
+  {placement}
+  anchorEl={ctx.anchorEl}
+  {...mergeComponentProps(Popover, restProps, {
+    onmouseleave: () => ctx.blur(),
+    onKeydownWhileOpen: (event) => ctx.handleKeyDown(event),
+  })}
+>
+  {@render children()}
+</Popover>

package/dist/menu/menu-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import { type Variants } from "../base";
+import { type PopoverProps } from "../popover";
+import { type ClassName } from "../utils";
+export type MenuContentProps = {
+    children: Snippet;
+} & ClassName & Variants & Omit<PopoverProps, "children" | "open">;
+declare const MenuContent: import("svelte").Component<MenuContentProps, {}, "">;
+type MenuContent = ReturnType<typeof MenuContent>;
+export default MenuContent;

package/dist/menu/menu-context.svelte.d.ts

@@ -0,0 +1,18 @@
+export declare class MenuContext {
+    #private;
+    focused: HTMLElement | undefined;
+    constructor(getOpen: () => boolean, setOpen: (val: boolean) => void, getAnchorEl: () => HTMLElement | undefined, setAnchorEl: (anchorEl: HTMLElement | undefined) => void);
+    get open(): boolean;
+    set open(value: boolean);
+    get anchorEl(): HTMLElement | undefined;
+    set anchorEl(value: HTMLElement | undefined);
+    close(): void;
+    get items(): HTMLElement[];
+    add(item: HTMLElement): () => void;
+    delete(item: HTMLElement): void;
+    focus(item?: HTMLElement): void;
+    blur(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+}
+export declare function setMenuContext(state: MenuContext): MenuContext;
+export declare function getMenuContext(): MenuContext;

package/dist/menu/menu-context.svelte.js

@@ -0,0 +1,118 @@
+import { getContext, setContext } from "svelte";
+import { Bindable } from "../bindable.svelte";
+import { OrderedHTMLElements } from "../ordered-html-elements";
+import { Shortcut } from "../shortcut";
+import { TypingBuffer } from "../utils";
+export class MenuContext {
+    #open;
+    #anchorEl;
+    #items = new OrderedHTMLElements();
+    focused = $state();
+    #buffer = new TypingBuffer();
+    constructor(getOpen, setOpen, getAnchorEl, setAnchorEl) {
+        this.#open = new Bindable(getOpen());
+        this.#open.bind(getOpen, setOpen);
+        this.#anchorEl = new Bindable(getAnchorEl());
+        this.#anchorEl.bind(getAnchorEl, setAnchorEl);
+    }
+    get open() {
+        return this.#open.value;
+    }
+    set open(value) {
+        this.#open.value = value;
+    }
+    get anchorEl() {
+        return this.#anchorEl.value;
+    }
+    set anchorEl(value) {
+        this.#anchorEl.value = value;
+    }
+    close() {
+        this.open = false;
+        this.anchorEl?.focus();
+    }
+    get items() {
+        return this.#items.items;
+    }
+    add(item) {
+        this.#items.add(item);
+        return () => this.delete(item);
+    }
+    delete(item) {
+        this.#items.delete(item);
+    }
+    focus(item) {
+        if (!item)
+            return;
+        this.focused = item;
+        this.focused.focus();
+    }
+    blur() {
+        this.focused?.blur();
+        this.focused = undefined;
+    }
+    handleKeyDown(event) {
+        if (!this.items)
+            return;
+        if (Shortcut.ARROW_UP.matches(event) ||
+            Shortcut.TAB_BACKWARD.matches(event)) {
+            if (!this.focused) {
+                this.focus(this.items[this.items.length - 1]);
+            }
+            else {
+                let activeIndex = this.items.indexOf(this.focused);
+                do {
+                    activeIndex =
+                        (activeIndex - 1 + this.items.length) % this.items.length;
+                } while (this.items[activeIndex].disabled);
+                this.focus(this.items[activeIndex]);
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.ARROW_DOWN.matches(event) ||
+            Shortcut.TAB_FORWARD.matches(event)) {
+            if (!this.focused) {
+                this.focus(this.items[0]);
+            }
+            else {
+                let activeIndex = this.items.indexOf(this.focused);
+                do {
+                    activeIndex = (activeIndex + 1) % this.items.length;
+                } while (this.items[activeIndex].disabled);
+                this.focus(this.items[activeIndex]);
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.HOME.matches(event)) {
+            this.focus(this.items[0]);
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.END.matches(event)) {
+            this.focus(this.items[this.items.length - 1]);
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.ENTER.matches(event)) {
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.isChar(event)) {
+            const prefix = this.#buffer.append(event.key);
+            const matchedItem = this.items.find((menuItem) => (menuItem.textContent?.trim().toLowerCase() ?? "").startsWith(prefix.toLowerCase()));
+            this.focus(matchedItem);
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+}
+export function setMenuContext(state) {
+    return setContext(MenuContext, state);
+}
+export function getMenuContext() {
+    const ctx = getContext(MenuContext);
+    if (!ctx)
+        throw new Error("MenuContext is undefined");
+    return ctx;
+}

package/dist/menu/menu-item.svelte

@@ -0,0 +1,85 @@
+<script module lang="ts">
+  import { type Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { baseClasses, type Variants } from "../base";
+  import { mergeProps } from "../merge-props";
+  import { Shortcut } from "../shortcut";
+  import { type ClassName, type ElementRef } from "../utils";
+  import { getMenuContext } from "./menu-context.svelte";
+
+  export type MenuItemProps = {
+    onSelect?: (el: HTMLElement) => void;
+    children: Snippet<[]>;
+  } & ElementRef &
+    ClassName &
+    Variants &
+    Omit<HTMLButtonAttributes, "type" | "value">;
+</script>
+
+<script lang="ts">
+  let {
+    onSelect,
+    children,
+    el = $bindable(),
+    class: className,
+    variant = "plain",
+    color = "secondary",
+    shape = "rounded",
+    ...restProps
+  }: MenuItemProps = $props();
+
+  const ctx = getMenuContext();
+
+  function handleClick() {
+    if (el) {
+      onSelect?.(el);
+    }
+    ctx.close();
+  }
+
+  function handleMouseEnter(event: MouseEvent) {
+    if (event.target instanceof HTMLElement) {
+      ctx.focus(event.target);
+    }
+  }
+
+  function handleFocus(event: FocusEvent) {
+    if (event.target instanceof HTMLElement) {
+      ctx.focus(event.target);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (Shortcut.ENTER.matches(event) || Shortcut.SPACE.matches(event)) {
+      event.stopImmediatePropagation();
+    }
+  }
+
+  $effect(() => {
+    if (el) {
+      return ctx.add(el);
+    }
+  });
+</script>
+
+<button
+  bind:this={el}
+  role="menuitem"
+  class={twMerge(
+    baseClasses({ variant, color, shape, focus: true }),
+    "flex w-full items-center gap-1 px-2 py-1 text-left text-sm focus:ring-0",
+    className,
+  )}
+  {...mergeProps(
+    {
+      onclick: handleClick,
+      onmouseenter: handleMouseEnter,
+      onfocus: handleFocus,
+      onkeydown: handleKeyDown,
+    },
+    restProps,
+  )}
+>
+  {@render children()}
+</button>

package/dist/menu/menu-item.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import { type Variants } from "../base";
+import { type ClassName, type ElementRef } from "../utils";
+export type MenuItemProps = {
+    onSelect?: (el: HTMLElement) => void;
+    children: Snippet<[]>;
+} & ElementRef & ClassName & Variants & Omit<HTMLButtonAttributes, "type" | "value">;
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "el">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/menu/menu-trigger-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import { Button, type ButtonProps } from "../button";
+  import { mergeProps } from "../merge-props";
+  import { Shortcut } from "../shortcut";
+  import { getMenuContext } from "./menu-context.svelte";
+
+  export type MenuTriggerButtonProps = {} & ButtonProps;
+</script>
+
+<script lang="ts">
+  let { ...restProps }: MenuTriggerButtonProps = $props();
+
+  const ctx = getMenuContext();
+</script>
+
+<Button
+  bind:el={ctx.anchorEl}
+  {...mergeProps(
+    {
+      onclick: () => (ctx.open = !ctx.open),
+      onkeydown: (event: KeyboardEvent) => {
+        if (Shortcut.ENTER.matches(event) || Shortcut.SPACE.matches(event)) {
+          event.stopImmediatePropagation();
+        }
+      },
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx.open,
+    },
+    restProps,
+  )}
+/>

package/dist/menu/menu-trigger-button.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps } from "../button";
+export type MenuTriggerButtonProps = {} & ButtonProps;
+declare const MenuTriggerButton: import("svelte").Component<MenuTriggerButtonProps, {}, "">;
+type MenuTriggerButton = ReturnType<typeof MenuTriggerButton>;
+export default MenuTriggerButton;

package/dist/menu/menu-trigger.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  import { type Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import type { Variants } from "../base";
+  import { mergeProps } from "../merge-props";
+  import { Shortcut } from "../shortcut";
+  import { type ClassName } from "../utils";
+  import { getMenuContext } from "./menu-context.svelte";
+
+  export type MenuTriggerProps = {
+    children?: Snippet;
+  } & ClassName &
+    Variants &
+    HTMLButtonAttributes;
+</script>
+
+<script lang="ts">
+  let { children, class: className, ...restProps }: MenuTriggerProps = $props();
+
+  const ctx = getMenuContext();
+</script>
+
+<button
+  bind:this={ctx.anchorEl}
+  class={twMerge(className)}
+  {...mergeProps(
+    {
+      onclick: () => (ctx.open = !ctx.open),
+      onkeydown: (event: KeyboardEvent) => {
+        if (Shortcut.ENTER.matches(event) || Shortcut.SPACE.matches(event)) {
+          event.stopImmediatePropagation();
+        }
+      },
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx.open,
+    },
+    restProps,
+  )}
+>
+  {@render children?.()}
+</button>

package/dist/menu/menu-trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { Variants } from "../base";
+import { type ClassName } from "../utils";
+export type MenuTriggerProps = {
+    children?: Snippet;
+} & ClassName & Variants & HTMLButtonAttributes;
+declare const MenuTrigger: import("svelte").Component<MenuTriggerProps, {}, "">;
+type MenuTrigger = ReturnType<typeof MenuTrigger>;
+export default MenuTrigger;

package/dist/menu/menu.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ElementRef } from "../utils";
+  import { MenuContext, setMenuContext } from "./menu-context.svelte";
+
+  export type MenuProps = {
+    open?: boolean;
+    children: Snippet;
+  } & ElementRef;
+</script>
+
+<script lang="ts">
+  let {
+    open = $bindable(false),
+    children,
+    el = $bindable(),
+  }: MenuProps = $props();
+
+  setMenuContext(
+    new MenuContext(
+      () => open,
+      (value) => (open = value),
+      () => el,
+      (value) => (el = value),
+    ),
+  );
+</script>
+
+{@render children()}

package/dist/menu/menu.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { ElementRef } from "../utils";
+export type MenuProps = {
+    open?: boolean;
+    children: Snippet;
+} & ElementRef;
+declare const Menu: import("svelte").Component<MenuProps, {}, "open" | "el">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/merge-props.d.ts

@@ -0,0 +1,13 @@
+import type { Component, ComponentProps } from "svelte";
+import type { EventHandler } from "svelte/elements";
+export declare function interceptStopImmediatePropagation(event: Event, callback: () => void): void;
+export declare function runEventHandlers(target: EventTarget, event: Event & {
+    currentTarget: EventTarget & Element;
+}, ...handlers: EventHandler[]): void;
+type Props = Record<string, unknown>;
+type PropsUnion<T extends Props[]> = (T extends (infer U)[] ? U extends Props ? (k: {
+    [K in keyof U]: U[K];
+}) => void : never : never) extends (k: infer I) => void ? I : never;
+export declare function mergeProps<T extends Props[]>(...args: [...T]): PropsUnion<T>;
+export declare function mergeComponentProps<C extends Component<any>>(_component: C, ...args: Partial<ComponentProps<C>>[]): Partial<ComponentProps<C>>;
+export {};

package/dist/merge-props.js

@@ -0,0 +1,84 @@
+import { twMerge } from "tailwind-merge";
+function isClass(value) {
+    if (value === null || value === undefined) {
+        return true;
+    }
+    if (["string", "number", "bigint", "boolean"].includes(typeof value)) {
+        return true;
+    }
+    if (Array.isArray(value)) {
+        return value.every((item) => isClass(item));
+    }
+    return false;
+}
+function isHandlerKey(key) {
+    return key.startsWith("on") && key[2].toLowerCase() === key[2];
+}
+function isHandler(value) {
+    return typeof value === "function";
+}
+export function interceptStopImmediatePropagation(event, callback) {
+    const original = event.stopImmediatePropagation;
+    event.stopImmediatePropagation = function () {
+        callback();
+        original.call(event);
+    };
+}
+export function runEventHandlers(target, event, ...handlers) {
+    let stopped = false;
+    interceptStopImmediatePropagation(event, () => (stopped = true));
+    for (const handler of handlers) {
+        if (stopped)
+            break;
+        handler.call(target, event);
+    }
+}
+function chainHandlers(...handlers) {
+    return function (event) {
+        runEventHandlers(this, event, ...handlers);
+    };
+}
+function isCallback(value) {
+    return typeof value === "function";
+}
+function chainCallbacks(...callbacks) {
+    return function (...args) {
+        for (const callback of callbacks) {
+            callback(...args);
+        }
+    };
+}
+export function mergeProps(...args) {
+    const result = {};
+    for (const props of args) {
+        for (const key in props) {
+            const prevVal = result[key];
+            const currVal = props[key];
+            if (currVal === undefined) {
+                continue;
+            }
+            if (prevVal === undefined) {
+                result[key] = currVal;
+                continue;
+            }
+            if (isHandlerKey(key) && isHandler(prevVal) && isHandler(currVal)) {
+                result[key] = chainHandlers(prevVal, currVal);
+                continue;
+            }
+            if (isCallback(prevVal) && isCallback(currVal)) {
+                result[key] = chainCallbacks(prevVal, currVal);
+                continue;
+            }
+            if (key === "class" && isClass(prevVal) && isClass(currVal)) {
+                result[key] = twMerge(prevVal, currVal);
+                continue;
+            }
+            result[key] = currVal;
+        }
+    }
+    return result;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeComponentProps(_component, ...args) {
+    return mergeProps(...args);
+}

package/dist/modal/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal, type ModalProps } from "./modal.svelte";

package/dist/modal/index.js

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