kosui 0.2.0 → 0.4.0

package/dist/tooltip/tooltip.svelte

@@ -1,14 +1,20 @@
 <script lang="ts" module>
+  import { mergeProps } from "../merge-props.js";
   import { Popover, type PopoverProps } from "../popover/index.js";
-  import type { ClassName } from "../utils.js";
+  import { cn, type ClassName } from "../utils.js";
   import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
+  import { createAttachmentKey, type Attachment } from "svelte/attachments";
 
   export type TooltipTriggerProps = {
-    ref: (el: HTMLElement) => void;
+    [attachment: symbol]: Attachment<HTMLElement>;
+    "aria-describedby"?: string;
+    "aria-expanded"?: boolean;
+    "aria-controls"?: string;
     onclick?: () => void;
-    onmouseenter?: () => void;
-    onmouseleave?: () => void;
+    onpointerenter?: (event: PointerEvent) => void;
+    onpointerleave?: (event: PointerEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: () => void;
     ontouchstart?: () => void;
     ontouchend?: () => void;
   };
@@ -21,28 +27,36 @@
     trigger?: Snippet<[TooltipTriggerProps]>;
   } & ClassName &
     PopoverProps;
+
+  const GRACE = 100;
 </script>
 
 <script lang="ts">
+  const generatedId = $props.id();
+
   let {
+    id: providedId,
     delay = 500,
     open = $bindable(false),
     click = false,
     rich = false,
-    arrow,
     trigger,
     anchorEl,
     class: className,
     ...restProps
   }: TooltipProps = $props();
 
