kosui 0.2.0 → 0.4.0

package/dist/menu/menu-content.svelte

@@ -1,47 +0,0 @@
-<script module lang="ts">
-  import { baseClasses, type Variants } from "../base.js";
-  import { getMenuContext } from "./index.js";
-  import { mergeComponentProps } from "../merge-props.js";
-  import { Popover, type PopoverProps } from "../popover/index.js";
-  import type { ClassName } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
-
-  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

@@ -1,10 +0,0 @@
-import { type Variants } from "../base.js";
-import { type PopoverProps } from "../popover/index.js";
-import type { ClassName } from "../utils.js";
-import type { Snippet } from "svelte";
-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

@@ -1,18 +0,0 @@
-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

@@ -1,118 +0,0 @@
-import { Bindable } from "../bindable.svelte.js";
-import { OrderedHTMLElements } from "../ordered-html-elements.js";
-import { Shortcut } from "../shortcut/index.js";
-import { TypingBuffer } from "../utils.js";
-import { getContext, setContext } from "svelte";
-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-trigger-button.svelte

@@ -1,31 +0,0 @@
-<script lang="ts" module>
-  import { Button, type ButtonProps } from "../button/index.js";
-  import { getMenuContext } from "./index.js";
-  import { mergeProps } from "../merge-props.js";
-  import { Shortcut } from "../shortcut/index.js";
-
-  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

@@ -1,5 +0,0 @@
-import { type ButtonProps } from "../button/index.js";
-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

@@ -1,42 +0,0 @@
-<script lang="ts" module>
-  import type { Variants } from "../base.js";
-  import { getMenuContext } from "./index.js";
-  import { mergeProps } from "../merge-props.js";
-  import { Shortcut } from "../shortcut/index.js";
-  import type { ClassName } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
-
-  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

@@ -1,10 +0,0 @@
-import type { Variants } from "../base.js";
-import type { ClassName } from "../utils.js";
-import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-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/ordered-html-elements.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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/portal/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Portal, type PortalProps } from "./portal.svelte";
-export { default as Proxy, type ProxyProps } from "./proxy.svelte";

package/dist/portal/index.js

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

package/dist/portal/portal.svelte

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

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

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

package/dist/portal/proxy.svelte

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

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

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

package/dist/shortcut/shortcut-badge.svelte

@@ -1,41 +0,0 @@
-<script module lang="ts">
-  import { Box } from "../box/index.js";
-  import type { Shortcut } from "./index.js";
-  import { noop, type ClassName, type ElementRef } from "../utils.js";
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import { twMerge, type ClassNameValue } from "tailwind-merge";
-
-  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

@@ -1,11 +0,0 @@
-import type { Shortcut } from "./index.js";
-import { type ClassName, type ElementRef } from "../utils.js";
-import type { HTMLInputAttributes } from "svelte/elements";
-import { type ClassNameValue } from "tailwind-merge";
-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/slider/slider-context.svelte.d.ts

@@ -1,50 +0,0 @@
-import type { SliderColor, SliderHandleLabelArrowProps, SliderHandleLabelProps, SliderHandleProps, SliderMarkDotProps, SliderMarkLabelProps, SliderMarkProps, SliderRadius, SliderSize } from "./index.js";
-import { type Snippet } from "svelte";
-export type Mark = {
-    value: number;
-    label?: string;
-};
-export declare class SliderContext {
-    #private;
-    onChange: ((value: number) => void) | undefined;
-    onChangeEnd: ((value: number) => void) | undefined;
-    sliderEl: HTMLDivElement;
-    hovered: boolean;
-    clicked: boolean;
-    dragging: boolean;
-    focused: boolean;
-    constructor(getValue: () => number, setValue: (val: number) => void, min: () => number, max: () => number, step: () => number, marks: () => Mark[], disabled: () => boolean, label: (value: number) => string, labelAlwaysOn: () => boolean, inverted: () => boolean, restrictToMarks: () => boolean, color: () => SliderColor, size: () => SliderSize, radius: () => SliderRadius, onChange: ((value: number) => void) | undefined, onChangeEnd: ((value: number) => void) | undefined, handleRenderer: () => Snippet<[SliderHandleProps]>, handleLabelRenderer: () => Snippet<[SliderHandleLabelProps]>, handleLabelArrowRenderer: () => Snippet<[SliderHandleLabelArrowProps]>, markRenderer: () => Snippet<[SliderMarkProps]>, markDotRenderer: () => Snippet<[SliderMarkDotProps]>, markLabelRenderer: () => Snippet<[SliderMarkLabelProps]>);
-    get value(): number;
-    set value(value: number);
-    get min(): number;
-    get max(): number;
-    get step(): number;
-    get marks(): Mark[];
-    get disabled(): boolean;
-    get label(): string;
-    get labelAlwaysOn(): boolean;
-    get inverted(): boolean;
-    get restrictToMarks(): boolean;
-    get color(): SliderColor;
-    get size(): SliderSize;
-    get radius(): SliderRadius;
-    get handleRenderer(): Snippet<[SliderHandleProps]>;
-    get handleLabelRenderer(): Snippet<[SliderHandleLabelProps]>;
-    get handleLabelArrowRenderer(): Snippet<[SliderHandleLabelArrowProps]>;
-    get markRenderer(): Snippet<[SliderMarkProps]>;
-    get markDotRenderer(): Snippet<[SliderMarkDotProps]>;
-    get markLabelRenderer(): Snippet<[SliderMarkLabelProps]>;
-    get position(): number;
-    get animated(): boolean;
-    clamp: (val: number, minVal: number, maxVal: number) => number;
-    getValueFromPosition: (position: number) => number;
-    getPositionFromValue: (val: number) => number;
-    pointerDown: (event: PointerEvent) => void;
-    pointerMove: (event: PointerEvent) => void;
-    pointerUp: (event: PointerEvent) => void;
-    keyDown: (event: KeyboardEvent) => void;
-    focus: () => void;
-    blur: () => void;
-}
-export declare function setSliderContext(state: SliderContext): SliderContext;
-export declare function getSliderContext(): SliderContext;