kosui 0.0.7

package/dist/shortcut/shortcut.js

@@ -0,0 +1,95 @@
+const keys = {
+    ArrowDown: "↓",
+    ArrowLeft: "←",
+    ArrowRight: "→",
+    ArrowUp: "↑",
+    Alt: "⌥",
+    Backspace: "⌫",
+    CapsLock: "⇪",
+    Control: "⌃",
+    Dead: "☠️",
+    Delete: "⌦",
+    End: "⇲",
+    Enter: "⏎",
+    Escape: "⎋",
+    Home: "⌂",
+    Meta: "⌘",
+    PageDown: "⇟",
+    PageUp: "⇞",
+    Shift: "⇧",
+    Tab: "↹",
+    " ": "␣",
+};
+for (let i = 1; i <= 12; i++) {
+    keys[`F${i}`] = `F${i}`;
+}
+export class Shortcut {
+    key;
+    alt;
+    ctrl;
+    meta;
+    shift;
+    constructor(shortcut) {
+        this.key = shortcut.key;
+        this.alt = shortcut.alt ?? false;
+        this.ctrl = shortcut.ctrl ?? false;
+        this.meta = shortcut.meta ?? false;
+        this.shift = shortcut.shift ?? false;
+    }
+    matches(event) {
+        return (this.key === event.key &&
+            this.alt === event.altKey &&
+            this.ctrl === event.ctrlKey &&
+            this.meta === event.metaKey &&
+            this.shift === event.shiftKey);
+    }
+    toChar() {
+        if (this.key !== " " && this.key.length === 1) {
+            return this.key.toUpperCase();
+        }
+        const result = keys[this.key];
+        if (!result) {
+            console.warn(`${this.key} was not be mapped to a character`);
+            return this.key;
+        }
+        return result;
+    }
+    toString() {
+        return [...this].join("");
+    }
+    *[Symbol.iterator]() {
+        if (this.ctrl)
+            yield "⌃";
+        if (this.shift)
+            yield "⇧";
+        if (this.alt)
+            yield "⌥";
+        if (this.meta)
+            yield "⌘";
+        yield this.toChar();
+    }
+    static isChar(event) {
+        return (event.key.length === 1 &&
+            !event.ctrlKey &&
+            !event.altKey &&
+            !event.metaKey);
+    }
+    static fromEvent(event) {
+        return new Shortcut({
+            key: event.key,
+            alt: event.altKey,
+            ctrl: event.ctrlKey,
+            meta: event.metaKey,
+            shift: event.shiftKey,
+        });
+    }
+    static ARROW_UP = new Shortcut({ key: "ArrowUp" });
+    static ARROW_DOWN = new Shortcut({ key: "ArrowDown" });
+    static END = new Shortcut({ key: "End" });
+    static ENTER = new Shortcut({ key: "Enter" });
+    static ESCAPE = new Shortcut({ key: "Escape" });
+    static HOME = new Shortcut({ key: "Home" });
+    static SPACE = new Shortcut({ key: " " });
+    static TAB_BACKWARD = new Shortcut({ key: "Tab", shift: true });
+    static TAB_FORWARD = new Shortcut({ key: "Tab" });
+}

package/dist/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ToggleButton } from "./toggle-button.svelte";
+export { default as ToggleGroup } from "./toggle-group.svelte";

package/dist/toggle/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleButton } from "./toggle-button.svelte";
+export { default as ToggleGroup } from "./toggle-group.svelte";

