kosui 0.2.0 → 0.4.0

package/dist/base.js

@@ -1,4 +1,4 @@
-import { twMerge } from "tailwind-merge";
+import { cn } from "./utils.js";
 export const VARIANTS = [
     "elevated",
     "filled",
@@ -15,22 +15,10 @@ export const COLORS = [
     "plain",
     "inherit",
 ];
-export const SHAPES = ["square", "rounded", "circle"];
+export const SHAPES = ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export const SIZES = ["xs", "sm", "md", "lg", "xl"];
-export const RADII = [
-    "none",
-    "xs",
-    "sm",
-    "md",
-    "lg",
-    "xl",
-    "2xl",
-    "3xl",
-    "4xl",
-    "full",
-];
 export const UNDERLINES = ["always", "hover", "none"];
-const hoverBaseClasses = ({ variant, color }) => twMerge("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", variant === "filled" && "hover:opacity-90", variant === "tonal" && "hover:opacity-80", variant === "text" && "hover:opacity-80", variant === "elevated" &&
+const hoverBaseClasses = ({ variant, color }) => cn("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", variant === "filled" && "hover:opacity-90", variant === "tonal" && "hover:opacity-80", variant === "text" && "hover:opacity-80", variant === "elevated" &&
     color === "primary" &&
     "hover:bg-m3-primary-container/30", variant === "elevated" &&
     color === "secondary" &&
@@ -47,27 +35,25 @@ const hoverBaseClasses = ({ variant, color }) => twMerge("disabled:text-m3-on-su
     "hover:bg-m3-tertiary/15", (variant === "outlined" || variant === "plain") &&
     color === "error" &&
     "hover:bg-m3-error/15");
-const focusBaseClasses = ({ variant, color }) => twMerge("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", "focus:ring-1 focus-visible:outline-hidden", variant === "filled" && "focus:opacity-90", variant === "tonal" && "focus:opacity-80", variant === "text" && "focus:opacity-80", color === "primary" && "focus:ring-m3-primary", color === "secondary" && "focus:ring-m3-secondary", color === "tertiary" && "focus:ring-m3-tertiary", color === "error" && "focus:ring-m3-error", variant === "filled" && color === "primary" && "focus:ring-m3-on-primary", variant === "filled" &&
-    color === "secondary" &&
-    "focus:ring-m3-on-secondary", variant === "filled" && color === "tertiary" && "focus:ring-m3-on-tertiary", variant === "filled" && color === "error" && "focus:ring-m3-on-error", variant === "elevated" &&
+const focusBaseClasses = ({ variant, color }) => cn("disabled:text-m3-on-surface/38 disabled:bg-m3-on-surface/12 disabled:cursor-not-allowed", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary", variant === "filled" && "focus-visible:opacity-90", variant === "tonal" && "focus-visible:opacity-80", variant === "text" && "focus-visible:opacity-80", variant === "elevated" &&
     color === "primary" &&
-    "focus:bg-m3-primary-container/30", variant === "elevated" &&
+    "focus-visible:bg-m3-primary-container/30", variant === "elevated" &&
     color === "secondary" &&
-    "focus:bg-m3-secondary-container/30", variant === "elevated" &&
+    "focus-visible:bg-m3-secondary-container/30", variant === "elevated" &&
     color === "tertiary" &&
-    "focus:bg-m3-tertiary-container/30", variant === "elevated" &&
+    "focus-visible:bg-m3-tertiary-container/30", variant === "elevated" &&
     color === "error" &&
-    "focus:bg-m3-error-container/30", (variant === "outlined" || variant === "plain") &&
+    "focus-visible:bg-m3-error-container/30", (variant === "outlined" || variant === "plain") &&
     color === "primary" &&
-    "focus:bg-m3-primary/15", (variant === "outlined" || variant === "plain") &&
+    "focus-visible:bg-m3-primary/15", (variant === "outlined" || variant === "plain") &&
     color === "secondary" &&
-    "focus:bg-m3-secondary/15", (variant === "outlined" || variant === "plain") &&
+    "focus-visible:bg-m3-secondary/15", (variant === "outlined" || variant === "plain") &&
     color === "tertiary" &&
-    "focus:bg-m3-tertiary/15", (variant === "outlined" || variant === "plain") &&
+    "focus-visible:bg-m3-tertiary/15", (variant === "outlined" || variant === "plain") &&
     color === "error" &&
-    "focus:bg-m3-error/15");
-export const baseClasses = ({ variant, color, shape, underline, hover = false, focus = false, }) => twMerge(variant === "elevated" &&
-    "bg-m3-surface-container-low shadow shadow-m3-shadow/20", variant === "outlined" && "ring-1", variant === "plain" && "", variant === "text" && "underline-offset-4", color === "primary" && "text-m3-primary", color === "secondary" && "text-m3-secondary", color === "tertiary" && "text-m3-tertiary", color === "error" && "text-m3-error", shape === "square" && "", shape === "rounded" && "rounded-md", shape === "circle" && "rounded-full", underline === "always" && "underline", underline === "hover" && "hover:underline", underline === "none" && "", variant === "filled" &&
+    "focus-visible:bg-m3-error/15");
+export const baseClasses = ({ variant, color, shape, underline, hover = false, focus = false, }) => cn(variant === "elevated" &&
+    "bg-m3-surface-container-low shadow shadow-m3-shadow/20", variant === "outlined" && "ring-1", variant === "plain" && "", variant === "text" && "underline-offset-4", color === "primary" && "text-m3-primary", color === "secondary" && "text-m3-secondary", color === "tertiary" && "text-m3-tertiary", color === "error" && "text-m3-error", shape === "none" && "rounded-none", shape === "xs" && "rounded-sm", shape === "sm" && "rounded-lg", shape === "md" && "rounded-xl", shape === "lg" && "rounded-2xl", shape === "xl" && "rounded-[1.75rem]", shape === "full" && "rounded-full", underline === "always" && "underline", underline === "hover" && "hover:underline", underline === "none" && "", variant === "filled" &&
     color === "primary" &&
     "bg-m3-primary text-m3-on-primary", variant === "filled" &&
     color === "secondary" &&

package/dist/box/box.svelte

@@ -1,24 +1,18 @@
 <script lang="ts">
   import { baseClasses, type Variants } from "../base.js";
-  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
   import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
 
   export type BoxProps = {
-    centered?: boolean;
-    backdrop?: boolean;
     children?: Snippet;
   } & ElementRef &
     ClassName &
     Variants &
     HTMLAttributes<HTMLDivElement>;
   let {
-    backdrop = false,
-    centered = false,
     children,
     el = $bindable(),
-    ref = noop,
     class: className,
     variant,
     color,
@@ -29,13 +23,7 @@
 
 <div
   bind:this={el}
-  use:ref
-  class={twMerge(
-    backdrop && "bg-m3-surface-container",
-    baseClasses({ variant, color, shape }),
-    centered && "flex items-center justify-center",
-    className,
-  )}
+  class={cn(baseClasses({ variant, color, shape }), className)}
   {...restProps}
 >
   {@render children?.()}

package/dist/box/box.svelte.d.ts

@@ -3,8 +3,6 @@ import { type ClassName, type ElementRef } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export type BoxProps = {
-    centered?: boolean;
-    backdrop?: boolean;
     children?: Snippet;
 } & ElementRef & ClassName & Variants & HTMLAttributes<HTMLDivElement>;
 declare const Box: import("svelte").Component<BoxProps, {}, "el">;

package/dist/breadcrumbs/breadcrumbs.svelte

@@ -1,9 +1,11 @@
 <script module lang="ts">
-  import { Link, type LinkProps } from "../link/index.js";
+  import type { ColorProp } from "../base.js";
+  import { Link } from "../link/index.js";
+  import { type ClassName, type ElementRef } from "../utils.js";
   import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
+  import type { HTMLAttributes } from "svelte/elements";
 
-  type Crumb = {
+  export type Crumb = {
     title: string;
     href: string;
   };
@@ -11,29 +13,46 @@
   export type BreadcrumbsProps = {
     path: Crumb[];
     separator?: Snippet | string;
-  } & Omit<LinkProps, "children">;
+  } & ColorProp &
+    ElementRef &
+    ClassName &
+    HTMLAttributes<HTMLElement>;
 </script>
 
 <script lang="ts">
-  const {
+  let {
     path,
     separator = "›",
-    class: className,
+    color = "primary",
+    el = $bindable(),
+    "aria-label": ariaLabel = "Breadcrumb",
     ...restProps
   }: BreadcrumbsProps = $props();
 </script>
 
-<div class={twMerge("flex gap-2", className)}>
-  {#each path as { title, href }, index (title)}
-    {#if index !== 0}
-      <div>
-        {#if typeof separator === "function"}
-          {@render separator()}
-        {:else}
-          {separator}
+<nav bind:this={el} aria-label={ariaLabel} {...restProps}>
+  <ol class="flex flex-wrap items-center gap-x-2 gap-y-1">
+    {#each path as { title, href }, index (index)}
+      {@const current = index === path.length - 1}
+      <li class="flex items-center gap-2">
+        {#if index !== 0}
+          <span aria-hidden="true">
+            {#if typeof separator === "function"}
+              {@render separator()}
+            {:else}
+              {separator}
+            {/if}
+          </span>
         {/if}
-      </div>
-    {/if}
-    <Link {href} {...restProps}>{title}</Link>
-  {/each}
-</div>
+        <Link
+          {href}
+          underline="hover"
+          color={current ? "inherit" : color}
+          aria-current={current ? "page" : undefined}
+        >
+          {title}
+        </Link>
+      </li>
+    {/each}
+  </ol>
+</nav>

package/dist/breadcrumbs/breadcrumbs.svelte.d.ts

@@ -1,13 +1,15 @@
-import { type LinkProps } from "../link/index.js";
+import type { ColorProp } from "../base.js";
+import { type ClassName, type ElementRef } from "../utils.js";
 import type { Snippet } from "svelte";
-type Crumb = {
+import type { HTMLAttributes } from "svelte/elements";
+export type Crumb = {
     title: string;
     href: string;
 };
 export type BreadcrumbsProps = {
     path: Crumb[];
     separator?: Snippet | string;
-} & Omit<LinkProps, "children">;
-declare const Breadcrumbs: import("svelte").Component<BreadcrumbsProps, {}, "">;
+} & ColorProp & ElementRef & ClassName & HTMLAttributes<HTMLElement>;
+declare const Breadcrumbs: import("svelte").Component<BreadcrumbsProps, {}, "el">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
 export default Breadcrumbs;

package/dist/breadcrumbs/index.d.ts

@@ -1 +1 @@
-export { default as Breadcrumbs } from "./breadcrumbs.svelte";
+export { default as Breadcrumbs, type BreadcrumbsProps, type Crumb, } from "./breadcrumbs.svelte";

package/dist/breadcrumbs/index.js

@@ -1 +1 @@
-export { default as Breadcrumbs } from "./breadcrumbs.svelte";
+export { default as Breadcrumbs, } from "./breadcrumbs.svelte";

package/dist/button/button.svelte

@@ -1,63 +1,128 @@
 <script lang="ts" module>
-  import { baseClasses, type Variants } from "../base.js";
+  import {
+    baseClasses,
+    type Size,
+    type SizeProp,
+    type Variants,
+  } from "../base.js";
   import { mergeProps } from "../merge-props.js";
   import { Tooltip, type TooltipTriggerProps } from "../tooltip/index.js";
-  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
   import type { LucideIcon } from "@lucide/svelte";
   import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
+  import type {
+    HTMLAnchorAttributes,
+    HTMLButtonAttributes,
+  } from "svelte/elements";
 
-  export type ButtonProps = {
+  type ButtonOwnProps = {
     icon?: LucideIcon;
-    size?: number;
     tooltip?: Snippet | string;
   } & ElementRef &
     ClassName &
     Variants &
-    HTMLButtonAttributes;
+    SizeProp;
+
+  export type ButtonActionProps = ButtonOwnProps & {
+    href?: undefined;
+  } & HTMLButtonAttributes;
+
+  export type ButtonLinkProps = ButtonOwnProps & {
+    href: string;
+  } & Omit<HTMLAnchorAttributes, "href">;
+
+  export type ButtonProps = ButtonActionProps | ButtonLinkProps;
+
+  const LABEL_SIZES: Record<Size, string> = {
+    xs: "gap-1.5 px-3 py-1.5 text-xs",
+    sm: "gap-2 px-4 py-2 text-sm",
+    md: "gap-2 px-5 py-2.5 text-base",
+    lg: "gap-2.5 px-6 py-3 text-lg",
+    xl: "gap-3 px-7 py-4 text-xl",
+  };
+  const ICON_ONLY_SIZES: Record<Size, string> = {
+    xs: "size-7",
+    sm: "size-9",
+    md: "size-11",
+    lg: "size-13",
+    xl: "size-15",
+  };
+  const ICON_SIZES: Record<Size, number> = {
+    xs: 14,
+    sm: 16,
+    md: 20,
+    lg: 22,
+    xl: 24,
+  };
 </script>
 
 <script lang="ts">
   let {
     icon: IconComponent,
-    size = 16,
     tooltip,
     children,
     el = $bindable(),
-    ref = noop,
     class: className,
     variant = "outlined",
     color = "primary",
-    shape = "rounded",
-    type = "button",
+    shape = "full",
+    size = "sm",
     ...restProps
   }: ButtonProps = $props();
-</script>
 
-{#snippet button({ ref: anchorRef, ...triggerProps }: TooltipTriggerProps)}
-  <button
-    bind:this={el}
-    use:ref
-    use:anchorRef
-    class={twMerge(
+  let tooltipLabel = $derived(
+    !children && typeof tooltip === "string" ? tooltip : undefined,
+  );
+
+  let classes = $derived(
+    cn(
       baseClasses({ variant, color, shape, hover: true, focus: true }),
-      "flex items-center justify-center gap-2 text-sm text-nowrap transition-all select-none enabled:active:scale-95",
-      children ? "px-4 py-2" : "p-2",
+      "inline-flex shrink-0 items-center justify-center text-nowrap transition-all select-none not-disabled:active:scale-95",
+      children ? LABEL_SIZES[size] : ICON_ONLY_SIZES[size],
       className,
-    )}
-    {type}
-    {...mergeProps(restProps, triggerProps)}
-  >
-    {#if IconComponent}
-      <IconComponent {size} />
-    {/if}
-    {@render children?.()}
-  </button>
+    ),
+  );
+</script>
+
+{#snippet content()}
+  {#if IconComponent}
+    <IconComponent size={ICON_SIZES[size]} />
+  {/if}
+  {@render children?.()}
+{/snippet}
+
+{#snippet button({
+  "aria-describedby": describedBy,
+  ...triggerProps
+}: TooltipTriggerProps)}
+  {#if restProps.href === undefined}
+    <button
+      bind:this={el}
+      aria-label={tooltipLabel}
+      aria-describedby={tooltipLabel ? undefined : describedBy}
+      class={classes}
+      type="button"
+      {...mergeProps(restProps, triggerProps)}
+    >
+      {@render content()}
+    </button>
+  {:else}
+    <!-- eslint-disable svelte/no-navigation-without-resolve -->
+    <a
+      bind:this={el}
+      aria-label={tooltipLabel}
+      aria-describedby={tooltipLabel ? undefined : describedBy}
+      class={classes}
+      {...mergeProps(restProps, triggerProps)}
+    >
+      {@render content()}
+    </a>
+    <!-- eslint-enable svelte/no-navigation-without-resolve -->
+  {/if}
 {/snippet}
 
 {#if tooltip}
-  <Tooltip arrow>
+  <Tooltip>
     {#snippet trigger(props)}
       {@render button(props)}
     {/snippet}
@@ -68,5 +133,5 @@
     {/if}
   </Tooltip>
 {:else}
-  {@render button({ ref: noop })}
+  {@render button({})}
 {/if}

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

@@ -1,13 +1,19 @@
-import { type Variants } from "../base.js";
+import { type SizeProp, type Variants } from "../base.js";
 import { type ClassName, type ElementRef } from "../utils.js";
 import type { LucideIcon } from "@lucide/svelte";
 import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-export type ButtonProps = {
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+type ButtonOwnProps = {
     icon?: LucideIcon;
-    size?: number;
     tooltip?: Snippet | string;
-} & ElementRef & ClassName & Variants & HTMLButtonAttributes;
+} & ElementRef & ClassName & Variants & SizeProp;
+export type ButtonActionProps = ButtonOwnProps & {
+    href?: undefined;
+} & HTMLButtonAttributes;
+export type ButtonLinkProps = ButtonOwnProps & {
+    href: string;
+} & Omit<HTMLAnchorAttributes, "href">;
+export type ButtonProps = ButtonActionProps | ButtonLinkProps;
 declare const Button: import("svelte").Component<ButtonProps, {}, "el">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/button/index.d.ts

@@ -1 +1 @@
-export { default as Button, type ButtonProps } from "./button.svelte";
+export { default as Button, type ButtonActionProps, type ButtonLinkProps, type ButtonProps, } from "./button.svelte";

package/dist/button/index.js

@@ -1 +1 @@
-export { default as Button } from "./button.svelte";
+export { default as Button, } from "./button.svelte";

package/dist/chip/chip.svelte

@@ -1,15 +1,32 @@
 <script lang="ts" module>
+  import type { Size, SizeProp } from "../base.js";
   import { Box, type BoxProps } from "../box/index.js";
+  import { cn } from "../utils.js";
   import { X } from "@lucide/svelte";
   import type { Snippet } from "svelte";
-  import { twMerge } from "tailwind-merge";
 
   export type ChipProps = {
     title?: string;
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
     onDelete?: (event: MouseEvent | KeyboardEvent) => void;
     children: Snippet;
-  } & BoxProps;
+  } & SizeProp &
+    BoxProps;
+
+  const LABEL_SIZES: Record<Size, string> = {
+    xs: "px-2 py-0.5 text-xs",
+    sm: "px-3 py-1 text-sm",
+    md: "px-3.5 py-1.5 text-base",
+    lg: "px-4 py-2 text-lg",
+    xl: "px-5 py-2.5 text-xl",
+  };
+  const REMOVE_SIZES: Record<Size, [string, number]> = {
+    xs: ["size-5", 12],
+    sm: ["size-6", 14],
+    md: ["size-7", 16],
+    lg: ["size-8", 18],
+    xl: ["size-9", 20],
+  };
 </script>
 
 <script lang="ts">
@@ -22,35 +39,66 @@
     class: className,
     variant = "filled",
     color = "primary",
-    shape = "rounded",
+    shape = "sm",
+    size = "sm",
     ...restProps
   }: ChipProps = $props();
+
+  const id = $props.id();
+  let labelClasses = $derived(cn(LABEL_SIZES[size], onDelete && "pr-1"));
+  let [removeSize, iconSize] = $derived(REMOVE_SIZES[size]);
+  const focusRing =
+    "rounded-[inherit] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary";
+
+  function deleteOnKey(event: KeyboardEvent) {
+    if (onDelete && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      onDelete(event);
+    }
+  }
 </script>
 
 <Box
   bind:el
-  role="option"
   {variant}
   {color}
   {shape}
-  class={twMerge("inline-flex gap-1 px-1 py-0 text-xs", className)}
+  class={cn("inline-flex items-center", className)}
   {...restProps}
 >
-  <button onclick={onClick} {title}>
-    {@render children()}
-  </button>
+  {#if onClick}
+    <button
+      type="button"
+      id="{id}-label"
+      class={cn(labelClasses, focusRing)}
+      {title}
+      onclick={onClick}
+      onkeydown={deleteOnKey}
+    >
+      {@render children()}
+    </button>
+  {:else}
+    <span id="{id}-label" class={labelClasses} {title}>
+      {@render children()}
+    </span>
+  {/if}
 
   {#if onDelete}
     <button
-      aria-label="Delete chip"
-      class={twMerge(
-        "transition-all hover:ring-1 active:scale-95",
-        shape === "rounded" && "rounded",
-        shape === "circle" && "rounded-full",
+      type="button"
+      id="{id}-delete"
+      aria-label="Remove"
+      aria-labelledby="{id}-delete {id}-label"
+      class={cn(
+        "mr-0.5 inline-flex shrink-0 items-center justify-center rounded-full transition hover:bg-current/10",
+        removeSize,
+        focusRing,
+        "rounded-full",
       )}
       onclick={onDelete}
+      onkeydown={deleteOnKey}
     >
-      <X size={12} />
+      <X size={iconSize} />
     </button>
   {/if}
 </Box>

package/dist/chip/chip.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { SizeProp } from "../base.js";
 import { type BoxProps } from "../box/index.js";
 import type { Snippet } from "svelte";
 export type ChipProps = {
@@ -5,7 +6,7 @@ export type ChipProps = {
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
     onDelete?: (event: MouseEvent | KeyboardEvent) => void;
     children: Snippet;
-} & BoxProps;
+} & SizeProp & BoxProps;
 declare const Chip: import("svelte").Component<ChipProps, {}, "el">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/dist/command/action.svelte.js

@@ -24,7 +24,6 @@ export class Action {
 }
 export class Registry {
     #actions = $state([]);
-    #shortcuts = {};
     get actions() {
         return this.#actions;
     }
@@ -36,7 +35,7 @@ export class Registry {
         }
     }
     getByShortcut(shortcut) {
-        return this.#shortcuts[shortcut.toString()];
+        return this.#actions.find((action) => action.shortcut?.equals(shortcut));
     }
     call(id) {
         const action = this.get(id);
@@ -46,31 +45,27 @@ export class Registry {
         action.callback();
     }
     register(...actions) {
-        for (const action of actions) {
-            untrack(() => {
-                if (this.#actions.find((existing) => existing.id === action.id)) {
+        untrack(() => {
+            for (const action of actions) {
+                if (this.#actions.some((existing) => existing.id === action.id)) {
                     throw new Error(`${action.id} is already registered`);
                 }
-            });
-            if (action.shortcut) {
-                if (action.shortcut.toString() in this.#shortcuts) {
+                if (action.shortcut && this.getByShortcut(action.shortcut)) {
                     throw new Error(`${action.shortcut} is already registered`);
                 }
-                this.#shortcuts[action.shortcut.toString()] = action;
             }
-        }
-        this.#actions.unshift(...actions);
+            this.#actions.unshift(...actions);
+        });
         return () => this.unregister(...actions);
     }
     unregister(...actions) {
-        for (const action of actions) {
-            const index = this.#actions.indexOf(action);
-            if (index !== -1) {
-                this.#actions.splice(index, 1);
-                if (action.shortcut) {
-                    delete this.#shortcuts[action.shortcut.toString()];
+        untrack(() => {
+            for (const action of actions) {
+                const index = this.#actions.indexOf(action);
+                if (index !== -1) {
+                    this.#actions.splice(index, 1);
                 }
             }
-        }
+        });
     }
 }