kosui 0.2.0 → 0.5.0

package/dist/popover/popover.svelte

@@ -3,62 +3,59 @@
   import { mergeProps } from "../merge-props.js";
   import { Shortcut } from "../shortcut/index.js";
   import {
-    noop,
+    cn,
     type ClassName,
-    type ElementRef,
     type ToggleEventWithTarget,
   } from "../utils.js";
-  import * as floatingUi from "@floating-ui/dom";
   import type { Snippet } from "svelte";
+  import { prefersReducedMotion } from "svelte/motion";
   import type { HTMLAttributes } from "svelte/elements";
   import { scale } from "svelte/transition";
-  import { twMerge, type ClassNameValue } from "tailwind-merge";
+
+  type Side = "top" | "right" | "bottom" | "left";
+  export type PopoverPlacement = Side | `${Side}-start` | `${Side}-end`;
 
   export type PopoverProps = {
-    arrow?: boolean;
-    arrowClass?: ClassNameValue;
-    placement?: floatingUi.Placement;
-    strategy?: floatingUi.Strategy;
+    placement?: PopoverPlacement;
     open?: boolean;
     anchorEl?: HTMLElement;
     onKeydownWhileOpen?: (event: KeyboardEvent) => void;
     children: Snippet;
+    el?: HTMLDivElement;
   } & ClassName &
-    ElementRef &
-    HTMLAttributes<HTMLDivElement>;
-
-  type Side = "top" | "bottom" | "left" | "right";
+    Omit<HTMLAttributes<HTMLDivElement>, "class">;
+
+  const AREAS: Record<PopoverPlacement, string> = {
+    top: "top span-all",
+    "top-start": "top span-right",
+    "top-end": "top span-left",
+    bottom: "bottom span-all",
+    "bottom-start": "bottom span-right",
+    "bottom-end": "bottom span-left",
+    left: "left span-all",
+    "left-start": "left span-bottom",
+    "left-end": "left span-top",
+    right: "right span-all",
+    "right-start": "right span-bottom",
+    "right-end": "right span-top",
+  };
 </script>
 
 <script lang="ts">
   let {
-    arrow = false,
     placement = "top",
-    strategy = "fixed",
     open = $bindable(false),
     anchorEl,
     children,
     onKeydownWhileOpen,
     el: popoverEl = $bindable(),
-    ref = noop,
-    arrowClass,
     class: className,
     ...restProps
   }: PopoverProps = $props();
 
-  let arrowEl: HTMLDivElement | undefined = $state();
-
-  function getArrowRotation(placement: Side) {
-    if (placement === "top") {
-      return "rotateZ(0deg)";
-    } else if (placement === "right") {
-      return "rotateZ(90deg)";
-    } else if (placement === "bottom") {
-      return "rotateZ(180deg)";
-    } else if (placement === "left") {
-      return "rotateZ(270deg)";
-    }
-  }
+  let side = $derived(placement.split("-")[0] as Side);
+  let vertical = $derived(side === "top" || side === "bottom");
+  let centered = $derived(!placement.includes("-"));
 
   function handleEscape(event: KeyboardEvent) {
     if (popoverEl && Shortcut.ESCAPE.matches(event)) {
@@ -80,101 +77,51 @@
     }
   }
 
