kosui 0.2.0 → 0.4.0

package/dist/markdown/markdown.svelte

@@ -1,186 +1,75 @@
 <script module lang="ts">
-  import {
-    MarkdownBlockquote,
-    MarkdownBr,
-    MarkdownCode,
-    MarkdownCodespan,
-    MarkdownContext,
-    MarkdownDef,
-    MarkdownDel,
-    MarkdownEm,
-    MarkdownEscape,
-    MarkdownHeading,
-    MarkdownHr,
-    MarkdownHtml,
-    MarkdownImage,
-    MarkdownLink,
-    MarkdownList,
-    MarkdownListItem,
-    MarkdownParagraph,
-    MarkdownSpace,
-    MarkdownStrong,
-    MarkdownTable,
-    MarkdownTableCell,
-    MarkdownText,
-    MarkdownTokens,
-    setMarkdownContext,
-    type MarkdownComponentProps,
-  } from "./index.js";
-  import {
-    Lexer,
-    type MarkedOptions,
-    type MarkedToken,
-    type Tokens,
-  } from "marked";
-  import type { Snippet } from "svelte";
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import MarkdownTokens from "./markdown-tokens.svelte";
+  import { parse } from "./parse.js";
+  import type { MarkdownRenderers } from "./types.js";
 
   export type MarkdownProps = {
     value: string;
-    options?: MarkedOptions;
-    blockquote?: Snippet<[MarkdownComponentProps<Tokens.Blockquote>]>;
-    br?: Snippet<[MarkdownComponentProps<Tokens.Br>]>;
-    code?: Snippet<[MarkdownComponentProps<Tokens.Code>]>;
-    codespan?: Snippet<[MarkdownComponentProps<Tokens.Codespan>]>;
-    def?: Snippet<[MarkdownComponentProps<Tokens.Def>]>;
-    del?: Snippet<[MarkdownComponentProps<Tokens.Del>]>;
-    em?: Snippet<[MarkdownComponentProps<Tokens.Em>]>;
-    escape?: Snippet<[MarkdownComponentProps<Tokens.Escape>]>;
-    heading?: Snippet<[MarkdownComponentProps<Tokens.Heading>]>;
-    hr?: Snippet<[MarkdownComponentProps<Tokens.Hr>]>;
-    html?: Snippet<[MarkdownComponentProps<Tokens.HTML | Tokens.Tag>]>;
-    image?: Snippet<[MarkdownComponentProps<Tokens.Image>]>;
-    link?: Snippet<[MarkdownComponentProps<Tokens.Link>]>;
-    listItem?: Snippet<[MarkdownComponentProps<Tokens.ListItem>]>;
-    list?: Snippet<[MarkdownComponentProps<Tokens.List>]>;
-    paragraph?: Snippet<[MarkdownComponentProps<Tokens.Paragraph>]>;
-    space?: Snippet<[MarkdownComponentProps<Tokens.Space>]>;
-    strong?: Snippet<[MarkdownComponentProps<Tokens.Strong>]>;
-    tableCell?: Snippet<[MarkdownComponentProps<Tokens.TableCell>]>;
-    table?: Snippet<[MarkdownComponentProps<Tokens.Table>]>;
-    text?: Snippet<[MarkdownComponentProps<Tokens.Text>]>;
-  };
+    gfm?: boolean;
+    breaks?: boolean;
+  } & MarkdownRenderers &
+    ElementRef &
+    ClassName &
+    Omit<HTMLAttributes<HTMLDivElement>, "children">;
 </script>
 
 <script lang="ts">
   let {
     value,
-    options = {},
-    blockquote = defaultBlockquote,
-    br = defaultBr,
-    code = defaultCode,
-    codespan = defaultCodespan,
-    def = defaultDef,
-    del = defaultDel,
-    em = defaultEm,
-    escape = defaultEscape,
-    heading = defaultHeading,
-    hr = defaultHr,
-    html = defaultHtml,
-    image = defaultImage,
-    link = defaultLink,
-    listItem = defaultListItem,
-    list = defaultList,
-    paragraph = defaultParagraph,
-    space = defaultSpace,
-    strong = defaultStrong,
-    tableCell = defaultTableCell,
-    table = defaultTable,
-    text = defaultText,
+    gfm = true,
+    breaks = false,
+    el = $bindable(),
+    class: className,
+    blockquote,
+    br,
+    code,
+    codespan,
+    del,
+    em,
+    heading,
+    hr,
+    html,
+    image,
+    link,
+    list,
+    listItem,
+    paragraph,
+    strong,
+    table,
+    tableCell,
+    text,
+    ...restProps
   }: MarkdownProps = $props();
 
