kosui 0.2.0 → 0.5.0

package/dist/command/command-input.svelte.d.ts

@@ -1,7 +0,0 @@
-import { type Variants } from "../base.js";
-import type { ClassName, ElementRef } from "../utils.js";
-import type { HTMLInputAttributes } from "svelte/elements";
-export type CommandInputProps = {} & ElementRef & ClassName & Variants & HTMLInputAttributes;
-declare const CommandInput: import("svelte").Component<CommandInputProps, {}, "value">;
-type CommandInput = ReturnType<typeof CommandInput>;
-export default CommandInput;

package/dist/command/command-item.svelte

@@ -1,66 +0,0 @@
-<script module lang="ts">
-  import { baseClasses, type Variants } from "../base.js";
-  import { getCommandContext } from "./index.js";
-  import { mergeProps } from "../merge-props.js";
-  import type { ClassName, ElementRef } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
-
-  export type CommandItemProps = {
-    onSelect?: (el: HTMLElement) => void;
-    children: Snippet<[]>;
-  } & ElementRef &
-    ClassName &
-    Variants &
-    HTMLAttributes<HTMLDivElement>;
-</script>
-
-<script lang="ts">
-  let {
-    onSelect,
-    children,
-    el = $bindable(),
-    class: className,
-    variant = "plain",
-    color = "secondary",
-    shape = "rounded",
-    ...restProps
-  }: CommandItemProps = $props();
-
-  const ctx = getCommandContext();
-
-  function handleClick() {
-    if (el) {
-      onSelect?.(el);
-    }
-  }
-
-  function handleMouseEnter() {
-    ctx.focused = el;
-  }
-
-  $effect(() => {
-    if (el) {
-      return ctx.add(el);
-    }
-  });
-</script>
-
-<div
-  bind:this={el}
-  role="option"
-  tabindex="-1"
-  aria-selected={ctx.focused === el}
-  class={twMerge(
-    baseClasses({ variant, color, shape }),
-    "flex w-full cursor-pointer items-center gap-1 px-2 py-1 text-left text-sm focus:ring-0 disabled:bg-transparent aria-selected:bg-m3-secondary/15",
-    className,
-  )}
-  {...mergeProps(restProps, {
-    onclick: handleClick,
-    onmouseenter: handleMouseEnter,
-  })}
->
-  {@render children()}
-</div>

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

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

package/dist/command/command-search.svelte

@@ -1,28 +0,0 @@
-<script module lang="ts">
-  import { CommandInput, type CommandInputProps } from "./index.js";
-  import { SearchIcon } from "@lucide/svelte";
-
-  export type CommandSearchProps = {} & CommandInputProps;
-</script>
-
-<script lang="ts">
-  import { twMerge } from "tailwind-merge";
-
-  let {
-    value = $bindable(""),
-    placeholder = "Search...",
-    class: className,
-    ...restProps
-  }: CommandSearchProps = $props();
-</script>
-
-<div class={twMerge("flex items-center gap-2 px-2", className)}>
-  <SearchIcon size={16} />
-  <CommandInput
-    autofocus
-    bind:value
-    {placeholder}
-    class="h-10"
-    {...restProps}
-  />
-</div>

package/dist/command/command-search.svelte.d.ts

@@ -1,5 +0,0 @@
-import { type CommandInputProps } from "./index.js";
-export type CommandSearchProps = {} & CommandInputProps;
-declare const CommandSearch: import("svelte").Component<CommandSearchProps, {}, "value">;
-type CommandSearch = ReturnType<typeof CommandSearch>;
-export default CommandSearch;

package/dist/command/command.svelte

@@ -1,19 +0,0 @@
-<script module lang="ts">
-  import { CommandContext, setCommandContext } from "./index.js";
-  import type { ClassName } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
-
-  export type CommandProps = {
-    children: Snippet<[]>;
-  } & ClassName;
-</script>
-
-<script lang="ts">
-  let { children, class: className }: CommandProps = $props();
-  setCommandContext(new CommandContext());
-</script>
-
-<div class={twMerge("flex h-full flex-col p-1", className)}>
-  {@render children()}
-</div>

package/dist/command/command.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { ClassName } from "../utils.js";
-import type { Snippet } from "svelte";
-export type CommandProps = {
-    children: Snippet<[]>;
-} & ClassName;
-declare const Command: import("svelte").Component<CommandProps, {}, "">;
-type Command = ReturnType<typeof Command>;
-export default Command;

package/dist/command/commander.svelte

