@ark-ui/solid/dist/chunk/ZJM2GZS7.jsx

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  runIfFn
} from "./KGOB2IMX.jsx";

// src/components/highlight/highlight.tsx
import { For, Show } from "solid-js";

// src/components/highlight/use-highlight.ts
import { highlightWord } from "@zag-js/highlight-word";
import { createMemo } from "solid-js";
var useHighlight = (props) => {
  return createMemo(() => highlightWord(runIfFn(props)));
};

// src/components/highlight/highlight.tsx
var Highlight = (props) => {
  if (typeof props.text !== "string") {
    throw new Error("[ark-ui/highlight] text must be a string");
  }
  const [highlightProps, localProps] = createSplitProps()(props, [
    "query",
    "text",
    "ignoreCase",
    "matchAll"
  ]);
  const chunks = useHighlight(highlightProps);
  return <For each={chunks()}>
      {(chunk) => <Show when={chunk.match} fallback={chunk.text}>
          <mark {...localProps}>{chunk.text}</mark>
        </Show>}
    </For>;
};

export {
  useHighlight,
  Highlight
};