A slug and merged classes

// apps/docs/examples/ui/utilities.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Input} from '@workspace/active-ui/components/primitives/input';import {cn, slugify} from '@workspace/active-ui/lib/utils';
/** * `slugify` turns a display string into a URL-safe slug; `cn` merges * classes so that a later Tailwind class wins over a conflicting one. */export default function UtilitiesExample() {  const [name, setName] = useState("'s-Hertogenbosch Café");  return (    <div className="grid w-full max-w-sm gap-6">      <Field>        <FieldLabel htmlFor="slug-source">Name</FieldLabel>        <Input          id="slug-source"          value={name}          onChange={(event) => setName(event.target.value)}        />        <FieldDescription>          <code>slugify</code>: <code>{slugify(name) || "''"}</code>        </FieldDescription>      </Field>      <p className="text-sm">        <code>cn(&apos;px-2 py-1&apos;, &apos;px-4&apos;)</code> ={' '}        <code>&apos;{cn('px-2 py-1', 'px-4')}&apos;</code>      </p>    </div>  );}