@ark-ui/solid/dist/chunk/7KGMTGCS.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 { createComponent, template, spread, insert } 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 _tmpl$ = /* @__PURE__ */ template(`<mark>`);
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 createComponent(For, {
    get each() {
      return chunks();
    },
    children: (chunk) => createComponent(Show, {
      get when() {
        return chunk.match;
      },
      get fallback() {
        return chunk.text;
      },
      get children() {
        var _el$ = _tmpl$();
        spread(_el$, localProps, false, true);
        insert(_el$, () => chunk.text);
        return _el$;
      }
    })
  });
};

export { Highlight, useHighlight };