@dust-tt/sparkle 0.4.27 → 0.5.1

package/src/components/ButtonGroup.tsx

@@ -80,7 +80,8 @@ const buttonGroupVariants = cva("s-inline-flex", {
 });
 
 export interface ButtonGroupProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
     VariantProps<typeof buttonGroupVariants> {
   /**
    * Array of button or dropdown items to render in the group.

package/src/components/ButtonsSwitch.tsx

@@ -54,7 +54,8 @@ const listStyles = cva(
 );
 
 export interface ButtonsSwitchListProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof listStyles> {
   size?: ButtonSize;
   disabled?: boolean;
@@ -115,8 +116,10 @@ export const ButtonsSwitchList = React.forwardRef<
 );
 ButtonsSwitchList.displayName = "ButtonsSwitchList";
 
-interface ButtonsSwitchProps
-  extends Omit<React.ComponentProps<typeof Button>, "size" | "variant"> {
+interface ButtonsSwitchProps extends Omit<
+  React.ComponentProps<typeof Button>,
+  "size" | "variant"
+> {
   value: string;
   label?: string;
   icon?: React.ComponentProps<typeof Button>["icon"];

package/src/components/Card.tsx

@@ -89,8 +89,7 @@ interface CardLinkProps extends CommonProps, LinkWrapperProps {
 }
 
 interface CardButtonProps
-  extends CommonProps,
-    React.ButtonHTMLAttributes<HTMLDivElement> {
+  extends CommonProps, React.ButtonHTMLAttributes<HTMLDivElement> {
   href?: never;
   target?: never;
   rel?: never;
@@ -176,15 +175,13 @@ interface CardPropsBase {
 }
 
 interface CardPropsWithLink
-  extends CardPropsBase,
-    Omit<CardLinkProps, keyof CardPropsBase> {
+  extends CardPropsBase, Omit<CardLinkProps, keyof CardPropsBase> {
   href: string;
   onClick?: never;
 }
 
 interface CardPropsWithButton
-  extends CardPropsBase,
-    Omit<CardButtonProps, keyof CardPropsBase> {
+  extends CardPropsBase, Omit<CardButtonProps, keyof CardPropsBase> {
   href?: never;
 }
 

package/src/components/Checkbox.tsx

@@ -44,7 +44,8 @@ const checkboxStyles = cva(
 type CheckBoxStateType = boolean | "partial";
 
 interface CheckboxProps
-  extends Omit<
+  extends
+    Omit<
       React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
       "checked" | "defaultChecked"
     >,

package/src/components/Citation.tsx

@@ -132,8 +132,7 @@ const CitationGrid = React.forwardRef<HTMLDivElement, CitationGridProps>(
 );
 CitationGrid.displayName = "CitationGrid";
 
-interface CitationCloseProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface CitationCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
@@ -260,8 +259,7 @@ const CitationTitle = React.forwardRef<HTMLDivElement, CitationTitleProps>(
 );
 CitationTitle.displayName = "CitationTitle";
 
-interface CitationDescriptionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface CitationDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 

package/src/components/Collapsible.tsx

@@ -63,7 +63,8 @@ const Collapsible = React.forwardRef<
 Collapsible.displayName = "Collapsible";
 
 export interface CollapsibleTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
+  extends
+    React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
     Omit<VariantProps<typeof labelVariants>, "disabled"> {
   label?: string;
   isOpen?: boolean;
@@ -130,7 +131,8 @@ const contentVariants = cva("s-overflow-hidden s-transition-all", {
 });
 
 export interface CollapsibleContentProps
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
+  extends
+    React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
     VariantProps<typeof contentVariants> {}
 
 const CollapsibleContent = React.forwardRef<

package/src/components/ConversationMessage.tsx

@@ -34,7 +34,8 @@ export const ConversationContainer = React.forwardRef<
 ConversationContainer.displayName = "ConversationContainer";
 
 interface ConversationMessageProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof messageVariants> {
   actions?: ConversationMessageAction[];
   avatarBusy?: boolean;
@@ -141,8 +142,7 @@ export const ConversationMessage = React.forwardRef<
 
 ConversationMessage.displayName = "ConversationMessage";
 
-interface ConversationMessageContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   citations?: React.ReactElement[];
   type: ConversationMessageType;
@@ -173,8 +173,7 @@ export const ConversationMessageContent = React.forwardRef<
 
 ConversationMessageContent.displayName = "ConversationMessageContent";
 
-interface ConversationMessageHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: ConversationMessageAction[];
   avatarUrl?: string | React.ReactNode;
   isBusy?: boolean;

package/src/components/Counter.tsx

@@ -94,7 +94,8 @@ const counterVariants = cva(
 );
 
 export interface CounterProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof counterVariants> {
   value: number;
 }

package/src/components/DataTable.tsx

@@ -333,8 +333,9 @@ export function DataTable<TData extends TBaseData>({
   );
 }
 
-export interface ScrollableDataTableProps<TData extends TBaseData>
-  extends DataTableProps<TData> {
+export interface ScrollableDataTableProps<
+  TData extends TBaseData,
+> extends DataTableProps<TData> {
   maxHeight?: string | boolean;
   onLoadMore?: () => void;
   isLoading?: boolean;
@@ -871,8 +872,7 @@ interface BaseMenuItem {
 }
 
 interface RegularMenuItem
-  extends BaseMenuItem,
-    Omit<DropdownMenuItemProps, "children" | "label"> {
+  extends BaseMenuItem, Omit<DropdownMenuItemProps, "children" | "label"> {
   kind: "item";
 }
 

package/src/components/Dialog.tsx

@@ -73,8 +73,9 @@ const dialogVariants = cva(
   }
 );
 
-interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+interface DialogContentProps extends React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> {
   size?: DialogSizeType;
   height?: DialogHeightType;
   trapFocusScope?: boolean;

package/src/components/Dropdown.tsx

@@ -242,8 +242,9 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-interface DropdownMenuContentProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Content
+> {
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
   dropdownHeaders?: React.ReactNode;
@@ -486,8 +487,10 @@ const DropdownMenuRadioItem = React.forwardRef<
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-interface DropdownMenuTagItemProps
-  extends Omit<DropdownMenuItemProps, "label" | "icon" | "onClick"> {
+interface DropdownMenuTagItemProps extends Omit<
+  DropdownMenuItemProps,
+  "label" | "icon" | "onClick"
+> {
   label: string;
   size?: React.ComponentProps<typeof Chip>["size"];
   color?: React.ComponentProps<typeof Chip>["color"];

package/src/components/Hoverable.tsx

@@ -42,8 +42,7 @@ const variantStyle = cva(
 );
 
 interface MetaHoverableProps
-  extends React.HTMLAttributes<HTMLElement>,
-    VariantProps<typeof variantStyle> {
+  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof variantStyle> {
   asChild?: boolean;
 }
 
@@ -64,8 +63,7 @@ const MetaHoverable = React.forwardRef<HTMLElement, MetaHoverableProps>(
 MetaHoverable.displayName = "MetaHoverable";
 
 export interface HoverableProps
-  extends MetaHoverableProps,
-    Omit<LinkWrapperProps, "children"> {}
+  extends MetaHoverableProps, Omit<LinkWrapperProps, "children"> {}
 
 const Hoverable = React.forwardRef<HTMLElement, HoverableProps>(
   ({ href, target, rel, children, variant, className, ...props }, ref) => {

package/src/components/IconButton.tsx

@@ -69,11 +69,10 @@ const iconButtonVariants = cva(
   }
 );
 
-export interface IconButtonProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof Button>,
-    "label" | "variant"
-  > {
+export interface IconButtonProps extends Omit<
+  React.ComponentPropsWithoutRef<typeof Button>,
+  "label" | "variant"
+> {
   variant?: IconButtonVariantType;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   tooltip?: string;

package/src/components/Input.tsx

@@ -11,8 +11,10 @@ const MESSAGE_STATUS = ["info", "default", "error"] as const;
 
 type MessageStatus = (typeof MESSAGE_STATUS)[number];
 
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value"
+> {
   message?: string | null;
   messageStatus?: MessageStatus;
   value?: string | null;

package/src/components/Label.tsx

@@ -26,7 +26,8 @@ const labelVariants = cva(
 );
 
 export interface LabelProps
-  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
+  extends
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
     VariantProps<typeof labelVariants> {
   isMuted?: boolean;
 }

package/src/components/MultiPageDialog.tsx

@@ -32,8 +32,7 @@ const MultiPageDialogRoot = Dialog;
 const MultiPageDialogTrigger = DialogTrigger;
 const MultiPageDialogClose = DialogClose;
 
-interface MultiPageDialogFooterProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface MultiPageDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   addTopSeparator: boolean;
   leftButton?: React.ComponentProps<typeof Button>;
   centerButton?: React.ComponentProps<typeof Button>;

package/src/components/MultiPageSheet.tsx

@@ -52,8 +52,7 @@ const MultiPageSheetRoot = Sheet;
 const MultiPageSheetTrigger = SheetTrigger;
 const MultiPageSheetClose = SheetClose;
 
-interface MultiPageSheetFooterProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface MultiPageSheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   addTopSeparator: boolean;
   leftButton?: React.ComponentProps<typeof Button>;
   centerButton?: React.ComponentProps<typeof Button>;

package/src/components/NavigationList.tsx

@@ -1,3 +1,4 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -10,7 +11,11 @@ import {
   ScrollBar,
 } from "@sparkle/components/";
 import { Button } from "@sparkle/components/Button";
-import { MoreIcon } from "@sparkle/icons/app";
+import {
+  Collapsible,
+  CollapsibleContent,
+} from "@sparkle/components/Collapsible";
+import { ArrowDownSIcon, ArrowRightSIcon, MoreIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
 const NavigationListItemStyles = cva(
@@ -215,37 +220,168 @@ const variantStyles = cva("", {
 });
 
 const labelStyles = cva(
-  "s-pt-4 s-pb-2 s-pl-3 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+  "s-flex s-items-center s-justify-between s-gap-2 s-pt-4 s-pb-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
 );
 
+interface NavigationListLabelButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ComponentType;
+  children?: React.ReactNode;
+}
+
+const NavigationListLabelButton = React.forwardRef<
+  HTMLButtonElement,
+  NavigationListLabelButtonProps
+>(({ className, icon, children, disabled, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      className={cn(
+        "s-inline-flex s-flex-shrink-0 s-items-center s-justify-center",
+        "s-rounded-md s-transition-colors s-duration-200",
+        "s-text-muted-foreground dark:s-text-muted-foreground-night",
+        "hover:s-text-foreground dark:hover:s-text-foreground-night",
+        "hover:s-bg-primary-150 dark:hover:s-bg-primary-150-night",
+        "active:s-bg-primary-200 dark:active:s-bg-primary-200-night",
+        "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-1",
+        "disabled:s-cursor-not-allowed disabled:s-opacity-50",
+        "disabled:hover:s-text-muted-foreground dark:disabled:hover:s-text-muted-foreground-night",
+        "disabled:hover:s-bg-transparent dark:disabled:hover:s-bg-transparent",
+        className
+      )}
+      {...props}
+    >
+      {icon ? <Icon visual={icon} size="xs" /> : children}
+    </button>
+  );
+});
+
+NavigationListLabelButton.displayName = "NavigationListLabelButton";
+
 interface NavigationListLabelProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof variantStyles> {
   label: string;
+  isCollapsible?: boolean;
+  isOpen?: boolean;
+  action?: React.ReactNode;
 }
 
 const NavigationListLabel = React.forwardRef<
   HTMLDivElement,
   NavigationListLabelProps
->(({ className, variant, label, isSticky, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      labelStyles(),
-      variantStyles({ variant, isSticky }),
-      className
-    )}
-    {...props}
-  >
-    {label}
-  </div>
-));
+>(
+  (
+    {
+      className,
+      variant,
+      label,
+      isSticky,
+      isCollapsible,
+      isOpen,
+      action,
+      ...props
+    },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        labelStyles(),
+        variantStyles({ variant, isSticky }),
+        isCollapsible ? "s-pl-1.5" : "s-pl-3",
+        className
+      )}
+      {...props}
+    >
+      <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
+        {isCollapsible && (
+          <NavigationListLabelButton
+            icon={isOpen ? ArrowDownSIcon : ArrowRightSIcon}
+            aria-label={isOpen ? "Collapse section" : "Expand section"}
+          />
+        )}
+        <span className="s-overflow-hidden s-text-ellipsis">{label}</span>
+      </div>
+      {action}
+    </div>
+  )
+);
 
 NavigationListLabel.displayName = "NavigationListLabel";
 
+interface NavigationListCollapsibleSectionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  action?: React.ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+const NavigationListCollapsibleSection = React.forwardRef<
+  React.ElementRef<typeof Collapsible>,
+  NavigationListCollapsibleSectionProps
+>(
+  (
+    {
+      label,
+      action,
+      defaultOpen,
+      open,
+      onOpenChange,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = React.useState(
+      defaultOpen ?? false
+    );
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internalOpen;
+
+    const handleOpenChange = (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    };
+
+    return (
+      <Collapsible
+        ref={ref}
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+        className={className}
+        {...props}
+      >
+        <CollapsiblePrimitive.Trigger asChild>
+          <NavigationListLabel
+            label={label}
+            isCollapsible={true}
+            isOpen={isOpen}
+            action={action}
+          />
+        </CollapsiblePrimitive.Trigger>
+        <CollapsibleContent>{children}</CollapsibleContent>
+      </Collapsible>
+    );
+  }
+);
+
+NavigationListCollapsibleSection.displayName =
+  "NavigationListCollapsibleSection";
+
 export {
   NavigationList,
+  NavigationListCollapsibleSection,
   NavigationListItem,
   NavigationListItemAction,
   NavigationListLabel,
+  NavigationListLabelButton,
 };

package/src/components/Popover.tsx

@@ -9,8 +9,9 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverPortal = PopoverPrimitive.Portal;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
-export interface PopoverContentProps
-  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> {
   fullWidth?: boolean;
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;

package/src/components/RadioGroup.tsx

@@ -63,7 +63,8 @@ const RadioGroup = React.forwardRef<
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 interface RadioGroupItemProps
-  extends Omit<
+  extends
+    Omit<
       React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
       "children"
     >,
@@ -127,7 +128,8 @@ const RadioGroupItem = React.forwardRef<
 type IconPosition = "start" | "center" | "end";
 
 interface RadioGroupCustomItemProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+  extends
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
     VariantProps<typeof radioStyles> {
   iconPosition?: IconPosition;
   customItem: React.ReactNode;

package/src/components/Resizable.tsx

@@ -3,10 +3,14 @@ import * as ResizablePrimitive from "react-resizable-panels";
 
 import { cn } from "@sparkle/lib/utils";
 
-const ResizablePanelGroup = ({
+type ResizablePanelGroupProps = React.ComponentProps<
+  typeof ResizablePrimitive.PanelGroup
+>;
+
+const ResizablePanelGroup: React.FC<ResizablePanelGroupProps> = ({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+}) => (
   <ResizablePrimitive.PanelGroup
     className={cn(
       "s-flex s-h-full s-w-full data-[panel-group-direction=vertical]:s-flex-col",

package/src/components/ScrollArea.tsx

@@ -4,8 +4,9 @@ import { useMemo } from "react";
 
 import { cn } from "@sparkle/lib/utils";
 
-interface ScrollAreaProps
-  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+> {
   hideScrollBar?: boolean;
   orientation?: "vertical" | "horizontal";
   scrollBarClassName?: string;
@@ -128,10 +129,9 @@ const scrollBarSizes = {
 
 type ScrollBarSize = keyof typeof scrollBarSizes;
 
-interface ScrollBarProps
-  extends React.ComponentPropsWithoutRef<
-    typeof ScrollAreaPrimitive.ScrollAreaScrollbar
-  > {
+interface ScrollBarProps extends React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+> {
   size?: ScrollBarSize;
 }
 

package/src/components/Sheet.tsx

@@ -82,8 +82,9 @@ const sheetVariants = cva(
   }
 );
 
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {
+interface SheetContentProps extends React.ComponentPropsWithoutRef<
+  typeof SheetPrimitive.Content
+> {
   size?: SheetSizeType;
   trapFocusScope?: boolean;
   side?: SheetSideType;
@@ -300,8 +301,9 @@ const SheetFooter = ({
 };
 SheetFooter.displayName = "SheetFooter";
 
-interface SheetTitleProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {
+interface SheetTitleProps extends React.ComponentPropsWithoutRef<
+  typeof SheetPrimitive.Title
+> {
   icon?: React.ComponentType;
 }
 

package/src/components/TextArea.tsx

@@ -7,8 +7,7 @@ const RESIZE_DIRECTIONS = ["none", "vertical", "horizontal", "both"] as const;
 
 type ResizeDirectionType = (typeof RESIZE_DIRECTIONS)[number];
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   resize?: ResizeDirectionType;
   error?: string | null;
   showErrorLabel?: boolean;

package/src/components/Timeline.tsx

@@ -82,7 +82,8 @@ function Timeline({
 }
 
 export interface TimelineItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof markerVariants> {
   title?: string;
   description?: React.ReactNode;

package/src/components/Tooltip.tsx

@@ -11,8 +11,9 @@ const TooltipPortal = TooltipPrimitive.Portal;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-interface TooltipContentProps
-  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+interface TooltipContentProps extends React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+> {
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
 }

package/src/components/markdown/safeRehypeKatex.ts

@@ -15,7 +15,7 @@ import type { Transformer } from "unified";
  */
 type RehypeKatexOptions = Parameters<typeof rehypeKatex>[0];
 
-export const safeRehypeKatex = (
+export const safeRehypeKatex: (options?: RehypeKatexOptions) => Transformer = (
   options: RehypeKatexOptions = {}
 ): Transformer => {
   return (tree, file) => {