-  function isTouchDevice() {
-    return "ontouchstart" in window || navigator.maxTouchPoints > 0;
-  }
+  let id = $derived(providedId ?? generatedId);
+
+  const anchor = createAttachmentKey();
+  const attachAnchor: Attachment<HTMLElement> = (node) => {
+    anchorEl = node;
+  };
 
   let timeout: number;
 
   export function show(after?: number) {
+    cancel();
     timeout = window.setTimeout(
       () => (open = true),
       after === undefined ? delay : after,
@@ -58,40 +72,67 @@
     open = false;
   }
 
+  function hideSoon() {
+    cancel();
+    timeout = window.setTimeout(() => (open = false), GRACE);
+  }
+
+  const notTouch =
+    (handler: () => void) =>
+    ({ pointerType }: PointerEvent) => {
+      if (pointerType !== "touch") handler();
+    };
+
   const triggerProps: TooltipTriggerProps = $derived(
     click
       ? {
-          ref: (ref) => (anchorEl = ref),
-          onclick: () => (open = true),
+          [anchor]: attachAnchor,
+          "aria-expanded": open,
+          "aria-controls": open ? id : undefined,
+          onclick: () => (open = !open),
         }
       : {
-          ref: (ref) => (anchorEl = ref),
-          onmouseenter: () => !isTouchDevice() && show(),
-          onmouseleave: () => hide(),
+          [anchor]: attachAnchor,
+          "aria-describedby": open ? id : undefined,
+          onpointerenter: notTouch(() => show()),
+          onpointerleave: notTouch(hideSoon),
+          onfocus: (event) => {
+            if (
+              event.target instanceof HTMLElement &&
+              event.target.matches(":focus-visible")
+            ) {
+              cancel();
+              open = true;
+            }
+          },
+          onblur: () => hide(),
           ontouchstart: () => show(delay),
           ontouchend: () => cancel(),
         },
   );
+
+  const popupProps: Omit<PopoverProps, "children"> = $derived(
+    click
+      ? {}
+      : {
+          role: "tooltip",
+          onpointerenter: notTouch(cancel),
+          onpointerleave: notTouch(hideSoon),
+        },
+  );
 </script>
 
+{@render trigger?.(triggerProps)}
+
 <Popover
   bind:open
-  role="tooltip"
+  {id}
   {anchorEl}
-  {arrow}
-  class={twMerge(
-    arrow && "overflow-visible",
+  class={cn(
     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}
+  {...mergeProps(popupProps, restProps)}
 />
-
-{@render trigger?.(triggerProps)}

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

@@ -1,11 +1,17 @@
 import { type PopoverProps } from "../popover/index.js";
-import type { ClassName } from "../utils.js";
+import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
+import { type Attachment } from "svelte/attachments";
 export type TooltipTriggerProps = {
-    ref: (el: HTMLElement) => void;
+    [attachment: symbol]: Attachment<HTMLElement>;
+    "aria-describedby"?: string;
+    "aria-expanded"?: boolean;
+    "aria-controls"?: string;
     onclick?: () => void;
-    onmouseenter?: () => void;
-    onmouseleave?: () => void;
+    onpointerenter?: (event: PointerEvent) => void;
+    onpointerleave?: (event: PointerEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: () => void;
     ontouchstart?: () => void;
     ontouchend?: () => void;
 };

package/dist/utils.d.ts

@@ -1,12 +1,18 @@
-import type { ClassNameValue } from "tailwind-merge";
+import { type ClassValue as ClassInput } from "clsx";
+import type { ClassValue } from "svelte/elements";
 export declare function noop(): void;
 export type ElementRef = {
     el?: HTMLElement;
-    ref?: (el: HTMLElement) => void;
 };
 export type ClassName = {
-    class?: ClassNameValue;
+    class?: ClassValue;
 };
+/**
+ * Resolves class values the way Svelte's `class` attribute does (strings,
+ * arrays and objects), then merges conflicting Tailwind classes so later
+ * values win.
+ */
+export declare function cn(...values: ClassInput[]): string;
 export type ToggleEventWithTarget<T extends HTMLElement> = ToggleEvent & {
     currentTarget: EventTarget & T;
 };

package/dist/utils.js

@@ -1,4 +1,14 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 export function noop() { }
+/**
+ * Resolves class values the way Svelte's `class` attribute does (strings,
+ * arrays and objects), then merges conflicting Tailwind classes so later
+ * values win.
+ */
+export function cn(...values) {
+    return twMerge(clsx(values));
+}
 export function uid({ prefix = "", separator = "-" } = {}) {
     const parts = [];
     if (prefix) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -24,12 +24,14 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
-    }
+    },
+    "./theme.css": "./dist/theme.css"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
     "@lucide/svelte": "^1.1.0",
-    "marked": "^18.0.0"
+    "clsx": "^2.1.1",
+    "marked": "^18.0.0",
+    "tailwind-merge": "^3.7.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -62,7 +64,6 @@
     "publint": "0.3.25",
     "svelte": "^5.57.3",
     "svelte-check": "4.7.8",
-    "tailwind-merge": "3.7.0",
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
     "typescript-eslint": "8.72.1",

package/dist/autocomplete/autocomplete-content.svelte

@@ -1,47 +0,0 @@
-<script module lang="ts">
-  import { getAutocompleteContext } from "./index.js";
-  import { baseClasses, type Variants } from "../base.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 AutocompleteProps = {
-    children: Snippet;
-  } & ClassName &
-    Variants &
-    Omit<PopoverProps, "children">;
-</script>
-
-<script lang="ts">
-  let {
-    open = $bindable(false),
-    children,
-    class: className,
-    variant = "elevated",
-    color = "primary",
-    shape = "rounded",
-    ...restProps
-  }: AutocompleteProps = $props();
-
-  const ctx = getAutocompleteContext();
-  ctx.bindOpen(
-    () => open,
-    (newval) => (open = newval),
-  );
-</script>
-
-<Popover
-  bind:open={ctx.open}
-  role="menu"
-  class={twMerge(
-    baseClasses({ variant, color, shape }),
-    "max-h-[40%] border bg-m3-surface-container-highest p-1 shadow",
-    className,
-  )}
-  anchorEl={ctx.anchorEl}
-  placement="bottom"
-  {...restProps}
->
-  {@render children()}
-</Popover>

package/dist/autocomplete/autocomplete-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 AutocompleteProps = {
-    children: Snippet;
-} & ClassName & Variants & Omit<PopoverProps, "children">;
-declare const AutocompleteContent: import("svelte").Component<AutocompleteProps, {}, "open">;
-type AutocompleteContent = ReturnType<typeof AutocompleteContent>;
-export default AutocompleteContent;

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

@@ -1,12 +0,0 @@
-import { ItemContext } from "../common/index.js";
-export declare class AutocompleteContext extends ItemContext {
-    #private;
-    get open(): boolean;
-    set open(value: boolean);
-    bindOpen(getOpen: () => boolean, setOpen: (val: boolean) => void): void;
-    get anchorEl(): HTMLElement | undefined;
-    set anchorEl(value: HTMLElement | undefined);
-    bindAnchorEl(getAnchorEl: () => HTMLElement | undefined, setAnchorEl: (val: HTMLElement | undefined) => void): void;
-}
-export declare function setAutocompleteContext(state: AutocompleteContext): AutocompleteContext;
-export declare function getAutocompleteContext(): AutocompleteContext;

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

@@ -1,34 +0,0 @@
-import { Bindable } from "../bindable.svelte.js";
-import { ItemContext } from "../common/index.js";
-import { getContext, setContext } from "svelte";
-export class AutocompleteContext extends ItemContext {
-    #open = new Bindable(false);
-    #anchorEl = new Bindable(undefined);
-    get open() {
-        return this.#open.value;
-    }
-    set open(value) {
-        this.#open.value = value;
-    }
-    bindOpen(getOpen, setOpen) {
-        this.#open.bind(getOpen, setOpen);
-    }
-    get anchorEl() {
-        return this.#anchorEl.value;
-    }
-    set anchorEl(value) {
-        this.#anchorEl.value = value;
-    }
-    bindAnchorEl(getAnchorEl, setAnchorEl) {
-        this.#anchorEl.bind(getAnchorEl, setAnchorEl);
-    }
-}
-export function setAutocompleteContext(state) {
-    return setContext(AutocompleteContext, state);
-}
-export function getAutocompleteContext() {
-    const ctx = getContext(AutocompleteContext);
-    if (!ctx)
-        throw new Error("AutocompleteContext is undefined");
-    return ctx;
-}

package/dist/autocomplete/autocomplete-input.svelte

@@ -1,36 +0,0 @@
-<script module lang="ts">
-  import { getAutocompleteContext } from "./index.js";
-  import { Input, type InputProps } from "../input/index.js";
-  import { mergeComponentProps } from "../merge-props.js";
-
-  export type AutocompleteInputProps = InputProps;
-</script>
-
-<script lang="ts">
-  let {
-    el = $bindable(),
-    value = $bindable(""),
-    ...restProps
-  }: AutocompleteInputProps = $props();
-
-  const ctx = getAutocompleteContext();
-  ctx.bindInput(
-    () => value,
-    (newval) => (value = newval),
-  );
-  ctx.bindAnchorEl(
-    () => el,
-    (newval) => (el = newval),
-  );
-
-  function handleKeyDown(event: KeyboardEvent) {
-    ctx.handleKeyDown(event);
-  }
-</script>
-
-<Input
-  bind:el={ctx.anchorEl}
-  bind:value={ctx.input}
-  autocomplete="off"
-  {...mergeComponentProps(Input, { onkeydown: handleKeyDown }, restProps)}
-/>

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

@@ -1,5 +0,0 @@
-import { type InputProps } from "../input/index.js";
-export type AutocompleteInputProps = InputProps;
-declare const AutocompleteInput: import("svelte").Component<InputProps, {}, "el" | "value">;
-type AutocompleteInput = ReturnType<typeof AutocompleteInput>;
-export default AutocompleteInput;

package/dist/autocomplete/autocomplete-item.svelte

@@ -1,68 +0,0 @@
-<script module lang="ts">
-  import { getAutocompleteContext } from "./index.js";
-  import { baseClasses, type Variants } from "../base.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 AutocompleteItemProps = {
-    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
-  }: AutocompleteItemProps = $props();
-
-  const ctx = getAutocompleteContext();
-
-  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"
-  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(
-    {
-      onclick: handleClick,
-      onmouseenter: handleMouseEnter,
-    },
-    restProps,
-  )}
->
-  {@render children()}
-</div>

package/dist/autocomplete/autocomplete-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 AutocompleteItemProps = {
-    onSelect?: (el: HTMLElement) => void;
-    children: Snippet;
-} & ElementRef & ClassName & Variants & HTMLAttributes<HTMLDivElement>;
-declare const AutocompleteItem: import("svelte").Component<AutocompleteItemProps, {}, "el">;
-type AutocompleteItem = ReturnType<typeof AutocompleteItem>;
-export default AutocompleteItem;

package/dist/base.css

@@ -1,71 +0,0 @@
-.radius-none {
-  --radius: none;
-}
-
-.radius-xs {
-  --radius: 0.125rem;
-}
-
-.radius-sm {
-  --radius: 0.25rem;
-}
-
-.radius-md {
-  --radius: 0.375rem;
-}
-
-.radius-lg {
-  --radius: 0.5rem;
-}
-
-.radius-xl {
-  --radius: 0.75rem;
-}
-
-.radius-2xl {
-  --radius: 1rem;
-}
-
-.radius-3xl {
-  --radius: 1.5rem;
-}
-
-.radius-4xl {
-  --radius: 2rem;
-}
-
-.radius-full {
-  --radius: calc(infinity * 1px);
-}
-
-.color-primary {
-  --color-main: var(--md-sys-color-primary);
-  --color-on-main: var(--md-sys-color-on-primary);
-  --color-tonal: var(--md-sys-color-primary-container);
-  --color-on-tonal: var(--md-sys-color-on-primary-container);
-  --color-shadow: var(--md-sys-color-shadow);
-}
-
-.color-secondary {
-  --color-main: var(--md-sys-color-secondary);
-  --color-on-main: var(--md-sys-color-on-secondary);
-  --color-tonal: var(--md-sys-color-secondary-container);
-  --color-on-tonal: var(--md-sys-color-on-secondary-container);
-  --color-shadow: var(--md-sys-color-shadow);
-}
-
-.color-tertiary {
-  --color-main: var(--md-sys-color-tertiary);
-  --color-on-main: var(--md-sys-color-on-tertiary);
-  --color-tonal: var(--md-sys-color-tertiary-container);
-  --color-on-tonal: var(--md-sys-color-on-tertiary-container);
-  --color-shadow: var(--md-sys-color-shadow);
-}
-
-.color-error {
-  --color-main: var(--md-sys-color-error);
-  --color-on-main: var(--md-sys-color-on-error);
-  --color-tonal: var(--md-sys-color-error-container);
-  --color-on-tonal: var(--md-sys-color-on-error-container);
-  --color-shadow: var(--md-sys-color-shadow);
-}

package/dist/bindable.svelte.d.ts

@@ -1,7 +0,0 @@
-export declare class Bindable<T> {
-    #private;
-    constructor(value: T);
-    bind(getValue: () => T, setValue: (value: T) => void): void;
-    get value(): T;
-    set value(value: T);
-}

package/dist/bindable.svelte.js

@@ -1,25 +0,0 @@
-export class Bindable {
-    #value = $state();
-    #setValue;
-    constructor(value) {
-        this.#value = value;
-    }
-    bind(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);
-        }
-    }
-}

