kosui 0.2.0 → 0.5.0

package/dist/command/command-palette.svelte

@@ -0,0 +1,163 @@
+<script module lang="ts">
+  import { events } from "../index.js";
+  import { Modal } from "../modal/index.js";
+  import { Shortcut, ShortcutHint } from "../shortcut/index.js";
+  import { match } from "../utils.js";
+  import { Check, Search } from "@lucide/svelte";
+  import type { Action, Registry } from "./action.svelte";
+
+  export type CommandPaletteProps = {
+    registry: Registry;
+    open?: boolean;
+    query?: string;
+    label?: string;
+    placeholder?: string;
+  };
+
+  function isTyping(event: KeyboardEvent) {
+    return (
+      event.target instanceof HTMLElement &&
+      (event.target.isContentEditable ||
+        event.target.matches("input, textarea, select"))
+    );
+  }
+</script>
+
+<script lang="ts">
+  let {
+    registry,
+    open = $bindable(false),
+    query = $bindable(""),
+    label = "Command palette",
+    placeholder = "Search commands",
+  }: CommandPaletteProps = $props();
+
+  const id = $props.id();
+  let active = $state(0);
+
+  const actions = $derived(
+    registry.actions.filter(
+      (action) =>
+        action.enabled() &&
+        (match(action.id, query) ||
+          (action.category && match(action.category, query)) ||
+          match(action.name, query) ||
+          match(action.description, query)),
+    ),
+  );
+  const current = $derived(Math.min(active, actions.length - 1));
+
+  function run(action: Action) {
+    open = false;
+    action.callback();
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    const count = actions.length;
+    if (Shortcut.ARROW_DOWN.matches(event)) {
+      active = (current + 1) % count;
+    } else if (Shortcut.ARROW_UP.matches(event)) {
+      active = (current - 1 + count) % count;
+    } else if (Shortcut.ENTER.matches(event) && current !== -1) {
+      run(actions[current]);
+    } else {
+      return;
+    }
+    event.preventDefault();
+  }
+
+  function runShortcut(event: KeyboardEvent) {
+    const shortcut = Shortcut.fromEvent(event);
+    if (isTyping(event) && !shortcut.ctrl && !shortcut.meta && !shortcut.alt) {
+      return;
+    }
+    const action = registry.getByShortcut(shortcut);
+    if (action?.enabled()) {
+      action.callback();
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  $effect(() => events.on("keydown", runShortcut));
+
+  $effect(() => {
+    if (current !== -1) {
+      document
+        .getElementById(`${id}-${current}`)
+        ?.scrollIntoView({ block: "nearest" });
+    }
+  });
+</script>
+
+<Modal
+  bind:open
+  aria-label={label}
+  class="flex h-[min(60vh,32rem)] w-[min(calc(100%-1em),36rem)] flex-col p-0"
+  onoutroend={() => {
+    query = "";
+    active = 0;
+  }}
+>
+  <div class="flex items-center gap-2 border-b border-m3-outline-variant px-4">
+    <Search size={16} class="shrink-0 text-m3-on-surface-variant" />
+    <!-- svelte-ignore a11y_autofocus -->
+    <input
+      bind:value={query}
+      role="combobox"
+      aria-label={placeholder}
+      aria-autocomplete="list"
+      aria-expanded="true"
+      aria-controls="{id}-listbox"
+      aria-activedescendant={current === -1 ? undefined : `${id}-${current}`}
+      autocomplete="off"
+      autofocus
+      {placeholder}
+      class="h-12 w-full bg-transparent outline-none placeholder:text-m3-on-surface-variant"
+      oninput={() => (active = 0)}
+      {onkeydown}
+    />
+  </div>
+  <div
+    id="{id}-listbox"
+    role="listbox"
+    aria-label={label}
+    class="grow overflow-y-auto p-2"
+  >
+    {#each actions as action, index (action.id)}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div
+        id="{id}-{index}"
+        role="option"
+        tabindex="-1"
+        aria-selected={index === current}
+        aria-checked={action.selected?.()}
+        title={action.description}
+        class="flex min-h-9 cursor-pointer items-center gap-3 rounded-sm px-3 text-sm aria-selected:bg-m3-on-surface/10"
+        onmousedown={(event) => event.preventDefault()}
+        onpointermove={() => (active = index)}
+        onclick={() => run(action)}
+      >
+        <action.icon size={16} class="shrink-0 text-m3-on-surface-variant" />
+        <span class="grow">
+          {#if action.category}
+            <span class="text-m3-on-surface-variant">{action.category}:</span>
+          {/if}
+          {action.name}
+        </span>
+        {#if action.selected?.()}
+          <Check size={16} class="shrink-0 text-m3-primary" />
+        {/if}
+        {#if action.shortcut}
+          <ShortcutHint shortcut={action.shortcut} />
+        {/if}
+      </div>
+    {/each}
+  </div>
+  <p
+    role="status"
+    class="absolute inset-x-0 top-1/2 text-center text-sm text-m3-on-surface-variant empty:hidden"
+  >
+    {actions.length === 0 ? "No matching commands" : ""}
+  </p>
+</Modal>

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

@@ -0,0 +1,11 @@
+import type { Registry } from "./action.svelte";
+export type CommandPaletteProps = {
+    registry: Registry;
+    open?: boolean;
+    query?: string;
+    label?: string;
+    placeholder?: string;
+};
+declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {}, "open" | "query">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/command/index.d.ts

@@ -1,9 +1,2 @@
-export { Divider as CommandDivider, Header as CommandHeader, } from "../common/index.js";
 export { Action, Registry } from "./action.svelte";
-export { default as CommandContent } from "./command-content.svelte";
-export { CommandContext, getCommandContext, setCommandContext, } from "./command-context.svelte.js";
-export { default as CommandInput, type CommandInputProps, } from "./command-input.svelte";
-export { default as CommandItem, type CommandItemProps, } from "./command-item.svelte";
-export { default as CommandSearch, type CommandSearchProps, } from "./command-search.svelte";
-export { default as Command, type CommandProps } from "./command.svelte";
-export { default as Commander, type CommanderProps } from "./commander.svelte";
+export { default as CommandPalette, type CommandPaletteProps, } from "./command-palette.svelte";

package/dist/command/index.js

@@ -1,9 +1,2 @@
-export { Divider as CommandDivider, Header as CommandHeader, } from "../common/index.js";
 export { Action, Registry } from "./action.svelte";
-export { default as CommandContent } from "./command-content.svelte";
-export { CommandContext, getCommandContext, setCommandContext, } from "./command-context.svelte.js";
-export { default as CommandInput, } from "./command-input.svelte";
-export { default as CommandItem, } from "./command-item.svelte";
-export { default as CommandSearch, } from "./command-search.svelte";
-export { default as Command } from "./command.svelte";
-export { default as Commander } from "./commander.svelte";
+export { default as CommandPalette, } from "./command-palette.svelte";

package/dist/common/divider.svelte

@@ -1,13 +1,18 @@
 <script module lang="ts">
-  import type { ClassName } from "../utils.js";
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
   import type { HTMLAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
 
-  export type DividerProps = {} & ClassName & HTMLAttributes<HTMLHRElement>;
+  export type DividerProps = ElementRef &
+    ClassName &
+    HTMLAttributes<HTMLHRElement>;
 </script>
 
 <script lang="ts">
-  let { class: className, ...restProps }: DividerProps = $props();
+  let {
+    el = $bindable(),
+    class: className,
+    ...restProps
+  }: DividerProps = $props();
 </script>
 
-<hr class={twMerge("-mx-1 my-1", className)} {...restProps} />
+<hr bind:this={el} class={cn("my-1", className)} {...restProps} />

package/dist/common/divider.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { ClassName } from "../utils.js";
+import { type ClassName, type ElementRef } from "../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-export type DividerProps = {} & ClassName & HTMLAttributes<HTMLHRElement>;
-declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+export type DividerProps = ElementRef & ClassName & HTMLAttributes<HTMLHRElement>;
+declare const Divider: import("svelte").Component<DividerProps, {}, "el">;
 type Divider = ReturnType<typeof Divider>;
 export default Divider;

package/dist/common/index.d.ts

@@ -1,3 +1 @@
 export { default as Divider, type DividerProps } from "./divider.svelte";
-export { default as Header, type HeaderProps } from "./header.svelte";
-export { ItemContext } from "./item-context.svelte";

package/dist/common/index.js

@@ -1,3 +1 @@
 export { default as Divider } from "./divider.svelte";
-export { default as Header } from "./header.svelte";
-export { ItemContext } from "./item-context.svelte";

package/dist/dialog/dialog-provider.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { Button } from "../button/index.js";
+  import { Input } from "../input/index.js";
+  import type { Snippet } from "svelte";
+  import Dialog from "./dialog.svelte";
+  import { Dialogs, setDialogs } from "./dialogs.svelte.js";
+
+  let { children }: { children: Snippet } = $props();
+
+  const id = $props.id();
+  const dialogs = setDialogs(new Dialogs());
+  const request = $derived(dialogs.current);
+  let value = $derived(request?.value ?? "");
+</script>
+
+<Dialog
+  bind:open={dialogs.open}
+  icon={request?.icon}
+  title={request?.title}
+  aria-describedby="{id}-message"
+  onSelect={(selected) => dialogs.settle(selected)}
+>
+  {#key request}
+    <div id="{id}-message">
+      {#if typeof request?.message === "function"}
+        {@render request.message()}
+      {:else}
+        {request?.message}
+      {/if}
+    </div>
+    {#if request?.input}
+      <form
+        id="{id}-form"
+        class="mt-4"
+        onsubmit={(event) => {
+          event.preventDefault();
+          dialogs.settle(value);
+        }}
+      >
+        <Input
+          bind:value
+          aria-labelledby="{id}-message"
+          autofocus
+          {...request.input}
+          class={["w-full", request.input.class]}
+        />
+      </form>
+    {/if}
+  {/key}
+
+  {#snippet actions(select)}
+    {#key request}
+      {#each request?.actions ?? [] as action, i (i)}
+        <Button
+          variant={action.variant}
+          color={action.color}
+          shape={action.shape}
+          autofocus={action.default}
+          {...action.submit
+            ? { type: "submit", form: `${id}-form` }
+            : { onclick: () => select(action.value) }}
+        >
+          {action.text}
+        </Button>
+      {/each}
+    {/key}
+  {/snippet}
+</Dialog>
+
+{@render children()}

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

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

package/dist/dialog/dialog.svelte

@@ -1,69 +1,67 @@
 <script module lang="ts">
   import { mergeComponentProps } from "../merge-props.js";
   import { Modal, type ModalProps } from "../modal/index.js";
+  import { cn } from "../utils.js";
   import type { LucideIcon } from "@lucide/svelte";
   import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
 
   export type DialogProps<T> = {
-    ref?: HTMLDialogElement;
-    onSelect?: (value: T | undefined) => void;
     icon?: LucideIcon;
     title?: string;
-    children: Snippet;
-    actions?: Snippet<[{ onSelect: (value: T | undefined) => void }]>;
+    onSelect?: (value: T | undefined) => void;
+    actions?: Snippet<[select: (value: T | undefined) => void]>;
   } & ModalProps;
 </script>
 
 <script lang="ts" generics="T">
   let {
-    ref = $bindable(),
+    el = $bindable(),
     open = $bindable(),
-    onSelect,
-    class: className,
-    icon: IconComponent,
+    icon: Icon,
     title,
+    onSelect,
     children,
     actions,
+    class: className,
     ...restProps
   }: DialogProps<T> = $props();
 
-  function handleSelect(value: T | undefined) {
-    onSelect?.(value);
-    open = false;
-  }
+  const id = $props.id();
 
-  function handleCancel() {
-    onSelect?.(undefined);
+  function select(value: T | undefined) {
+    open = false;
+    onSelect?.(value);
   }
 </script>
 
 <Modal
-  bind:ref
+  bind:el
   bind:open
-  class={twMerge("w-[min(calc(100%-1em),36em)]", className)}
+  class={cn("flex w-[min(calc(100%-1em),36em)] flex-col gap-4", className)}
   {...mergeComponentProps(
     Modal,
-    { role: "dialog", "aria-modal": "true", onCancel: handleCancel },
+    {
+      "aria-labelledby":
+        title && !restProps["aria-label"] ? `${id}-title` : undefined,
+      onCancel: () => onSelect?.(undefined),
+    },
     restProps,
   )}
 >
-  <div class={twMerge("flex flex-col gap-4")}>
-    {#if IconComponent}
-      <IconComponent class="mx-auto" />
-    {/if}
-    {#if title}
-      <div class={twMerge("text-xl", IconComponent ? "text-center" : "")}>
-        {title}
-      </div>
-    {/if}
-    <div>
-      {@render children()}
-    </div>
-    {#if actions}
-      <div class="mt-2 flex place-content-end gap-2">
-        {@render actions({ onSelect: handleSelect })}
-      </div>
-    {/if}
+  {#if Icon}
+    <Icon class="mx-auto text-m3-secondary" />
+  {/if}
+  {#if title}
+    <h2 id="{id}-title" class={cn("text-2xl", Icon && "text-center")}>
+      {title}
+    </h2>
+  {/if}
+  <div class="text-sm text-m3-on-surface-variant">
+    {@render children()}
   </div>
+  {#if actions}
+    <div class="mt-2 flex flex-wrap justify-end gap-2">
+      {@render actions(select)}
+    </div>
+  {/if}
 </Modal>

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

@@ -2,19 +2,15 @@ import { type ModalProps } from "../modal/index.js";
 import type { LucideIcon } from "@lucide/svelte";
 import type { Snippet } from "svelte";
 export type DialogProps<T> = {
-    ref?: HTMLDialogElement;
-    onSelect?: (value: T | undefined) => void;
     icon?: LucideIcon;
     title?: string;
-    children: Snippet;
-    actions?: Snippet<[{
-        onSelect: (value: T | undefined) => void;
-    }]>;
+    onSelect?: (value: T | undefined) => void;
+    actions?: Snippet<[select: (value: T | undefined) => void]>;
 } & ModalProps;
 declare function $$render<T>(): {
     props: DialogProps<T>;
     exports: {};
-    bindings: "open" | "ref";
+    bindings: "el" | "open";
     slots: {};
     events: {};
 };
@@ -22,7 +18,7 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "open" | "ref";
+    bindings(): "el" | "open";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -0,0 +1,49 @@
+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 DialogAction<T> = {
+    text: string;
+    value: T;
+    default?: boolean;
+} & Variants;
+type DialogContent = {
+    icon?: LucideIcon;
+    title?: string;
+    message: Snippet | string;
+};
+export type AlertOptions = DialogContent & {
+    acceptText?: string;
+};
+export type ConfirmOptions = DialogContent & {
+    cancelText?: string;
+    acceptText?: string;
+};
+export type PromptOptions = DialogContent & {
+    input?: InputProps;
+    cancelText?: string;
+    acceptText?: string;
+};
+export type ShowOptions<T> = DialogContent & {
+    actions: DialogAction<T>[];
+};
+export type DialogRequest = DialogContent & {
+    actions: (DialogAction<unknown> & {
+        submit?: boolean;
+    })[];
+    input?: Omit<InputProps, "value">;
+    value?: string;
+    resolve: (value: unknown) => void;
+};
+export declare class Dialogs {
+    #private;
+    current: DialogRequest | undefined;
+    open: boolean;
+    show<T>(options: ShowOptions<T>): Promise<T | undefined>;
+    alert({ acceptText, ...content }: AlertOptions): Promise<void>;
+    confirm({ cancelText, acceptText, ...content }: ConfirmOptions): Promise<boolean>;
+    prompt({ input: { value, ...input }, cancelText, acceptText, ...content }: PromptOptions): Promise<string | undefined>;
+    settle(value: unknown): void;
+}
+export declare const getDialogs: () => Dialogs, setDialogs: (context: Dialogs) => Dialogs;
+export {};

package/dist/dialog/dialogs.svelte.js

@@ -0,0 +1,73 @@
+import { createContext } from "svelte";
+export class Dialogs {
+    current = $state.raw();
+    open = $state(false);
+    #active;
+    #queue = [];
+    show(options) {
+        return this.#request(options);
+    }
+    async alert({ acceptText, ...content }) {
+        await this.#request({
+            ...content,
+            actions: [
+                {
+                    text: acceptText ?? "OK",
+                    value: undefined,
+                    variant: "filled",
+                    default: true,
+                },
+            ],
+        });
+    }
+    async confirm({ cancelText, acceptText, ...content }) {
+        const accepted = await this.#request({
+            ...content,
+            actions: [
+                { text: cancelText ?? "Cancel", value: false, variant: "plain" },
+                {
+                    text: acceptText ?? "OK",
+                    value: true,
+                    variant: "filled",
+                    default: true,
+                },
+            ],
+        });
+        return accepted === true;
+    }
+    async prompt({ input: { value, ...input } = {}, cancelText, acceptText, ...content }) {
+        const text = await this.#request({
+            ...content,
+            input,
+            value: value == null ? "" : String(value),
+            actions: [
+                { text: cancelText ?? "Cancel", value: undefined, variant: "plain" },
+                {
+                    text: acceptText ?? "OK",
+                    value: undefined,
+                    variant: "filled",
+                    submit: true,
+                },
+            ],
+        });
+        return typeof text === "string" ? text : undefined;
+    }
+    settle(value) {
+        this.#active?.resolve(value);
+        this.#next();
+    }
+    #request(request) {
+        return new Promise((resolve) => {
+            this.#queue.push({ ...request, resolve });
+            if (!this.#active)
+                this.#next();
+        });
+    }
+    #next() {
+        this.#active = this.#queue.shift();
+        if (this.#active)
+            this.current = this.#active;
+        this.open = this.#active !== undefined;
+    }
+}
+export const [getDialogs, setDialogs] = createContext();

package/dist/dialog/index.d.ts

@@ -1,4 +1,3 @@
-export { default as DialogButton, type DialogButtonProps, } from "./dialog-button.svelte";
 export { default as Dialog, type DialogProps } from "./dialog.svelte";
-export { DialoguerContext, getDialoguerContext, setDialoguerContext, type DialoguerButtonProps, } from "./dialoguer-context.svelte";
-export { default as Dialoguer } from "./dialoguer.svelte";
+export { default as DialogProvider } from "./dialog-provider.svelte";
+export { Dialogs, getDialogs, type AlertOptions, type ConfirmOptions, type DialogAction, type PromptOptions, type ShowOptions, } from "./dialogs.svelte";

package/dist/dialog/index.js

@@ -1,4 +1,3 @@
-export { default as DialogButton, } from "./dialog-button.svelte";
 export { default as Dialog } from "./dialog.svelte";
-export { DialoguerContext, getDialoguerContext, setDialoguerContext, } from "./dialoguer-context.svelte";
-export { default as Dialoguer } from "./dialoguer.svelte";
+export { default as DialogProvider } from "./dialog-provider.svelte";
+export { Dialogs, getDialogs, } from "./dialogs.svelte";

package/dist/drawer/drawer.svelte

@@ -0,0 +1,51 @@
+<script module lang="ts">
+  import { Modal, type ModalProps } from "../modal/index.js";
+  import { cn } from "../utils.js";
+  import { prefersReducedMotion } from "svelte/motion";
+  import { fly } from "svelte/transition";
+
+  export type DrawerSide = "start" | "end";
+
+  export type DrawerProps = {
+    side?: DrawerSide;
+  } & Omit<ModalProps, "transition">;
+</script>
+
+<script lang="ts">
+  let {
+    el = $bindable(),
+    open = $bindable(),
+    side = "start",
+    shape = "lg",
+    class: className,
+    children,
+    ...restProps
+  }: DrawerProps = $props();
+
+  function slide(node: Element) {
+    const rtl = getComputedStyle(node).direction === "rtl";
+    const fromLeft = (side === "start") !== rtl;
+    return fly(node, {
+      x: fromLeft ? "-100%" : "100%",
+      opacity: 1,
+      duration: prefersReducedMotion.current ? 0 : 200,
+    });
+  }
+</script>
+
+<Modal
+  bind:el
+  bind:open
+  {shape}
+  transition={slide}
+  class={cn(
+    "my-0 h-full max-h-none w-80 max-w-[calc(100%-3.5rem)] overflow-y-auto bg-m3-surface-container-low p-3",
+    side === "start"
+      ? "ms-0 me-auto rounded-s-none"
+      : "ms-auto me-0 rounded-e-none",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children()}
+</Modal>

package/dist/drawer/drawer.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ModalProps } from "../modal/index.js";
+export type DrawerSide = "start" | "end";
+export type DrawerProps = {
+    side?: DrawerSide;
+} & Omit<ModalProps, "transition">;
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "el" | "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/drawer/index.d.ts

@@ -0,0 +1 @@
+export { default as Drawer, type DrawerProps, type DrawerSide, } from "./drawer.svelte";

package/dist/drawer/index.js

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