-  setMarkdownContext(
-    new MarkdownContext(
-      () => ({
-        blockquote,
-        br,
-        code,
-        codespan,
-        def,
-        del,
-        em,
-        escape,
-        heading,
-        hr,
-        html,
-        image,
-        link,
-        list_item: listItem,
-        list,
-        paragraph,
-        space,
-        strong,
-        table,
-        text,
-      }),
-      () => tableCell,
-    ),
-  );
-
-  let tokens = $derived(Lexer.lex(value, options) as MarkedToken[]);
+  const tokens = $derived(parse(value, { gfm, breaks }));
+  const renderers: MarkdownRenderers = $derived({
+    blockquote,
+    br,
+    code,
+    codespan,
+    del,
+    em,
+    heading,
+    hr,
+    html,
+    image,
+    link,
+    list,
+    listItem,
+    paragraph,
+    strong,
+    table,
+    tableCell,
+    text,
+  });
 </script>
 
-{#snippet defaultBlockquote(props: MarkdownComponentProps<Tokens.Blockquote>)}
-  <MarkdownBlockquote {...props} />
-{/snippet}
-{#snippet defaultBr(props: MarkdownComponentProps<Tokens.Br>)}
-  <MarkdownBr {...props} />
-{/snippet}
-{#snippet defaultCode(props: MarkdownComponentProps<Tokens.Code>)}
-  <MarkdownCode {...props} />
-{/snippet}
-{#snippet defaultCodespan(props: MarkdownComponentProps<Tokens.Codespan>)}
-  <MarkdownCodespan {...props} />
-{/snippet}
-{#snippet defaultDef(props: MarkdownComponentProps<Tokens.Def>)}
-  <MarkdownDef {...props} />
-{/snippet}
-{#snippet defaultDel(props: MarkdownComponentProps<Tokens.Del>)}
-  <MarkdownDel {...props} />
-{/snippet}
-{#snippet defaultEm(props: MarkdownComponentProps<Tokens.Em>)}
-  <MarkdownEm {...props} />
-{/snippet}
-{#snippet defaultEscape(props: MarkdownComponentProps<Tokens.Escape>)}
-  <MarkdownEscape {...props} />
-{/snippet}
-{#snippet defaultHeading(props: MarkdownComponentProps<Tokens.Heading>)}
-  <MarkdownHeading {...props} />
-{/snippet}
-{#snippet defaultHr(props: MarkdownComponentProps<Tokens.Hr>)}
-  <MarkdownHr {...props} />
-{/snippet}
-{#snippet defaultHtml(props: MarkdownComponentProps<Tokens.HTML | Tokens.Tag>)}
-  <MarkdownHtml {...props} />
-{/snippet}
-{#snippet defaultImage(props: MarkdownComponentProps<Tokens.Image>)}
-  <MarkdownImage {...props} />
-{/snippet}
-{#snippet defaultLink(props: MarkdownComponentProps<Tokens.Link>)}
-  <MarkdownLink {...props} />
-{/snippet}
-{#snippet defaultListItem(props: MarkdownComponentProps<Tokens.ListItem>)}
-  <MarkdownListItem {...props} />
-{/snippet}
-{#snippet defaultList(props: MarkdownComponentProps<Tokens.List>)}
-  <MarkdownList {...props} />
-{/snippet}
-{#snippet defaultParagraph(props: MarkdownComponentProps<Tokens.Paragraph>)}
-  <MarkdownParagraph {...props} />
-{/snippet}
-{#snippet defaultSpace(props: MarkdownComponentProps<Tokens.Space>)}
-  <MarkdownSpace {...props} />
-{/snippet}
-{#snippet defaultStrong(props: MarkdownComponentProps<Tokens.Strong>)}
-  <MarkdownStrong {...props} />
-{/snippet}
-{#snippet defaultTable(props: MarkdownComponentProps<Tokens.Table>)}
-  <MarkdownTable {...props} />
-{/snippet}
-{#snippet defaultTableCell(props: MarkdownComponentProps<Tokens.TableCell>)}
-  <MarkdownTableCell {...props} />
-{/snippet}
-{#snippet defaultText(props: MarkdownComponentProps<Tokens.Text>)}
-  <MarkdownText {...props} />
-{/snippet}
-
-<MarkdownTokens {tokens} />
+<div
+  bind:this={el}
+  class={cn("flex flex-col gap-3 wrap-break-word", className)}
+  {...restProps}
+>
+  <MarkdownTokens {tokens} {renderers} />
+</div>

package/dist/markdown/markdown.svelte.d.ts

@@ -1,31 +1,11 @@
-import { type MarkdownComponentProps } from "./index.js";
-import { type MarkedOptions, type Tokens } from "marked";
-import type { Snippet } from "svelte";
+import { type ClassName, type ElementRef } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+import type { MarkdownRenderers } from "./types.js";
 export type MarkdownProps = {
     value: string;
-    options?: MarkedOptions;
-    blockquote?: Snippet<[MarkdownComponentProps<Tokens.Blockquote>]>;
-    br?: Snippet<[MarkdownComponentProps<Tokens.Br>]>;
-    code?: Snippet<[MarkdownComponentProps<Tokens.Code>]>;
-    codespan?: Snippet<[MarkdownComponentProps<Tokens.Codespan>]>;
-    def?: Snippet<[MarkdownComponentProps<Tokens.Def>]>;
-    del?: Snippet<[MarkdownComponentProps<Tokens.Del>]>;
-    em?: Snippet<[MarkdownComponentProps<Tokens.Em>]>;
-    escape?: Snippet<[MarkdownComponentProps<Tokens.Escape>]>;
-    heading?: Snippet<[MarkdownComponentProps<Tokens.Heading>]>;
-    hr?: Snippet<[MarkdownComponentProps<Tokens.Hr>]>;
-    html?: Snippet<[MarkdownComponentProps<Tokens.HTML | Tokens.Tag>]>;
-    image?: Snippet<[MarkdownComponentProps<Tokens.Image>]>;
-    link?: Snippet<[MarkdownComponentProps<Tokens.Link>]>;
-    listItem?: Snippet<[MarkdownComponentProps<Tokens.ListItem>]>;
-    list?: Snippet<[MarkdownComponentProps<Tokens.List>]>;
-    paragraph?: Snippet<[MarkdownComponentProps<Tokens.Paragraph>]>;
-    space?: Snippet<[MarkdownComponentProps<Tokens.Space>]>;
-    strong?: Snippet<[MarkdownComponentProps<Tokens.Strong>]>;
-    tableCell?: Snippet<[MarkdownComponentProps<Tokens.TableCell>]>;
-    table?: Snippet<[MarkdownComponentProps<Tokens.Table>]>;
-    text?: Snippet<[MarkdownComponentProps<Tokens.Text>]>;
-};
-declare const Markdown: import("svelte").Component<MarkdownProps, {}, "">;
+    gfm?: boolean;
+    breaks?: boolean;
+} & MarkdownRenderers & ElementRef & ClassName & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+declare const Markdown: import("svelte").Component<MarkdownProps, {}, "el">;
 type Markdown = ReturnType<typeof Markdown>;
 export default Markdown;

package/dist/markdown/parse.d.ts

@@ -0,0 +1,5 @@
+import { type MarkedToken } from "marked";
+export declare function parse(value: string, options: {
+    gfm: boolean;
+    breaks: boolean;
+}): MarkedToken[];

package/dist/markdown/parse.js

@@ -0,0 +1,30 @@
+import { Lexer } from "marked";
+const SCHEME = /^[a-z][a-z\d+.-]*:/i;
+const SAFE_SCHEME = /^(?:https?|mailto|tel):/i;
+function isSafe(url) {
+    const normalized = url.replace(/[\p{Cc}\s]/gu, "");
+    return !SCHEME.test(normalized) || SAFE_SCHEME.test(normalized);
+}
+function sanitize(tokens) {
+    for (const token of tokens) {
+        if (token.type === "link" || token.type === "image") {
+            token.href = isSafe(token.href) ? token.href : "";
+        }
+        if ("tokens" in token && token.tokens) {
+            sanitize(token.tokens);
+        }
+        if (token.type === "list") {
+            sanitize(token.items);
+        }
+        if (token.type === "table") {
+            for (const cell of [...token.header, ...token.rows.flat()]) {
+                sanitize(cell.tokens);
+            }
+        }
+    }
+}
+export function parse(value, options) {
+    const tokens = new Lexer(options).lex(value);
+    sanitize(tokens);
+    return tokens;
+}

package/dist/markdown/types.d.ts

@@ -0,0 +1,28 @@
+import type { Tokens } from "marked";
+import type { Snippet } from "svelte";
+export type MarkdownSnippetProps<T> = {
+    token: T;
+    children: Snippet;
+};
+type Renderer<T> = Snippet<[MarkdownSnippetProps<T>]>;
+export type MarkdownRenderers = {
+    blockquote?: Renderer<Tokens.Blockquote>;
+    br?: Renderer<Tokens.Br>;
+    code?: Renderer<Tokens.Code>;
+    codespan?: Renderer<Tokens.Codespan>;
+    del?: Renderer<Tokens.Del>;
+    em?: Renderer<Tokens.Em>;
+    heading?: Renderer<Tokens.Heading>;
+    hr?: Renderer<Tokens.Hr>;
+    html?: Renderer<Tokens.HTML | Tokens.Tag>;
+    image?: Renderer<Tokens.Image>;
+    link?: Renderer<Tokens.Link>;
+    list?: Renderer<Tokens.List>;
+    listItem?: Renderer<Tokens.ListItem>;
+    paragraph?: Renderer<Tokens.Paragraph>;
+    strong?: Renderer<Tokens.Strong>;
+    table?: Renderer<Tokens.Table>;
+    tableCell?: Renderer<Tokens.TableCell>;
+    text?: Renderer<Tokens.Text>;
+};
+export {};

package/dist/markdown/types.js

@@ -0,0 +1 @@
+export {};

package/dist/menu/index.d.ts

@@ -1,8 +1,5 @@
-export { Divider as MenuDivider, Header as MenuHeader, } from "../common/index.js";
+export { Divider as MenuDivider } from "../common/index.js";
 export { default as MenuActions, type MenuActionsProps, } from "./menu-actions.svelte";
-export { default as MenuContent, type MenuContentProps, } from "./menu-content.svelte";
-export { getMenuContext, MenuContext, setMenuContext, } from "./menu-context.svelte.js";
+export { default as MenuGroup, type MenuGroupProps } from "./menu-group.svelte";
 export { default as MenuItem, type MenuItemProps } from "./menu-item.svelte";
-export { default as MenuTriggerButton, type MenuTriggerButtonProps, } from "./menu-trigger-button.svelte";
-export { default as MenuTrigger, type MenuTriggerProps, } from "./menu-trigger.svelte";
-export { default as Menu, type MenuProps } from "./menu.svelte";
+export { default as Menu, type MenuProps, type MenuTriggerProps, } from "./menu.svelte";

package/dist/menu/index.js

@@ -1,8 +1,5 @@
-export { Divider as MenuDivider, Header as MenuHeader, } from "../common/index.js";
+export { Divider as MenuDivider } from "../common/index.js";
 export { default as MenuActions, } from "./menu-actions.svelte";
-export { default as MenuContent, } from "./menu-content.svelte";
-export { getMenuContext, MenuContext, setMenuContext, } from "./menu-context.svelte.js";
+export { default as MenuGroup } from "./menu-group.svelte";
 export { default as MenuItem } from "./menu-item.svelte";
-export { default as MenuTriggerButton, } from "./menu-trigger-button.svelte";
-export { default as MenuTrigger, } from "./menu-trigger.svelte";
-export { default as Menu } from "./menu.svelte";
+export { default as Menu, } from "./menu.svelte";

package/dist/menu/menu-actions.svelte

@@ -1,51 +1,57 @@
 <script lang="ts">
   import type { Action } from "../command/index.js";
-  import { MenuDivider, MenuHeader, MenuItem } from "./index.js";
-  import { Check } from "@lucide/svelte";
+  import { Divider as MenuDivider } from "../common/index.js";
+  import { ShortcutHint } from "../shortcut/index.js";
+  import MenuGroup from "./menu-group.svelte";
+  import MenuItem from "./menu-item.svelte";
 
   export type MenuActionsProps = {
     actions: Action[];
   };
   let { actions }: MenuActionsProps = $props();
 
-  let categoryHasSelected = $derived(
-    actions.reduce(
-      (acc, { category, selected }) => ({
-        ...acc,
-        [category]: acc[category] || selected !== undefined,
-      }),
-      {} as Record<string, boolean>,
-    ),
+  type Group = { category: string; actions: Action[]; checkable: boolean };
+
+  const groups = $derived(
+    actions.reduce<Group[]>((groups, action) => {
+      let last = groups.at(-1);
+      if (last?.category !== action.category) {
+        last = { category: action.category, actions: [], checkable: false };
+        groups.push(last);
+      }
+      last.actions.push(action);
+      last.checkable ||= action.selected !== undefined;
+      return groups;
+    }, []),
   );
 </script>
 
-{#each actions as action, index (action)}
-  {@const Icon = action.icon}
-  {#if index === 0 || actions[index - 1].category !== action.category}
-    {#if index !== 0}
-      <MenuDivider />
-    {/if}
-    <MenuHeader>{action.category}</MenuHeader>
-  {/if}
-  <MenuItem
-    class="gap-2"
-    onSelect={action.callback}
-    title={action.description}
-    disabled={!action.enabled()}
-  >
-    {#if categoryHasSelected[action.category]}
-      {#if action.selected?.()}
-        <Check class="text-m3-primary" size={16} />
-      {:else}
-        <div class="size-4"></div>
+{#snippet items({ actions, checkable }: Group)}
+  {#each actions as action (action)}
+    <MenuItem
+      onSelect={action.callback}
+      title={action.description}
+      disabled={!action.enabled()}
+      checked={checkable ? (action.selected?.() ?? false) : undefined}
+    >
+      <action.icon size={16} class="shrink-0" />
+      {action.name}
+      {#if action.shortcut}
+        <ShortcutHint shortcut={action.shortcut} class="ml-auto pl-4" />
       {/if}
-    {/if}
-    <Icon size={16} />
-    {action.name}
-    {#if action.shortcut}
-      <div class="ml-auto pl-2 text-xs">
-        {action.shortcut.toString()}
-      </div>
-    {/if}
-  </MenuItem>
+    </MenuItem>
+  {/each}
+{/snippet}
+
+{#each groups as group, index (index)}
+  {#if index > 0}
+    <MenuDivider />
+  {/if}
+  {#if group.category}
+    <MenuGroup label={group.category}>
+      {@render items(group)}
+    </MenuGroup>
+  {:else}
+    {@render items(group)}
+  {/if}
 {/each}

package/dist/menu/menu-context.d.ts

@@ -0,0 +1,4 @@
+export type MenuContext = {
+    close(): void;
+};
+export declare const getMenuContext: () => MenuContext, setMenuContext: (context: MenuContext) => MenuContext;

package/dist/menu/menu-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "svelte";
+export const [getMenuContext, setMenuContext] = createContext();

package/dist/menu/menu-group.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import { cn, type ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type MenuGroupProps = {
+    label: string;
+    el?: HTMLDivElement;
+    children: Snippet;
+  } & ClassName &
+    Omit<HTMLAttributes<HTMLDivElement>, "class">;
+</script>
+
+<script lang="ts">
+  let {
+    label,
+    children,
+    el = $bindable(),
+    class: className,
+    ...restProps
+  }: MenuGroupProps = $props();
+
+  const id = $props.id();
+</script>
+
+<div
+  bind:this={el}
+  role="group"
+  aria-labelledby="{id}-label"
+  class={cn(className)}
+  {...restProps}
+>
+  <div
+    id="{id}-label"
+    class="px-3 pt-2 pb-1 text-xs font-medium text-m3-on-surface-variant"
+  >
+    {label}
+  </div>
+  {@render children()}
+</div>

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

@@ -0,0 +1,11 @@
+import { type ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type MenuGroupProps = {
+    label: string;
+    el?: HTMLDivElement;
+    children: Snippet;
+} & ClassName & Omit<HTMLAttributes<HTMLDivElement>, "class">;
+declare const MenuGroup: import("svelte").Component<MenuGroupProps, {}, "el">;
+type MenuGroup = ReturnType<typeof MenuGroup>;
+export default MenuGroup;

package/dist/menu/menu-item.svelte

@@ -1,85 +1,62 @@
 <script module lang="ts">
-  import { baseClasses, type Variants } from "../base.js";
-  import { getMenuContext } from "./index.js";
+  import { baseClasses, type ColorProp } from "../base.js";
   import { mergeProps } from "../merge-props.js";
-  import { Shortcut } from "../shortcut/index.js";
-  import type { ClassName, ElementRef } from "../utils.js";
+  import { cn, type ClassName } from "../utils.js";
+  import { Check } from "@lucide/svelte";
   import type { Snippet } from "svelte";
   import type { HTMLButtonAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
+  import { getMenuContext } from "./menu-context.js";
 
   export type MenuItemProps = {
-    onSelect?: (el: HTMLElement) => void;
-    children: Snippet<[]>;
-  } & ElementRef &
-    ClassName &
-    Variants &
-    Omit<HTMLButtonAttributes, "type" | "value">;
+    onSelect?: () => void;
+    checked?: boolean;
+    el?: HTMLButtonElement;
+    children: Snippet;
+  } & ClassName &
+    ColorProp &
+    Omit<HTMLButtonAttributes, "type" | "value" | "role" | "class">;
 </script>
 
 <script lang="ts">
   let {
     onSelect,
+    checked,
     children,
     el = $bindable(),
+    color = "plain",
     class: className,
-    variant = "plain",
-    color = "secondary",
-    shape = "rounded",
     ...restProps
   }: MenuItemProps = $props();
 
-  const ctx = getMenuContext();
-
-  function handleClick() {
-    if (el) {
-      onSelect?.(el);
-    }
-    ctx.close();
-  }
-
-  function handleMouseEnter(event: MouseEvent) {
-    if (event.target instanceof HTMLElement) {
-      ctx.focus(event.target);
-    }
-  }
-
-  function handleFocus(event: FocusEvent) {
-    if (event.target instanceof HTMLElement) {
-      ctx.focus(event.target);
-    }
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (Shortcut.ENTER.matches(event) || Shortcut.SPACE.matches(event)) {
-      event.stopImmediatePropagation();
-    }
-  }
-
-  $effect(() => {
-    if (el) {
-      return ctx.add(el);
-    }
-  });
+  const menu = getMenuContext();
 </script>
 
 <button
   bind:this={el}
-  role="menuitem"
-  class={twMerge(
-    baseClasses({ variant, color, shape, focus: true }),
-    "flex w-full items-center gap-1 px-2 py-1 text-left text-sm focus:ring-0",
+  type="button"
+  role={checked === undefined ? "menuitem" : "menuitemcheckbox"}
+  aria-checked={checked}
+  tabindex={-1}
+  class={cn(
+    baseClasses({ color }),
+    "flex h-8 w-full items-center gap-2 rounded-sm px-3 text-left text-sm outline-none focus:bg-current/10 disabled:text-m3-on-surface/38",
     className,
   )}
   {...mergeProps(
     {
-      onclick: handleClick,
-      onmouseenter: handleMouseEnter,
-      onfocus: handleFocus,
-      onkeydown: handleKeyDown,
+      onclick: () => {
+        menu.close();
+        onSelect?.();
+      },
+      onpointermove: () => {
+        if (el && !el.disabled && document.activeElement !== el) el.focus();
+      },
     },
     restProps,
   )}
 >
+  {#if checked !== undefined}
+    <Check size={16} class={cn("shrink-0", !checked && "invisible")} />
+  {/if}
   {@render children()}
 </button>