@@ -1,107 +0,0 @@
-<script module lang="ts">
-  import {
-    Action,
-    Command,
-    CommandContent,
-    CommandDivider,
-    CommandItem,
-    CommandSearch,
-    Registry,
-  } from "./index.js";
-  import { events } from "../index.js";
-  import { Modal } from "../modal/index.js";
-  import { Shortcut, ShortcutBadge } from "../shortcut/index.js";
-  import { match } from "../utils.js";
-  import { Check, ChevronRight } from "@lucide/svelte";
-
-  export type CommanderProps = {
-    open?: boolean;
-    query?: string;
-    command: Registry;
-  };
-</script>
-
-<script lang="ts">
-  let {
-    open = $bindable(false),
-    query = $bindable(""),
-    command,
-  }: CommanderProps = $props();
-
-  let actions = $derived(
-    command.actions.filter(
-      (action) =>
-        action.enabled() &&
-        (match(action.id, query) ||
-          (action.category && match(action.category, query)) ||
-          match(action.name, query) ||
-          match(action.description, query)),
-    ),
-  );
-
-  let categoryHasSelected = $derived(
-    actions.reduce(
-      (acc, { category, selected }) => ({
-        ...acc,
-        [category]: acc[category] || selected !== undefined,
-      }),
-      {} as Record<string, boolean>,
-    ),
-  );
-
-  function handleSelect(action: Action) {
-    action.callback();
-    open = false;
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    const action = command.getByShortcut(Shortcut.fromEvent(event));
-    if (action && action.enabled()) {
-      action.callback();
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-
-  $effect(() => {
-    return events.on("keydown", handleKeyDown);
-  });
-</script>
-
-<Modal
-  bind:open
-  onoutroend={() => (query = "")}
-  class="h-[min(60%,48em)] w-[min(calc(100%-1em),36em)] rounded-lg bg-m3-surface-container p-0"
->
-  <Command>
-    <CommandSearch bind:value={query} />
-    <CommandDivider />
-    <CommandContent>
-      {#if actions.length > 0}
-        {#each actions as action (action.id)}
-          <CommandItem
-            onSelect={() => handleSelect(action)}
-            title={action.description}
-          >
-            <action.icon size={14} class="mr-2" />
-            <div>{action.category}</div>
-            <ChevronRight size={14} />
-            {#if categoryHasSelected[action.category]}
-              {#if action.selected?.()}
-                <Check size={16} class="text-m3-primary" />
-              {:else}
-                <div class="size-4"></div>
-              {/if}
-            {/if}
-            <div>{action.name}</div>
-            {#if action.shortcut}
-              <ShortcutBadge class="ml-auto" shortcut={action.shortcut} />
-            {/if}
-          </CommandItem>
-        {/each}
-      {:else}
-        <div class="text-center">No results found.</div>
-      {/if}
-    </CommandContent>
-  </Command>
-</Modal>

package/dist/command/commander.svelte.d.ts

@@ -1,9 +0,0 @@
-import { Registry } from "./index.js";
-export type CommanderProps = {
-    open?: boolean;
-    query?: string;
-    command: Registry;
-};
-declare const Commander: import("svelte").Component<CommanderProps, {}, "open" | "query">;
-type Commander = ReturnType<typeof Commander>;
-export default Commander;

package/dist/common/header.svelte

@@ -1,35 +0,0 @@
-<script module lang="ts">
-  import { baseClasses, type Variants } from "../base.js";
-  import type { ClassName } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
-
-  export type HeaderProps = {
-    children: Snippet;
-  } & ClassName &
-    Variants &
-    HTMLAttributes<HTMLDivElement>;
-</script>
-
-<script lang="ts">
-  let {
-    children,
-    class: className,
-    variant = "plain",
-    color = "primary",
-    shape = "rounded",
-    ...restProps
-  }: HeaderProps = $props();
-</script>
-
-<div
-  class={twMerge(
-    baseClasses({ variant, color, shape }),
-    "px-2 py-1 text-xs uppercase",
-    className,
-  )}
-  {...restProps}
->
-  {@render children()}
-</div>

package/dist/common/header.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 { HTMLAttributes } from "svelte/elements";
-export type HeaderProps = {
-    children: Snippet;
-} & ClassName & Variants & HTMLAttributes<HTMLDivElement>;
-declare const Header: import("svelte").Component<HeaderProps, {}, "">;
-type Header = ReturnType<typeof Header>;
-export default Header;

package/dist/common/item-context.svelte.d.ts

@@ -1,12 +0,0 @@
-export declare class ItemContext {
-    #private;
-    get input(): string;
-    set input(value: string);
-    bindInput(getInput: () => string, setInput: (val: string) => void): void;
-    get items(): HTMLElement[];
-    add(item: HTMLElement): () => void;
-    delete(item: HTMLElement): void;
-    get focused(): HTMLElement | undefined;
-    set focused(value: HTMLElement | undefined);
-    handleKeyDown(event: KeyboardEvent): void;
-}

package/dist/common/item-context.svelte.js

@@ -1,77 +0,0 @@
-import { Bindable } from "../bindable.svelte.js";
-import { OrderedHTMLElements } from "../ordered-html-elements.js";
-import { Shortcut } from "../shortcut/index.js";
-export class ItemContext {
-    #input = new Bindable("");
-    #items = new OrderedHTMLElements();
-    #focused = $state();
-    get input() {
-        return this.#input.value;
-    }
-    set input(value) {
-        this.#input.value = value;
-    }
-    bindInput(getInput, setInput) {
-        this.#input.bind(getInput, setInput);
-    }
-    get items() {
-        return this.#items.items;
-    }
-    add(item) {
-        this.#items.add(item);
-        this.focused = this.#input.value === "" ? undefined : this.items[0];
-        return () => this.delete(item);
-    }
-    delete(item) {
-        this.#items.delete(item);
-        this.focused = this.#input.value === "" ? undefined : this.items[0];
-    }
-    get focused() {
-        return this.#focused;
-    }
-    set focused(value) {
-        this.#focused = value;
-    }
-    handleKeyDown(event) {
-        if (!this.items)
-            return;
-        if (Shortcut.ARROW_UP.matches(event)) {
-            if (this.items.length !== 0) {
-                if (!this.focused) {
-                    this.focused = this.items[this.items.length - 1];
-                    this.focused.scrollIntoView(false);
-                }
-                else {
-                    const index = this.items.indexOf(this.focused);
-                    this.focused =
-                        this.items[(index - 1 + this.items.length) % this.items.length];
-                    this.focused.scrollIntoView(false);
-                }
-            }
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-        else if (Shortcut.ARROW_DOWN.matches(event)) {
-            if (this.items.length !== 0) {
-                if (!this.focused) {
-                    this.focused = this.items[0];
-                    this.focused.scrollIntoView(false);
-                }
-                else {
-                    const index = this.items.indexOf(this.focused);
-                    this.focused = this.items[(index + 1) % this.items.length];
-                    this.focused.scrollIntoView(false);
-                }
-            }
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-        else if (Shortcut.ENTER.matches(event)) {
-            if (this.focused) {
-                this.focused.click();
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-        }
-    }
-}

package/dist/dialog/dialog-button.svelte

@@ -1,25 +0,0 @@
-<script module lang="ts">
-  import { Button, type ButtonProps } from "../button/index.js";
-  import type { Snippet } from "svelte";
-
-  export type DialogButtonProps<T> = {
-    value: T | undefined;
-    autofocus?: boolean;
-    onSelect: (value: T | undefined) => void;
-    children: Snippet;
-  } & Omit<ButtonProps, "value">;
-</script>
-
-<script lang="ts" generics="T">
-  let {
-    value,
-    onSelect,
-    autofocus = false,
-    children,
-    ...restProps
-  }: DialogButtonProps<T> = $props();
-</script>
-
-<Button onclick={() => onSelect(value)} {autofocus} {...restProps}>
-  {@render children()}
-</Button>

package/dist/dialog/dialog-button.svelte.d.ts

@@ -1,32 +0,0 @@
-import { type ButtonProps } from "../button/index.js";
-import type { Snippet } from "svelte";
-export type DialogButtonProps<T> = {
-    value: T | undefined;
-    autofocus?: boolean;
-    onSelect: (value: T | undefined) => void;
-    children: Snippet;
-} & Omit<ButtonProps, "value">;
-declare function $$render<T>(): {
-    props: DialogButtonProps<T>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DialogButton: $$IsomorphicComponent;
-type DialogButton<T> = InstanceType<typeof DialogButton<T>>;
-export default DialogButton;

package/dist/dialog/dialoguer-context.svelte.d.ts

@@ -1,53 +0,0 @@
-import type { Variants } from "../base.js";
-import type { InputProps } from "../input/index.js";
-import type { LucideIcon } from "@lucide/svelte";
-import { type Snippet } from "svelte";
-export type DialoguerButtonProps<T> = {
-    text: string;
-    value: T;
-    default?: boolean;
-} & Variants;
-type ShowDialogProps<T> = {
-    icon?: LucideIcon;
-    title?: string;
-    inputProps?: InputProps;
-    message: Snippet<[]> | string;
-    buttons: DialoguerButtonProps<T>[];
-};
-type NoticeDialogProps = {
-    icon?: LucideIcon;
-    title?: string;
-    message: Snippet<[]> | string;
-    acceptText?: string;
-};
-type ConfirmDialogProps = {
-    icon?: LucideIcon;
-    title?: string;
-    message: Snippet<[]> | string;
-    cancelText?: string;
-    acceptText?: string;
-};
-type InputDialogProps = {
-    icon?: LucideIcon;
-    title?: string;
-    props: InputProps;
-    message: Snippet<[]> | string;
-    cancelText?: string;
-    acceptText?: string;
-};
-export declare class DialoguerContext {
-    message: Snippet<[]> | string;
-    icon: LucideIcon | undefined;
-    title: string | undefined;
-    inputProps: InputProps | undefined;
-    buttons: DialoguerButtonProps<unknown>[];
-    resolve: (value: unknown) => void;
-    open: boolean;
-    show<T>(dialog: ShowDialogProps<T>): Promise<T>;
-    notice(dialog: NoticeDialogProps): Promise<void>;
-    confirm(dialog: ConfirmDialogProps): Promise<boolean>;
-    input(dialog: InputDialogProps): Promise<string | undefined>;
-}
-export declare function setDialoguerContext(state: DialoguerContext): DialoguerContext;
-export declare function getDialoguerContext(): DialoguerContext;
-export {};

package/dist/dialog/dialoguer-context.svelte.js

@@ -1,85 +0,0 @@
-import { getContext, setContext } from "svelte";
-export class DialoguerContext {
-    message = $state("");
-    icon = $state();
-    title = $state();
-    inputProps = $state();
-    buttons = $state.raw([]);
-    resolve = $state(() => { });
-    open = $state(false);
-    show(dialog) {
-        ({
-            icon: this.icon,
-            title: this.title,
-            inputProps: this.inputProps,
-            message: this.message,
-            buttons: this.buttons,
-        } = dialog);
-        this.open = true;
-        return new Promise((newResolve) => (this.resolve = newResolve));
-    }
-    async notice(dialog) {
-        await this.show({
-            icon: dialog.icon,
-            title: dialog.title,
-            inputProps: undefined,
-            message: dialog.message,
-            buttons: [
-                {
-                    text: dialog.acceptText ?? "OK",
-                    value: null,
-                    default: true,
-                },
-            ],
-        });
-    }
-    async confirm(dialog) {
-        return await this.show({
-            icon: dialog.icon,
-            title: dialog.title,
-            inputProps: undefined,
-            message: dialog.message,
-            buttons: [
-                {
-                    text: dialog.cancelText ?? "Cancel",
-                    value: false,
-                    default: false,
-                },
-                {
-                    text: dialog.acceptText ?? "Accept",
-                    value: true,
-                    variant: "filled",
-                    default: true,
-                },
-            ],
-        });
-    }
-    async input(dialog) {
-        return await this.show({
-            icon: dialog.icon,
-            title: dialog.title,
-            inputProps: dialog.props,
-            message: dialog.message,
-            buttons: [
-                {
-                    text: dialog.cancelText ?? "Cancel",
-                    value: "cancel",
-                },
-                {
-                    text: dialog.acceptText ?? "Accept",
-                    value: "accept",
-                    variant: "filled",
-                },
-            ],
-        });
-    }
-}
-export function setDialoguerContext(state) {
-    return setContext(DialoguerContext, state);
-}
-export function getDialoguerContext() {
-    const ctx = getContext(DialoguerContext);
-    if (!ctx)
-        throw new Error("DialoguerContext is undefined");
-    return ctx;
-}

package/dist/dialog/dialoguer.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-  import {
-    DialoguerContext,
-    setDialoguerContext,
-    type DialoguerButtonProps,
-  } from "./index.js";
-  import { Input } from "../input/index.js";
-  import type { Snippet } from "svelte";
-  import DialogButton from "./dialog-button.svelte";
-  import Dialog from "./dialog.svelte";
-
-  const dialog = setDialoguerContext(new DialoguerContext());
-
-  type Props = {
-    children: Snippet;
-  };
-  let { children }: Props = $props();
-
-  let value: string = $derived(dialog.inputProps?.value ?? "");
-
-  function getValue(button: DialoguerButtonProps<unknown>) {
-    if (dialog.inputProps === undefined) {
-      return button.value;
-    }
-    if (button.value === "cancel") {
-      return undefined;
-    }
-    if (button.value === "accept") {
-      return value;
-    }
-    throw new Error("Invalid state");
-  }
-</script>
-
-<Dialog
-  bind:open={dialog.open}
-  icon={dialog.icon}
-  title={dialog.title}
-  onSelect={dialog.resolve}
->
-  {#if typeof dialog.message === "function"}
-    {@render dialog.message()}
-  {:else}
-    {dialog.message}
-  {/if}
-
-  {#if dialog.inputProps !== undefined}
-    <Input class="mt-2 w-full" bind:value autofocus {...dialog.inputProps} />
-  {/if}
-
-  {#snippet actions(props)}
-    {#each dialog.buttons as button (button)}
-      <DialogButton
-        variant={button.variant}
-        value={getValue(button)}
-        autofocus={button.default}
-        {...props}
-      >
-        {button.text}
-      </DialogButton>
-    {/each}
-  {/snippet}
-</Dialog>
-
-{@render children()}

package/dist/dialog/dialoguer.svelte.d.ts

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