package/dist/toggle/toggle-button.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+  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 { noop, type ClassName, type ElementRef } from "../utils";
+  import { getToggleContext } from "./toggle-context.svelte";
+
+  export type ToggleButtonProps<T> = {
+    value: T;
+    children: Snippet;
+  } & ElementRef &
+    ClassName &
+    Omit<Variants, "variant"> &
+    Omit<HTMLButtonAttributes, "value">;
+</script>
+
+<script lang="ts" generics="T">
+  let {
+    value,
+    children,
+    el = $bindable(),
+    ref = noop,
+    class: className,
+    color = "primary",
+    shape = "rounded",
+    ...restProps
+  }: ToggleButtonProps<T> = $props();
+
+  const ctx = getToggleContext<T>();
+</script>
+
+<button
+  bind:this={el}
+  use:ref
+  role="option"
+  aria-selected={ctx.value === value}
+  class={twMerge(
+    "bg-md-background text-md-on-surface flex items-center gap-1 border-y border-l px-4 py-2 text-sm last:border-r",
+
+    shape === "square" && "",
+    shape === "rounded" && "first:rounded-l-md last:rounded-r-md",
+    shape === "circle" && "first:rounded-l-full last:rounded-r-full",
+
+    color === "primary" &&
+      "border-m3-primary text-m3-primary aria-selected:bg-m3-primary aria-selected:text-m3-on-primary",
+    color === "secondary" &&
+      "border-m3-secondary text-m3-secondary aria-selected:bg-m3-secondary aria-selected:text-m3-on-secondary",
+    color === "tertiary" &&
+      "border-m3-tertiary text-m3-tertiary aria-selected:bg-m3-tertiary aria-selected:text-m3-on-tertiary",
+    color === "error" &&
+      "border-m3-error text-m3-error aria-selected:bg-m3-error aria-selected:text-m3-on-error",
+
+    className,
+  )}
+  {...mergeProps(restProps, { onclick: () => (ctx.value = value) })}
+>
+  {@render children()}
+</button>

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

@@ -0,0 +1,32 @@
+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 ToggleButtonProps<T> = {
+    value: T;
+    children: Snippet;
+} & ElementRef & ClassName & Omit<Variants, "variant"> & Omit<HTMLButtonAttributes, "value">;
+declare function $$render<T>(): {
+    props: ToggleButtonProps<T>;
+    exports: {};
+    bindings: "el";
+    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(): "el";
+    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 ToggleButton: $$IsomorphicComponent;
+type ToggleButton<T> = InstanceType<typeof ToggleButton<T>>;
+export default ToggleButton;

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

@@ -0,0 +1,9 @@
+export declare class ToggleContext<T> {
+    #private;
+    setValue: (val: T | undefined) => void;
+    constructor(getValue: () => T | undefined, setValue: (val: T | undefined) => void);
+    get value(): T | undefined;
+    set value(value: T | undefined);
+}
+export declare function setToggleContext<T>(ctx: ToggleContext<T>): ToggleContext<T>;
+export declare function getToggleContext<T>(): ToggleContext<T>;

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

@@ -0,0 +1,32 @@
+import { getContext, setContext } from "svelte";
+export class ToggleContext {
+    #value = $state(undefined);
+    setValue;
+    constructor(getValue, setValue) {
+        this.#value = getValue();
+        this.setValue = setValue;
+        $effect(() => {
+            if (this.#value !== getValue()) {
+                this.#value = getValue();
+            }
+        });
+    }
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        if (this.#value !== value) {
+            this.#value = value;
+            this.setValue(value);
+        }
+    }
+}
+export function setToggleContext(ctx) {
+    return setContext(ToggleContext, ctx);
+}
+export function getToggleContext() {
+    const ctx = getContext(ToggleContext);
+    if (!ctx)
+        throw new Error("ToggleContext is undefined");
+    return ctx;
+}