package/dist/command/command-content.svelte

@@ -1,15 +0,0 @@
-<script module lang="ts">
-  import type { ClassName } from "../utils.js";
-  import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
-
-  export type CommandContentProps = { children: Snippet } & ClassName;
-</script>
-
-<script lang="ts">
-  let { class: className, children }: CommandContentProps = $props();
-</script>
-
-<div class={twMerge("h-full overflow-scroll", className)}>
-  {@render children()}
-</div>

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

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

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

@@ -1,5 +0,0 @@
-import { ItemContext } from "../common/index.js";
-export declare class CommandContext extends ItemContext {
-}
-export declare function setCommandContext(state: CommandContext): CommandContext;
-export declare function getCommandContext(): CommandContext;

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

@@ -1,13 +0,0 @@
-import { ItemContext } from "../common/index.js";
-import { getContext, setContext } from "svelte";
-export class CommandContext extends ItemContext {
-}
-export function setCommandContext(state) {
-    return setContext(CommandContext, state);
-}
-export function getCommandContext() {
-    const ctx = getContext(CommandContext);
-    if (!ctx)
-        throw new Error("CommandContext is undefined");
-    return ctx;
-}

package/dist/command/command-input.svelte

@@ -1,44 +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 { HTMLInputAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
-
-  export type CommandInputProps = {} & ElementRef &
-    ClassName &
-    Variants &
-    HTMLInputAttributes;
-</script>
-
-<script lang="ts">
-  let {
-    value = $bindable(""),
-    class: className,
-    variant = "plain",
-    color = "secondary",
-    shape = "rounded",
-    ...restProps
-  }: CommandInputProps = $props();
-
-  const ctx = getCommandContext();
-  ctx.bindInput(
-    () => value,
-    (newValue) => (value = newValue),
-  );
-
-  function handleKeyDown(event: KeyboardEvent) {
-    ctx.handleKeyDown(event);
-  }
-</script>
-
-<input
-  bind:value={ctx.input}
-  class={twMerge(
-    baseClasses({ variant, color, shape }),
-    "w-full p-1 focus-visible:outline-hidden",
-    className,
-  )}
-  {...mergeProps({ onkeydown: handleKeyDown }, restProps)}
-/>