-  function handleClickInside(event: MouseEvent) {
-    event.stopImmediatePropagation();
-  }
-
   function onbeforetoggle(event: ToggleEventWithTarget<HTMLDivElement>) {
-    if (event.newState === "closed") {
-      open = false;
-    } else {
-      open = true;
-    }
+    open = event.newState === "open";
   }
 
   $effect(() => {
-    if (popoverEl) {
-      popoverEl.showPopover();
-      events.on("keydown", handleEscape);
-      events.on("keydown", onKeydownWhileOpen);
-      events.on("mousedown", handleClickOutside);
-
-      return () => {
-        events.remove("keydown", handleEscape);
-        events.remove("keydown", onKeydownWhileOpen);
-        events.remove("mousedown", handleClickOutside);
-      };
+    if (!open || !popoverEl) return;
+    if (!popoverEl.matches(":popover-open")) {
+      popoverEl.showPopover({ source: anchorEl });
     }
+    events.on("keydown", handleEscape);
+    events.on("keydown", onKeydownWhileOpen);
+    events.on("mousedown", handleClickOutside);
+
+    return () => {
+      events.remove("keydown", handleEscape);
+      events.remove("keydown", onKeydownWhileOpen);
+      events.remove("mousedown", handleClickOutside);
+    };
   });
-
-  $effect(() => {
-    if (anchorEl && popoverEl) {
-      return floatingUi.autoUpdate(anchorEl, popoverEl, updatePosition);
-    }
-  });
-
-  async function updatePosition() {
-    if (anchorEl && popoverEl && arrowEl) {
-      const computedPosition = await floatingUi.computePosition(
-        anchorEl,
-        popoverEl,
-        {
-          placement,
-          middleware: [
-            floatingUi.offset(6),
-            floatingUi.flip(),
-            floatingUi.shift({ padding: 5 }),
-            floatingUi.arrow({ element: arrowEl }),
-          ],
-          strategy,
-        },
-      );
-
-      Object.assign(popoverEl.style, {
-        left: `${computedPosition.x}px`,
-        top: `${computedPosition.y}px`,
-      });
-
-      if (computedPosition.middlewareData.arrow) {
-        const arrow = computedPosition.middlewareData.arrow;
-
-        const side = computedPosition.placement.split("-")[0] as Side;
-
-        const staticSide = {
-          top: "bottom",
-          right: "left",
-          bottom: "top",
-          left: "right",
-        }[side];
-
-        Object.assign(arrowEl.style, {
-          left: arrow.x != null ? `${arrow.x}px` : "",
-          top: arrow.y != null ? `${arrow.y}px` : "",
-          [staticSide]: "-4px",
-          transform: getArrowRotation(side),
-        });
-      }
-    }
-  }
 </script>
 
 {#if open}
   <div
     bind:this={popoverEl}
-    use:ref
     popover="manual"
-    class={twMerge(className)}
-    transition:scale={{ duration: 150, start: 0.95 }}
-    {...mergeProps(restProps, { onbeforetoggle, onclick: handleClickInside })}
+    class={cn(className)}
+    style:position-area={anchorEl && AREAS[placement]}
+    style:position-try-fallbacks={anchorEl &&
+      (vertical
+        ? "flip-block, flip-inline, flip-block flip-inline"
+        : "flip-inline, flip-block, flip-block flip-inline")}
+    style:inset={anchorEl && "auto"}
+    style:margin={anchorEl && (centered ? "6px" : vertical ? "6px 0" : "0 6px")}
+    style:justify-self={anchorEl && vertical && centered
+      ? "anchor-center"
+      : undefined}
+    style:align-self={anchorEl && !vertical && centered
+      ? "anchor-center"
+      : undefined}
+    transition:scale={{
+      duration: prefersReducedMotion.current ? 0 : 150,
+      start: 0.95,
+    }}
+    {...mergeProps(restProps, { onbeforetoggle })}
   >
     {@render children()}
-    <div
-      bind:this={arrowEl}
-      class={twMerge(
-        arrowClass,
-        "absolute size-2 rotate-45",
-        arrow ? "block" : "hidden",
-      )}
-    ></div>
   </div>
 {/if}

package/dist/popover/popover.svelte.d.ts

@@ -1,18 +1,16 @@
-import { type ClassName, type ElementRef } from "../utils.js";
-import * as floatingUi from "@floating-ui/dom";
+import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import { type ClassNameValue } from "tailwind-merge";
+type Side = "top" | "right" | "bottom" | "left";
+export type PopoverPlacement = Side | `${Side}-start` | `${Side}-end`;
 export type PopoverProps = {
-    arrow?: boolean;
-    arrowClass?: ClassNameValue;
-    placement?: floatingUi.Placement;
-    strategy?: floatingUi.Strategy;
+    placement?: PopoverPlacement;
     open?: boolean;
     anchorEl?: HTMLElement;
     onKeydownWhileOpen?: (event: KeyboardEvent) => void;
     children: Snippet;
-} & ClassName & ElementRef & HTMLAttributes<HTMLDivElement>;
+    el?: HTMLDivElement;
+} & ClassName & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const Popover: import("svelte").Component<PopoverProps, {}, "el" | "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/progress/circular-progress.svelte

@@ -1,50 +1,83 @@
 <script lang="ts" module>
+  import {
+    baseClasses,
+    type ColorProp,
+    type Size,
+    type SizeProp,
+  } from "../base.js";
+  import { cn, type ClassName } from "../utils.js";
   import type { Snippet } from "svelte";
+  import type { SVGAttributes } from "svelte/elements";
+
   export type CircularProgressProps = {
-    children?: Snippet;
     progress?: number;
-    size?: string | number;
-    trackColor?: string;
-    textColor?: string;
-    color?: string;
-    class?: string;
+    children?: Snippet;
+    el?: SVGSVGElement;
+  } & ColorProp &
+    SizeProp &
+    ClassName &
+    Omit<SVGAttributes<SVGSVGElement>, "children" | "class" | "color">;
+
+  const SIZES: Record<Size, string> = {
+    xs: "size-4",
+    sm: "size-6",
+    md: "size-8",
+    lg: "size-10",
+    xl: "size-12",
   };
+  const CIRCUMFERENCE = 2 * Math.PI * 10;
 </script>
 
 <script lang="ts">
-  const DASH_ARRAY = 2 * 3.1415926535 * 10;
-
-  const {
-    children,
+  let {
     progress,
-    size = 24,
-    trackColor = "color-mix(in srgb, currentColor 10%, transparent)",
-    textColor = "currentColor",
-    color = "currentColor",
+    children,
+    el = $bindable(),
+    color = "primary",
+    size = "sm",
     class: className,
+    "aria-label": ariaLabel = "Loading",
+    ...restProps
   }: CircularProgressProps = $props();
+
+  let fraction = $derived(
+    progress === undefined ? undefined : Math.min(Math.max(progress, 0), 1),
+  );
 </script>
 
 <svg
+  bind:this={el}
   xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
   viewBox="0 0 24 24"
   fill="transparent"
-  class={className}
-  class:circular={progress === undefined}
+  role="progressbar"
+  aria-label={ariaLabel}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-valuenow={fraction === undefined
+    ? undefined
+    : Math.round(fraction * 100)}
+  class={cn("shrink-0", SIZES[size], baseClasses({ color }), className)}
+  class:spin={fraction === undefined}
+  {...restProps}
 >
-  <circle cx="50%" cy="50%" r="10px" stroke={trackColor} stroke-width="2px" />
   <circle
-    class:path={progress === undefined}
-    cx="50%"
-    cy="50%"
-    r="10px"
-    stroke={color}
-    stroke-width="2px"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="color-mix(in srgb, currentColor 10%, transparent)"
+    stroke-width="2"
+  />
+  <circle
+    class={[fraction === undefined && "dash"]}
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="2"
     stroke-linecap="round"
-    stroke-dasharray={DASH_ARRAY}
-    stroke-dashoffset={(1 - (progress ?? 1)) * DASH_ARRAY}
+    stroke-dasharray={CIRCUMFERENCE}
+    stroke-dashoffset={(1 - (fraction ?? 1)) * CIRCUMFERENCE}
     transform-origin="center"
     transform="rotate(-90)"
   />
@@ -54,18 +87,18 @@
     font-size="7"
     text-anchor="middle"
     dominant-baseline="central"
-    fill={textColor}
+    fill="currentColor"
   >
     {@render children?.()}
   </text>
 </svg>
 
 <style>@layer components { 
-  .circular {
+  .spin {
     animation: rotate 2s linear infinite;
   }
 
-  .path {
+  .dash {
     animation: dash 1.5s ease-in-out infinite;
   }
 
@@ -74,6 +107,7 @@
       transform: rotate(360deg);
     }
   }
+
   @keyframes dash {
     0% {
       stroke-dasharray: 1, 200;

package/dist/progress/circular-progress.svelte.d.ts

@@ -1,13 +1,12 @@
+import { type ColorProp, type SizeProp } from "../base.js";
+import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
+import type { SVGAttributes } from "svelte/elements";
 export type CircularProgressProps = {
-    children?: Snippet;
     progress?: number;
-    size?: string | number;
-    trackColor?: string;
-    textColor?: string;
-    color?: string;
-    class?: string;
-};
-declare const CircularProgress: import("svelte").Component<CircularProgressProps, {}, "">;
+    children?: Snippet;
+    el?: SVGSVGElement;
+} & ColorProp & SizeProp & ClassName & Omit<SVGAttributes<SVGSVGElement>, "children" | "class" | "color">;
+declare const CircularProgress: import("svelte").Component<CircularProgressProps, {}, "el">;
 type CircularProgress = ReturnType<typeof CircularProgress>;
 export default CircularProgress;

package/dist/shortcut/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ShortcutBadge, type ShortcutBadgeProps, } from "./shortcut-badge.svelte";
-export { Shortcut } from "./shortcut.js";
+export { Shortcut, type ShortcutOptions } from "./shortcut.js";
+export { default as ShortcutHint, type ShortcutHintProps, } from "./shortcut-hint.svelte";

package/dist/shortcut/index.js

@@ -1,2 +1,2 @@
-export { default as ShortcutBadge, } from "./shortcut-badge.svelte";
 export { Shortcut } from "./shortcut.js";
+export { default as ShortcutHint, } from "./shortcut-hint.svelte";

package/dist/shortcut/shortcut-hint.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Shortcut } from "./shortcut.js";
+
+  export type ShortcutHintProps = {
+    shortcut: Shortcut;
+  } & ElementRef &
+    ClassName &
+    HTMLAttributes<HTMLElement>;
+</script>
+
+<script lang="ts">
+  let {
+    shortcut,
+    el = $bindable(),
+    class: className,
+    ...restProps
+  }: ShortcutHintProps = $props();
+</script>
+
+<kbd
+  bind:this={el}
+  class={cn("inline-flex shrink-0 gap-1 font-sans text-xs", className)}
+  {...restProps}
+>
+  <span class="sr-only">{shortcut}</span>
+  {#each shortcut.keys() as key, index (index)}
+    <kbd
+      aria-hidden="true"
+      class="inline-flex h-[1.75em] min-w-[1.75em] items-center justify-center rounded border border-b-2 border-m3-outline-variant bg-m3-surface-container-low px-[0.4em] text-m3-on-surface-variant"
+    >
+      {key}
+    </kbd>
+  {/each}
+</kbd>

package/dist/shortcut/shortcut-hint.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type ClassName, type ElementRef } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Shortcut } from "./shortcut.js";
+export type ShortcutHintProps = {
+    shortcut: Shortcut;
+} & ElementRef & ClassName & HTMLAttributes<HTMLElement>;
+declare const ShortcutHint: import("svelte").Component<ShortcutHintProps, {}, "el">;
+type ShortcutHint = ReturnType<typeof ShortcutHint>;
+export default ShortcutHint;

package/dist/shortcut/shortcut.d.ts

@@ -1,20 +1,25 @@
-export declare class Shortcut {
+export type ShortcutOptions = {
     key: string;
-    alt: boolean;
-    ctrl: boolean;
-    meta: boolean;
-    shift: boolean;
-    constructor(shortcut: {
-        key: string;
-        alt?: boolean;
-        ctrl?: boolean;
-        meta?: boolean;
-        shift?: boolean;
-    });
+    mod?: boolean;
+    ctrl?: boolean;
+    alt?: boolean;
+    shift?: boolean;
+    meta?: boolean;
+};
+export declare function isApple(): boolean;
+export declare class Shortcut {
+    #private;
+    readonly key: string;
+    readonly mod: boolean;
+    readonly ctrl: boolean;
+    readonly alt: boolean;
+    readonly shift: boolean;
+    readonly meta: boolean;
+    constructor({ key, mod, ctrl, alt, shift, meta }: ShortcutOptions);
+    equals(other: Shortcut): boolean;
     matches(event: KeyboardEvent): boolean;
-    toChar(): string;
+    keys(): string[];
     toString(): string;
-    [Symbol.iterator](): Iterator<string>;
     static isChar(event: KeyboardEvent): boolean;
     static fromEvent(event: KeyboardEvent): Shortcut;
     static ARROW_UP: Shortcut;