package/dist/toggle/toggle-group.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { type Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+  import { noop, type ClassName, type ElementRef } from "../utils";
+  import { setToggleContext, ToggleContext } from "./toggle-context.svelte";
+
+  export type ToggleGroupProps<T> = {
+    value?: T;
+    onChange?: (value?: T) => void;
+    children: Snippet<[]>;
+  } & ElementRef &
+    ClassName &
+    Omit<HTMLAttributes<HTMLDivElement>, "children">;
+</script>
+
+<script lang="ts" generics="T">
+  let {
+    value = $bindable(),
+    onChange,
+    children,
+    el = $bindable(),
+    ref = noop,
+    class: className,
+    ...restProps
+  }: ToggleGroupProps<T> = $props();
+
+  setToggleContext(
+    new ToggleContext(
+      () => value,
+      (newValue) => {
+        value = newValue;
+        onChange?.(newValue);
+      },
+    ),
+  );
+</script>
+
+<div bind:this={el} use:ref class={twMerge("flex", className)} {...restProps}>
+  {@render children()}
+</div>

package/dist/toggle/toggle-group.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ClassName, type ElementRef } from "../utils";
+export type ToggleGroupProps<T> = {
+    value?: T;
+    onChange?: (value?: T) => void;
+    children: Snippet<[]>;
+} & ElementRef & ClassName & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+declare function $$render<T>(): {
+    props: ToggleGroupProps<T>;
+    exports: {};
+    bindings: "el" | "value";
+    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(): "el" | "value";
+    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 ToggleGroup: $$IsomorphicComponent;
+type ToggleGroup<T> = InstanceType<typeof ToggleGroup<T>>;
+export default ToggleGroup;

package/dist/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { default as Tooltip, type TooltipProps, type TooltipTriggerProps, } from "./tooltip.svelte";

package/dist/tooltip/index.js

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

package/dist/tooltip/tooltip.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+  import { type Snippet } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { Popover, type PopoverProps } from "../popover";
+  import type { ClassName } from "../utils";
+
+  export type TooltipTriggerProps = {
+    ref: (el: HTMLElement) => void;
+    onclick?: () => void;
+    onmouseenter?: () => void;
+    onmouseleave?: () => void;
+    ontouchstart?: () => void;
+    ontouchend?: () => void;
+  };
+
+  export type TooltipProps = {
+    delay?: number;
+    open?: boolean;
+    click?: boolean;
+    rich?: boolean;
+    trigger?: Snippet<[TooltipTriggerProps]>;
+  } & ClassName &
+    PopoverProps;
+</script>
+
+<script lang="ts">
+  let {
+    delay = 500,
+    open = $bindable(false),
+    click = false,
+    rich = false,
+    arrow,
+    trigger,
+    anchorEl,
+    class: className,
+    ...restProps
+  }: TooltipProps = $props();
+
+  const isTouchDevice =
+    "ontouchstart" in window || navigator.maxTouchPoints > 0;
+
+  let timeout: number;
+
+  export function show(after?: number) {
+    timeout = window.setTimeout(
+      () => (open = true),
+      after === undefined ? delay : after,
+    );
+  }
+
+  export function cancel() {
+    window.clearTimeout(timeout);
+  }
+
+  export function hide() {
+    cancel();
+    open = false;
+  }
+
+  const triggerProps: TooltipTriggerProps = click
+    ? {
+        ref: (ref) => (anchorEl = ref),
+        onclick: () => (open = true),
+      }
+    : {
+        ref: (ref) => (anchorEl = ref),
+        onmouseenter: () => !isTouchDevice && show(),
+        onmouseleave: () => hide(),
+        ontouchstart: () => show(delay),
+        ontouchend: () => cancel(),
+      };
+</script>
+
+<Popover
+  bind:open
+  role="tooltip"
+  {anchorEl}
+  {arrow}
+  class={twMerge(
+    arrow && "overflow-visible",
+    rich
+      ? "rounded-md border bg-m3-surface-container p-2 text-sm shadow shadow-m3-shadow/20"
+      : "rounded-sm bg-m3-inverse-surface px-2 py-1 text-xs text-m3-inverse-on-surface",
+    className,
+  )}
+  arrowClass={twMerge(
+    rich
+      ? "bg-m3-surface-container border-r border-b"
+      : "bg-m3-inverse-surface",
+  )}
+  {...restProps}
+/>
+
+{@render trigger?.(triggerProps)}

package/dist/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type Snippet } from "svelte";
+import { type PopoverProps } from "../popover";
+import type { ClassName } from "../utils";
+export type TooltipTriggerProps = {
+    ref: (el: HTMLElement) => void;
+    onclick?: () => void;
+    onmouseenter?: () => void;
+    onmouseleave?: () => void;
+    ontouchstart?: () => void;
+    ontouchend?: () => void;
+};
+export type TooltipProps = {
+    delay?: number;
+    open?: boolean;
+    click?: boolean;
+    rich?: boolean;
+    trigger?: Snippet<[TooltipTriggerProps]>;
+} & ClassName & PopoverProps;
+declare const Tooltip: import("svelte").Component<TooltipProps, {
+    show: (after?: number) => void;
+    cancel: () => void;
+    hide: () => void;
+}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/utils.d.ts

