feat(svelte): add highlight

Author: segunadebayo

packages/svelte/src/lib/components/highlight/examples/basic.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Highlight } from '@ark-ui/svelte/highlight'
+</script>
+
+<Highlight
+  query=" ipsum"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt"
+/> 

packages/svelte/src/lib/components/highlight/examples/ignore-case.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Highlight } from '@ark-ui/svelte/highlight'
+</script>
+
+<Highlight
+  text="The quick brown Fox jumps over the lazy Dog."
+  query={['fox', 'dog']}
+  ignoreCase
+/> 

packages/svelte/src/lib/components/highlight/examples/match-all.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Highlight } from '@ark-ui/svelte/highlight'
+</script>
+
+<div>
+  <h3>Match All</h3>
+  <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={true} />
+
+  <h3>Match First Occurrence Only</h3>
+  <Highlight text="The quick brown fox jumps over the lazy fox." query="fox" matchAll={false} />
+</div> 

packages/svelte/src/lib/components/highlight/highlight.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta } from '@storybook/svelte'
+import BasicExample from './examples/basic.svelte'
+import IgnoreCaseExample from './examples/ignore-case.svelte'
+import MatchAllExample from './examples/match-all.svelte'
+
+const meta = {
+  title: 'Components / Highlight',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    Component: BasicExample,
+  }),
+}
+
+export const IgnoreCase = {
+  render: () => ({
+    Component: IgnoreCaseExample,
+  }),
+}
+
+export const MatchAll = {
+  render: () => ({
+    Component: MatchAllExample,
+  }),
+}

packages/svelte/src/lib/components/highlight/highlight.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createSplitProps } from '$lib/utils/create-split-props'
+  import type { HTMLProps, Assign } from '$lib/types'
+  import { useHighlight, type UseHighlightProps } from './use-highlight.svelte'
+
+  export interface HighlightBaseProps extends UseHighlightProps {}
+  export interface HighlightProps extends Assign<HTMLProps<'mark'>, HighlightBaseProps> {}
+
+  const props: HighlightProps = $props()
+
+  const [highlightProps, localProps] = createSplitProps<HighlightBaseProps>()(props, [
+    'query',
+    'text',
+    'ignoreCase',
+    'matchAll',
+  ])
+
+  if (typeof highlightProps.text !== 'string') {
+    throw new Error('[ark-ui/highlight] text must be a string')
+  }
+
+  const chunks = useHighlight(highlightProps)
+</script>
+
+{#each chunks as { text, match }, i}
+  {#if match}
+    <mark {...localProps}>{text}</mark>
+  {:else}
+    {text}
+  {/if}
+{/each} 

packages/svelte/src/lib/components/highlight/index.ts

@@ -0,0 +1,3 @@
+export { default as Highlight } from './highlight.svelte'
+export type { HighlightProps } from './highlight.svelte'
+export { useHighlight, type UseHighlightProps, type HighlightChunk } from './use-highlight.svelte'

packages/svelte/src/lib/components/highlight/use-highlight.svelte.ts

@@ -0,0 +1,10 @@
+import { type HighlightChunk, type HighlightWordProps, highlightWord } from '@zag-js/highlight-word'
+
+export interface UseHighlightProps extends HighlightWordProps {}
+
+export const useHighlight = (props: UseHighlightProps): HighlightChunk[] => {
+  const chunks = $derived(highlightWord(props))
+  return chunks
+}
+
+export type { HighlightChunk }

packages/svelte/src/lib/components/index.ts

@@ -1,3 +1,4 @@
 export * from './avatar'
 export * from './factory'
 export * from './timer'
+export * from './highlight'