create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/react/src/components/layout/header.tsx.stub

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react'
+import { cn } from '@/lib/utils'
+import { ThemeToggle } from '@/components/layout/theme-toggle'
+import { useSidebarToggle } from '@/components/layout/authenticated-layout'
+
+interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+  fixed?: boolean
+  navigate?: (href: string) => void
+}
+
+export function Header({ className, fixed, children, navigate, ...props }: HeaderProps) {
+  const [offset, setOffset] = useState(0)
+  const { toggle } = useSidebarToggle()
+
+  useEffect(() => {
+    const onScroll = () => setOffset(document.body.scrollTop || document.documentElement.scrollTop)
+    document.addEventListener('scroll', onScroll, { passive: true })
+    return () => document.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <header
+      className={cn(
+        'flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear',
+        fixed && 'sticky top-0 z-10 bg-white dark:bg-gray-950',
+        offset > 10 && fixed ? 'border-b border-gray-200 dark:border-gray-800' : '',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex w-full items-center gap-2 px-4 lg:px-6">
+        {/* Sidebar toggle */}
+        <button
+          type="button"
+          onClick={toggle}
+          className="-ml-1 inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+            <rect width="18" height="18" x="3" y="3" rx="2" />
+            <path d="M9 3v18" />
+          </svg>
+          <span className="sr-only">Toggle sidebar</span>
+        </button>
+        <div className="mx-1 hidden h-4 w-px bg-gray-200 dark:bg-gray-700 md:block" />
+        {children}
+        <div className="ms-auto flex items-center gap-2">
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  )
+}

package/stubs/tailwind-only/react/src/components/layout/main.tsx.stub

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils'
+
+interface MainProps extends React.HTMLAttributes<HTMLElement> {
+  fixed?: boolean
+}
+
+export function Main({ fixed, className, children, ...props }: MainProps) {
+  return (
+    <main
+      className={cn(
+        fixed && 'flex flex-grow flex-col overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="px-4 py-6 lg:px-6">
+        {children}
+      </div>
+    </main>
+  )
+}

package/stubs/tailwind-only/react/src/components/layout/nav-group.tsx.stub

@@ -0,0 +1,185 @@
+import { useState } from 'react'
+import { cn } from '@/lib/utils'
+import type { NavGroup as NavGroupData } from './sidebar-data'
+
+interface NavGroupProps {
+  group: NavGroupData
+  activePath: string
+  navigate: (href: string) => void
+  collapsed?: boolean
+}
+
+function SvgIcon({ path, className }: { path: string; className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('h-4 w-4', className)}
+    >
+      {path.split(' M').map((d, i) => (
+        <path key={i} d={i === 0 ? d : `M${d}`} />
+      ))}
+    </svg>
+  )
+}
+
+function isActive(itemUrl: string, activePath: string): boolean {
+  if (itemUrl === activePath) return true
+  const itemBase = itemUrl.split('?')[0]
+  const activeBase = activePath.split('?')[0]
+  return itemBase === activeBase
+}
+
+function isGroupActive(
+  items: NavGroupData['items'][number]['items'],
+  activePath: string,
+): boolean {
+  if (!items) return false
+  return items.some((sub) => isActive(sub.url, activePath))
+}
+
+export function NavGroup({ group, activePath, navigate, collapsed }: NavGroupProps) {
+  return (
+    <div className="px-3 py-2">
+      {!collapsed && (
+        <h3 className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+          {group.title}
+        </h3>
+      )}
+      <ul className="space-y-0.5">
+        {group.items.map((item) =>
+          item.items && item.items.length > 0 ? (
+            <CollapsibleNavItem
+              key={item.title}
+              item={item}
+              activePath={activePath}
+              navigate={navigate}
+              collapsed={collapsed}
+            />
+          ) : item.external ? (
+            <li key={item.title}>
+              <a
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                title={collapsed ? item.title : undefined}
+              >
+                <SvgIcon path={item.iconPath} />
+                {!collapsed && (
+                  <>
+                    <span className="flex-1">{item.title}</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-auto h-3 w-3 text-gray-400">
+                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
+                    </svg>
+                  </>
+                )}
+              </a>
+            </li>
+          ) : (
+            <li key={item.title}>
+              <button
+                type="button"
+                onClick={() => navigate(item.url)}
+                className={cn(
+                  'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+                  isActive(item.url, activePath)
+                    ? 'bg-gray-100 font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-50'
+                    : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800',
+                )}
+                title={collapsed ? item.title : undefined}
+              >
+                <SvgIcon path={item.iconPath} />
+                {!collapsed && (
+                  <>
+                    <span>{item.title}</span>
+                    {item.badge && (
+                      <span className="ml-auto rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+                        {item.badge}
+                      </span>
+                    )}
+                  </>
+                )}
+              </button>
+            </li>
+          ),
+        )}
+      </ul>
+    </div>
+  )
+}
+
+function CollapsibleNavItem({
+  item,
+  activePath,
+  navigate,
+  collapsed,
+}: {
+  item: NavGroupData['items'][number]
+  activePath: string
+  navigate: (href: string) => void
+  collapsed?: boolean
+}) {
+  const childActive = isGroupActive(item.items, activePath)
+  const [open, setOpen] = useState(childActive)
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => collapsed ? navigate(item.url) : setOpen(!open)}
+        className={cn(
+          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+          childActive
+            ? 'bg-gray-100 font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-50'
+            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800',
+        )}
+        title={collapsed ? item.title : undefined}
+      >
+        <SvgIcon path={item.iconPath} />
+        {!collapsed && (
+          <>
+            <span className="flex-1 text-left">{item.title}</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className={cn('h-4 w-4 transition-transform', open && 'rotate-90')}
+            >
+              <path d="m9 18 6-6-6-6" />
+            </svg>
+          </>
+        )}
+      </button>
+      {open && !collapsed && item.items && (
+        <ul className="ml-4 mt-0.5 space-y-0.5 border-l border-gray-200 pl-2 dark:border-gray-700">
+          {item.items.map((sub) => (
+            <li key={sub.title}>
+              <button
+                type="button"
+                onClick={() => navigate(sub.url)}
+                className={cn(
+                  'flex w-full items-center rounded-md px-2 py-1.5 text-sm transition-colors',
+                  isActive(sub.url, activePath)
+                    ? 'font-medium text-gray-900 dark:text-gray-50'
+                    : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50',
+                )}
+              >
+                {sub.title}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </li>
+  )
+}

package/stubs/tailwind-only/react/src/components/layout/nav-user.tsx.stub

@@ -0,0 +1,106 @@
+import { useState, useRef, useEffect } from 'react'
+
+export interface NavUserProps {
+  user: {
+    name: string
+    email: string
+    role?: string
+  }
+  navigate: (href: string) => void
+  onLogout: () => void
+  collapsed?: boolean
+}
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+export function NavUser({ user, navigate, onLogout, collapsed }: NavUserProps) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onClick)
+    return () => document.removeEventListener('mousedown', onClick)
+  }, [])
+
+  return (
+    <div ref={ref} className="relative px-3 py-2">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
+      >
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-xs font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+          {getInitials(user.name)}
+        </div>
+        {!collapsed && (
+          <>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold text-gray-900 dark:text-gray-50">{user.name}</span>
+              <span className="truncate text-xs text-gray-500 dark:text-gray-400">{user.email}</span>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-auto h-4 w-4 text-gray-400">
+              <path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
+            </svg>
+          </>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-3 right-3 z-50 mb-1 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
+          {/* User info */}
+          <div className="flex items-center gap-2 px-3 py-2">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-xs font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+              {getInitials(user.name)}
+            </div>
+            <div className="grid flex-1 text-sm leading-tight">
+              <span className="truncate font-semibold text-gray-900 dark:text-gray-50">{user.name}</span>
+              <span className="truncate text-xs text-gray-500 dark:text-gray-400">{user.email}</span>
+            </div>
+          </div>
+          <div className="my-1 h-px bg-gray-100 dark:bg-gray-800" />
+          <button
+            type="button"
+            onClick={() => { setOpen(false); navigate('/account/profile') }}
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
+            </svg>
+            Account
+          </button>
+          <button
+            type="button"
+            onClick={() => { setOpen(false); navigate('/account?tab=preferences') }}
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
+            </svg>
+            Settings
+          </button>
+          <div className="my-1 h-px bg-gray-100 dark:bg-gray-800" />
+          <button
+            type="button"
+            onClick={() => { setOpen(false); onLogout() }}
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-red-600 transition-colors hover:bg-gray-100 dark:text-red-400 dark:hover:bg-gray-800"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
+            </svg>
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/stubs/tailwind-only/react/src/components/layout/sidebar-data.ts.stub

@@ -0,0 +1,58 @@
+export interface NavItem {
+  title: string
+  url: string
+  /** SVG path(s) for a 24x24 viewBox icon */
+  iconPath: string
+  badge?: string
+  external?: boolean
+  items?: NavItem[]
+}
+
+export interface NavGroup {
+  title: string
+  items: NavItem[]
+}
+
+// SVG paths (stroke icons, 24x24)
+const icons = {
+  home: 'M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z M9 21V12h6v9',
+  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M22 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
+  settings: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+  user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z',
+  lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z M7 11V7a5 5 0 0 1 10 0v4',
+  palette: 'M12 2a10 10 0 0 0 0 20 2 2 0 0 0 2-2v-.09a1.65 1.65 0 0 1 3 0v.09a2 2 0 0 0 2 2h.44A10 10 0 0 0 12 2z',
+  book: 'M4 19.5A2.5 2.5 0 0 1 6.5 17H20 M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5',
+  externalLink: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6 M15 3h6v6 M10 14L21 3',
+}
+
+export const sidebarData: NavGroup[] = [
+  {
+    title: 'General',
+    items: [
+      { title: 'Dashboard', url: '/dashboard', iconPath: icons.home },
+      { title: 'Users', url: '/users', iconPath: icons.users },
+    ],
+  },
+  {
+    title: 'Documentation',
+    items: [
+      { title: 'Docs', url: 'https://github.com/mantiqjs/mantiq#readme', iconPath: icons.book, external: true },
+      { title: 'GitHub', url: 'https://github.com/mantiqjs/mantiq', iconPath: icons.externalLink, external: true },
+    ],
+  },
+  {
+    title: 'Account',
+    items: [
+      {
+        title: 'Settings',
+        url: '/account/profile',
+        iconPath: icons.settings,
+        items: [
+          { title: 'Profile', url: '/account/profile', iconPath: icons.user },
+          { title: 'Security', url: '/account/security', iconPath: icons.lock },
+          { title: 'Preferences', url: '/account/preferences', iconPath: icons.palette },
+        ],
+      },
+    ],
+  },
+]

package/stubs/tailwind-only/react/src/components/layout/theme-toggle.tsx.stub

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+
+export function ThemeToggle() {
+  const [isDark, setIsDark] = useState(() =>
+    typeof document !== 'undefined'
+      ? document.documentElement.classList.contains('dark')
+      : false,
+  )
+
+  const toggleTheme = () => {
+    const dark = document.documentElement.classList.toggle('dark')
+    localStorage.setItem('theme', dark ? 'dark' : 'light')
+    setIsDark(dark)
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-50"
+      title={isDark ? 'Light mode' : 'Dark mode'}
+    >
+      {isDark ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  )
+}

package/stubs/tailwind-only/react/src/components/layout/top-nav.tsx.stub

@@ -0,0 +1,72 @@
+import { cn } from '@/lib/utils'
+
+interface TopNavLink {
+  title: string
+  href: string
+  isActive?: boolean
+  disabled?: boolean
+}
+
+interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
+  links: TopNavLink[]
+  onLinkClick?: (href: string) => void
+}
+
+export function TopNav({
+  className,
+  links,
+  onLinkClick,
+  ...props
+}: TopNavProps) {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+    if (onLinkClick) {
+      e.preventDefault()
+      onLinkClick(href)
+    }
+  }
+
+  return (
+    <>
+      {/* Desktop navigation */}
+      <nav
+        className={cn(
+          'hidden items-center gap-4 md:flex lg:gap-6',
+          className,
+        )}
+        {...props}
+      >
+        {links.map((link) => (
+          <a
+            key={link.href}
+            href={link.href}
+            onClick={(e) => handleClick(e, link.href)}
+            className={cn(
+              'text-sm font-medium transition-colors hover:text-gray-900 dark:hover:text-gray-50',
+              link.isActive
+                ? 'text-gray-900 dark:text-gray-50'
+                : 'text-gray-500 dark:text-gray-400',
+              link.disabled && 'pointer-events-none opacity-50',
+            )}
+          >
+            {link.title}
+          </a>
+        ))}
+      </nav>
+
+      {/* Mobile navigation */}
+      <div className="md:hidden">
+        <select
+          onChange={(e) => onLinkClick?.(e.target.value)}
+          defaultValue={links.find(l => l.isActive)?.href ?? ''}
+          className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm dark:border-gray-700 dark:bg-gray-900"
+        >
+          {links.map((link) => (
+            <option key={link.href} value={link.href} disabled={link.disabled}>
+              {link.title}
+            </option>
+          ))}
+        </select>
+      </div>
+    </>
+  )
+}

package/stubs/tailwind-only/react/src/lib/utils.ts.stub

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}