@@ -0,0 +1,43 @@
+import type { ClassNameValue } from "tailwind-merge";
+export declare function noop(): void;
+export type ElementRef = {
+    el?: HTMLElement;
+    ref?: (el: HTMLElement) => void;
+};
+export type ClassName = {
+    class?: ClassNameValue;
+};
+export type ToggleEventWithTarget<T extends HTMLElement> = ToggleEvent & {
+    currentTarget: EventTarget & T;
+};
+type UidProps = {
+    prefix?: string;
+    separator?: string;
+};
+export declare function uid({ prefix, separator }?: UidProps): string;
+/**
+ * Converts a kebab-case string to Title Case.
+ *
+ * @example
+ *   toTitleCase("hello-world"); // returns "Hello World"
+ *
+ * @param kebab - The kebab-case string to convert
+ * @returns The string converted to Title Case with spaces between words
+ */
+export declare function toTitleCase(kebab: string): string;
+export declare class TypingBuffer {
+    #private;
+    constructor(timeout?: number);
+    get prefix(): string;
+    append(char: string): string;
+}
+/**
+ * Checks if the given text matches the specified prefix. The match is
+ * case-insensitive and can match whole words or prefixes of words.
+ *
+ * @param text - The text to be checked.
+ * @param prefix - The prefix to match against the text.
+ * @returns `true` if the text matches the prefix, `false` otherwise.
+ */
+export declare function match(text: string, prefix: string): boolean;
+export {};

package/dist/utils.js

@@ -0,0 +1,72 @@
+export function noop() { }
+export function uid({ prefix = "", separator = "-" } = {}) {
+    const parts = [];
+    if (prefix) {
+        parts.push(prefix);
+    }
+    parts.push(Math.random().toString(36).substring(2, 10));
+    return parts.join(separator);
+}
+/**
+ * Converts a kebab-case string to Title Case.
+ *
+ * @example
+ *   toTitleCase("hello-world"); // returns "Hello World"
+ *
+ * @param kebab - The kebab-case string to convert
+ * @returns The string converted to Title Case with spaces between words
+ */
+export function toTitleCase(kebab) {
+    return kebab
+        .split("-")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+}
+export class TypingBuffer {
+    #prefix = "";
+    #timer;
+    #timeout = 500;
+    constructor(timeout) {
+        if (timeout !== undefined) {
+            this.#timeout = timeout;
+        }
+    }
+    get prefix() {
+        return this.#prefix;
+    }
+    append(char) {
+        clearTimeout(this.#timer);
+        this.#prefix += char;
+        this.#timer = setTimeout(() => (this.#prefix = ""), this.#timeout);
+        return this.prefix;
+    }
+}
+/**
+ * Checks if the given text matches the specified prefix. The match is
+ * case-insensitive and can match whole words or prefixes of words.
+ *
+ * @param text - The text to be checked.
+ * @param prefix - The prefix to match against the text.
+ * @returns `true` if the text matches the prefix, `false` otherwise.
+ */
+export function match(text, prefix) {
+    const TOKEN_SPLITTER = /[-_\s.,!?;:@]/;
+    const textLower = text.toLocaleLowerCase();
+    const prefixLower = prefix.toLocaleLowerCase();
+    if (textLower.startsWith(prefixLower)) {
+        return true;
+    }
+    const words = textLower.split(TOKEN_SPLITTER).filter((w) => w);
+    const prefixWords = prefixLower.split(TOKEN_SPLITTER).filter((w) => w);
+    for (const prefixWord of prefixWords) {
+        let isPrefix = false;
+        for (const word of words) {
+            if (word.startsWith(prefixWord)) {
+                isPrefix = true;
+            }
+        }
+        if (!isPrefix)
+            return false;
+    }
+    return true;
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "kosui",
+  "version": "0.0.7",
+  "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": ">= 20"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@floating-ui/dom": "^1.7.2",
+    "@lucide/svelte": "^0.526.0",
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.22.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^24.1.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "jsdom": "^26.1.0",
+    "marked": "^16.1.1",
+    "postcss": "^8.5.6",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "publint": "^0.3.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^7.0.4",
+    "vitest": "^3.2.3"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "pnpm test:unit -- --run && pnpm test:e2e",
+    "test:e2e": "playwright test"
+  }
+}