kosui 0.2.0 → 0.5.0

package/dist/shortcut/shortcut.js

@@ -1,72 +1,125 @@
-const keys = {
+const APPLE_MODIFIERS = [
+    ["ctrl", "⌃", "Control"],
+    ["alt", "⌥", "Option"],
+    ["shift", "⇧", "Shift"],
+    ["meta", "⌘", "Command"],
+];
+const OTHER_MODIFIERS = [
+    ["meta", "Win", "Win"],
+    ["ctrl", "Ctrl", "Ctrl"],
+    ["alt", "Alt", "Alt"],
+    ["shift", "Shift", "Shift"],
+];
+const ARROWS = {
     ArrowDown: "↓",
     ArrowLeft: "←",
     ArrowRight: "→",
     ArrowUp: "↑",
-    Alt: "⌥",
+};
+const APPLE_KEYS = {
+    ...ARROWS,
     Backspace: "⌫",
-    CapsLock: "⇪",
-    Control: "⌃",
-    Dead: "☠️",
     Delete: "⌦",
-    End: "⇲",
-    Enter: "⏎",
+    End: "↘",
+    Enter: "↩",
     Escape: "⎋",
-    Home: "⌂",
-    Meta: "⌘",
+    Home: "↖",
     PageDown: "⇟",
     PageUp: "⇞",
-    Shift: "⇧",
-    Tab: "↹",
-    " ": "␣",
+    Tab: "⇥",
+    " ": "Space",
+};
+const OTHER_KEYS = {
+    ...ARROWS,
+    Delete: "Del",
+    Escape: "Esc",
+    PageDown: "PgDn",
+    PageUp: "PgUp",
+    " ": "Space",
+};
+const KEY_NAMES = {
+    ArrowDown: "Down Arrow",
+    ArrowLeft: "Left Arrow",
+    ArrowRight: "Right Arrow",
+    ArrowUp: "Up Arrow",
+    " ": "Space",
 };
-for (let i = 1; i <= 12; i++) {
-    keys[`F${i}`] = `F${i}`;
+export function isApple() {
+    return (typeof navigator !== "undefined" &&
+        /Mac|iPhone|iPad|iPod/.test(navigator.platform));
+}
+function normalize(key) {
+    return key.length === 1 ? key.toLowerCase() : key;
+}
+function isAscii(char) {
+    return char.length === 1 && char <= "~";
+}
+function keyOf(event) {
+    if (!isAscii(event.key) && (event.key.length === 1 || event.key === "Dead")) {
+        const physical = /^(?:Key|Digit)(.)$/.exec(event.code)?.[1];
+        if (physical)
+            return physical.toLowerCase();
+    }
+    return normalize(event.key);
+}
+function keyLabel(key, labels) {
+    return labels[key] ?? (key.length === 1 ? key.toUpperCase() : key);
 }
 export class Shortcut {
     key;
-    alt;
+    mod;
     ctrl;
-    meta;
+    alt;
     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;
+    meta;
+    constructor({ key, mod, ctrl, alt, shift, meta }) {
+        this.key = normalize(key);
+        this.mod = mod ?? false;
+        this.ctrl = ctrl ?? false;
+        this.alt = alt ?? false;
+        this.shift = shift ?? false;
+        this.meta = meta ?? false;
+    }
+    #modifiers(apple) {
+        return {
+            ctrl: this.ctrl || (this.mod && !apple),
+            alt: this.alt,
+            shift: this.shift,
+            meta: this.meta || (this.mod && apple),
+        };
+    }
+    #id() {
+        const { ctrl, alt, shift, meta } = this.#modifiers(isApple());
+        return [ctrl && "Control", alt && "Alt", shift && "Shift", meta && "Meta"]
+            .filter(Boolean)
+            .concat(this.key)
+            .join("+");
+    }
+    equals(other) {
+        return this.#id() === other.#id();
     }
     matches(event) {
-        return (this.key === event.key &&
-            this.alt === event.altKey &&
-            this.ctrl === event.ctrlKey &&
-            this.meta === event.metaKey &&
-            this.shift === event.shiftKey);
+        return this.equals(Shortcut.fromEvent(event));
     }
-    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;
+    keys() {
+        const apple = isApple();
+        const modifiers = this.#modifiers(apple);
+        return [
+            ...(apple ? APPLE_MODIFIERS : OTHER_MODIFIERS)
+                .filter(([name]) => modifiers[name])
+                .map(([, symbol]) => symbol),
+            keyLabel(this.key, apple ? APPLE_KEYS : OTHER_KEYS),
+        ];
     }
     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();
+        const apple = isApple();
+        const modifiers = this.#modifiers(apple);
+        return [
+            ...(apple ? APPLE_MODIFIERS : OTHER_MODIFIERS)
+                .filter(([name]) => modifiers[name])
+                .map(([, , name]) => name),
+            keyLabel(this.key, KEY_NAMES),
+        ].join("+");
     }
     static isChar(event) {
         return (event.key.length === 1 &&
@@ -76,11 +129,11 @@ export class Shortcut {
     }
     static fromEvent(event) {
         return new Shortcut({
-            key: event.key,
-            alt: event.altKey,
+            key: keyOf(event),
             ctrl: event.ctrlKey,
-            meta: event.metaKey,
+            alt: event.altKey,
             shift: event.shiftKey,
+            meta: event.metaKey,
         });
     }
     static ARROW_UP = new Shortcut({ key: "ArrowUp" });

package/dist/skeleton/skeleton.svelte

@@ -1,23 +1,28 @@
 <script lang="ts">
   import { Box, type BoxProps } from "../box/index.js";
-  import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "../utils.js";
 
-  export type SkeletonProps = { children?: Snippet } & BoxProps;
+  export type SkeletonProps = BoxProps;
   let {
     children,
     class: className,
-    backdrop = true,
-    shape = "rounded",
+    variant,
+    shape = "xs",
     ...restProps
   }: SkeletonProps = $props();
 </script>
 
 <Box
-  class={twMerge("animate-pulse", className)}
-  {backdrop}
+  class={cn(
+    "min-h-lh motion-safe:animate-pulse",
+    !variant && "bg-m3-surface-container",
+    className,
+  )}
+  {variant}
   {shape}
   {...restProps}
 >
-  {@render children?.()}
+  {#if children}
+    <div class="invisible">{@render children()}</div>
+  {/if}
 </Box>

package/dist/skeleton/skeleton.svelte.d.ts

@@ -1,8 +1,5 @@
 import { type BoxProps } from "../box/index.js";
-import type { Snippet } from "svelte";
-export type SkeletonProps = {
-    children?: Snippet;
-} & BoxProps;
-declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+export type SkeletonProps = BoxProps;
+declare const Skeleton: import("svelte").Component<BoxProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/slider/index.d.ts

@@ -1,8 +1 @@
-export { getSliderContext, setSliderContext, SliderContext, } from "./slider-context.svelte.js";
-export { default as SliderHandleLabelArrow, type SliderHandleLabelArrowProps, } from "./slider-handle-label-arrow.svelte";
-export { default as SliderHandleLabel, type SliderHandleLabelProps, } from "./slider-handle-label.svelte";
-export { default as SliderHandle, type SliderHandleProps, } from "./slider-handle.svelte";
-export { default as SliderMarkDot, type SliderMarkDotProps, } from "./slider-mark-dot.svelte";
-export { default as SliderMarkLabel, type SliderMarkLabelProps, } from "./slider-mark-label.svelte";
-export { default as SliderMark, type SliderMarkProps, } from "./slider-mark.svelte";
-export { default as Slider, SLIDER_COLORS, SLIDER_RADII, SLIDER_SIZES, type Mark, type SliderColor, type SliderColorProp, type SliderProps, type SliderRadius, type SliderRadiusProp, type SliderSize, type SliderSizeProp, } from "./slider.svelte";
+export { default as Slider, type SliderMark, type SliderProps, } from "./slider.svelte";

package/dist/slider/index.js

@@ -1,8 +1 @@
-export { getSliderContext, setSliderContext, SliderContext, } from "./slider-context.svelte.js";
-export { default as SliderHandleLabelArrow, } from "./slider-handle-label-arrow.svelte";
-export { default as SliderHandleLabel, } from "./slider-handle-label.svelte";
-export { default as SliderHandle, } from "./slider-handle.svelte";
-export { default as SliderMarkDot, } from "./slider-mark-dot.svelte";
-export { default as SliderMarkLabel, } from "./slider-mark-label.svelte";
-export { default as SliderMark, } from "./slider-mark.svelte";
-export { default as Slider, SLIDER_COLORS, SLIDER_RADII, SLIDER_SIZES, } from "./slider.svelte";
+export { default as Slider, } from "./slider.svelte";