@ark-ui/solid/dist/chunk/SU6SNXFK.js

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

import { createSplitProps } from './ZMHI4GDJ.js';
import { runIfFn } from './DT73WLR4.js';
import { ark } from './EPLBB4QN.js';
import { createComponent, mergeProps } from 'solid-js/web';
import { createMemo, For, Show } from 'solid-js';
import { highlightWord } from '@zag-js/highlight-word';

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", "exactMatch"]);
  const chunks = useHighlight(highlightProps);
  return createComponent(For, {
    get each() {
      return chunks();
    },
    children: (chunk) => createComponent(Show, {
      get when() {
        return chunk.match;
      },
      get fallback() {
        return chunk.text;
      },
      get children() {
        return createComponent(ark.mark, mergeProps(localProps, {
          get children() {
            return chunk.text;
          }
        }));
      }
    })
  });
};

export { Highlight, useHighlight };