chore: remove cn non-default exports

app/components/Button.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { type AriaButtonOptions, useButton } from 'react-aria';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface ButtonProps extends AriaButtonOptions<'button'> {
 	variant?: 'heavy' | 'light' | 'danger';

app/components/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Title from '~/components/Title';
 import Text from '~/components/Text';
-import { cn } from '~/utils/cn';
+import Title from '~/components/Title';
+import cn from '~/utils/cn';
 
 interface Props extends React.HTMLProps<HTMLDivElement> {
 	variant?: 'raised' | 'flat';

app/components/Chip.tsx

@@ -1,4 +1,4 @@
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface ChipProps {
 	text: string;

app/components/Code.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon, CopyIcon } from '@primer/octicons-react';
 import { HTMLProps, useState } from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import toast from '~/utils/toast';
 
 interface Props extends HTMLProps<HTMLSpanElement> {

app/components/Dialog.tsx

@@ -18,7 +18,7 @@ import Card from '~/components/Card';
 import IconButton, { IconButtonProps } from '~/components/IconButton';
 import Text from '~/components/Text';
 import Title from '~/components/Title';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface DialogProps extends OverlayTriggerProps {
 	children:

app/components/Error.tsx

@@ -1,6 +1,6 @@
 import { AlertIcon } from '@primer/octicons-react';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import Card from './Card';
 import Code from './Code';
 
@@ -10,7 +10,7 @@ interface Props {
 
 function getMessage(error: Error | unknown) {
 	if (!(error instanceof Error)) {
-		return "An unknown error occurred";
+		return 'An unknown error occurred';
 	}
 
 	let rootError = error;

app/components/Footer.tsx

@@ -1,6 +1,6 @@
-import { cn } from '~/utils/cn';
 import Link from '~/components/Link';
 import Tooltip from '~/components/Tooltip';
+import cn from '~/utils/cn';
 
 declare global {
 	const __VERSION__: string;
@@ -35,11 +35,7 @@ export default function Footer({ url, debug }: FooterProps) {
 			<p className="container text-xs opacity-75">
 				Version: {__VERSION__}
 				{' — '}
-				Connecting to
-				{' '}
-				<strong className="blur-xs hover:blur-none">
-					{url}
-				</strong>
+				Connecting to <strong className="blur-xs hover:blur-none">{url}</strong>
 				{debug && ' (Debug mode enabled)'}
 			</p>
 		</footer>

app/components/IconButton.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { type AriaButtonOptions, useButton } from 'react-aria';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface IconButtonProps extends AriaButtonOptions<'button'> {
 	variant?: 'heavy' | 'light';

app/components/Link.tsx

@@ -1,5 +1,5 @@
 import { LinkExternalIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	to: string;

app/components/Notice.tsx

@@ -1,6 +1,6 @@
 import { InfoIcon } from '@primer/octicons-react';
 import type { ReactNode } from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	className?: string;

app/components/Switch.tsx

@@ -1,5 +1,5 @@
 import { Switch as AriaSwitch } from 'react-aria-components';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 type SwitchProps = Parameters<typeof AriaSwitch>[0] & {
 	readonly label: string;

app/components/Text.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface TextProps {
 	children: React.ReactNode;
@@ -7,9 +7,5 @@ export interface TextProps {
 }
 
 export default function Text({ children, className }: TextProps) {
-	return (
-		<p className={cn('text-md my-0', className)}>
-			{children}
-		</p>
-	);
+	return <p className={cn('text-md my-0', className)}>{children}</p>;
 }

app/components/Title.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 export interface TitleProps {
 	children: React.ReactNode;
@@ -8,8 +8,6 @@ export interface TitleProps {
 
 export default function Title({ children, className }: TitleProps) {
 	return (
-		<h3 className={cn('text-2xl font-bold mb-6', className)}>
-			{children}
-		</h3>
+		<h3 className={cn('text-2xl font-bold mb-6', className)}>{children}</h3>
 	);
 }

app/components/Tooltip.tsx

@@ -4,7 +4,7 @@ import {
 	Tooltip as AriaTooltip,
 	TooltipTrigger,
 } from 'react-aria-components';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	children: ReactNode;

app/layouts/dashboard.tsx

@@ -1,7 +1,7 @@
 import { XCircleFillIcon } from '@primer/octicons-react';
 import { type LoaderFunctionArgs, redirect } from 'react-router';
 import { Outlet, useLoaderData } from 'react-router';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { HeadscaleError, healthcheck, pull } from '~/utils/headscale';
 import log from '~/utils/log';
 import { destroySession, getSession } from '~/utils/sessions.server';

app/root.tsx

@@ -13,7 +13,7 @@ import { ProgressBar } from 'react-aria-components';
 import { ErrorPopup } from '~/components/Error';
 import ToastProvider from '~/components/ToastProvider';
 import stylesheet from '~/tailwind.css?url';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { useToastQueue } from '~/utils/toast';
 
 export const meta: MetaFunction = () => [

app/routes/acls/components/cm.client.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
-import Merge from 'react-codemirror-merge';
-import CodeMirror from '@uiw/react-codemirror';
 import * as shopify from '@shopify/lang-jsonc';
-import { ClientOnly } from 'remix-utils/client-only';
-import { ErrorBoundary } from 'react-error-boundary';
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
+import CodeMirror from '@uiw/react-codemirror';
+import React, { useEffect } from 'react';
 import { useState } from 'react';
-import { cn } from '~/utils/cn';
+import Merge from 'react-codemirror-merge';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ClientOnly } from 'remix-utils/client-only';
+import cn from '~/utils/cn';
 
 import Fallback from './fallback';
 

app/routes/acls/components/error.tsx

@@ -1,5 +1,5 @@
-import { cn } from '~/utils/cn';
 import { AlertIcon } from '@primer/octicons-react';
+import cn from '~/utils/cn';
 
 import Card from '~/components/Card';
 import Code from '~/components/Code';

app/routes/acls/components/fallback.tsx

@@ -1,5 +1,5 @@
 import Spinner from '~/components/Spinner';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	readonly acl: string;

app/routes/acls/components/unavailable.tsx

@@ -1,8 +1,8 @@
-import { cn } from '~/utils/cn';
 import { AlertIcon } from '@primer/octicons-react';
+import cn from '~/utils/cn';
 
-import Code from '~/components/Code';
 import Card from '~/components/Card';
+import Code from '~/components/Code';
 
 interface Props {
 	mode: 'file' | 'database';

app/routes/acls/editor.tsx

@@ -16,7 +16,7 @@ import Code from '~/components/Code';
 import Link from '~/components/Link';
 import Notice from '~/components/Notice';
 import Spinner from '~/components/Spinner';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { HeadscaleError, pull, put } from '~/utils/headscale';

app/routes/dns/components/dns.tsx

@@ -1,10 +1,10 @@
-import { useSubmit } from 'react-router';
 import { Button } from 'react-aria-components';
+import { useSubmit } from 'react-router';
 
 import Code from '~/components/Code';
 import Link from '~/components/Link';
 import TableList from '~/components/TableList';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 import AddDNS from '../dialogs/dns';
 
@@ -37,7 +37,7 @@ export default function DNS({ records, isDisabled }: Props) {
 						</TableList.Item>
 					) : (
 						records.map((record, index) => (
-							<TableList.Item key={index}>
+							<TableList.Item key={`${record.name}-${record.value}`}>
 								<div className="flex gap-24">
 									<div className="flex gap-2">
 										<p className="font-mono text-sm font-bold">{record.type}</p>

app/routes/dns/components/domains.tsx

@@ -18,7 +18,7 @@ import { type FetcherWithComponents, useFetcher } from 'react-router';
 
 import Spinner from '~/components/Spinner';
 import TableList from '~/components/TableList';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 type Properties = {
 	readonly baseDomain?: string;

app/routes/dns/components/nameservers.tsx

@@ -1,11 +1,8 @@
-import { useSubmit } from 'react-router';
-import { useState } from 'react';
 import { Button } from 'react-aria-components';
-
+import { useSubmit } from 'react-router';
 import Link from '~/components/Link';
-import Switch from '~/components/Switch';
 import TableList from '~/components/TableList';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 import AddNameserver from '../dialogs/nameserver';
 
@@ -59,7 +56,7 @@ function NameserverList({
 	name,
 }: ListProps) {
 	const submit = useSubmit();
-	const list = isGlobal ? nameservers['global'] : nameservers[name];
+	const list = isGlobal ? nameservers.global : nameservers[name];
 	if (list.length === 0) {
 		return null;
 	}
@@ -74,8 +71,7 @@ function NameserverList({
 			<TableList>
 				{list.length > 0
 					? list.map((ns, index) => (
-							// eslint-disable-next-line react/no-array-index-key
-							<TableList.Item key={index}>
+							<TableList.Item key={ns}>
 								<p className="font-mono text-sm">{ns}</p>
 								<Button
 									className={cn(

app/routes/dns/components/rename.tsx

@@ -5,7 +5,7 @@ import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
 import Spinner from '~/components/Spinner';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 type Properties = {
 	readonly name: string;

app/routes/dns/dialogs/nameserver.tsx

@@ -6,7 +6,7 @@ import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
 import Switch from '~/components/Switch';
 import Tooltip from '~/components/Tooltip';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface Props {
 	nameservers: Record<string, string[]>;

app/routes/machines/components/machine.tsx

@@ -5,7 +5,7 @@ import Chip from '~/components/Chip';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import type { HostInfo, Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import * as hinfo from '~/utils/host-info';
 
 import toast from '~/utils/toast';

app/routes/machines/components/menu.tsx

@@ -2,7 +2,7 @@ import { Cog, Ellipsis } from 'lucide-react';
 import { useState } from 'react';
 import Menu from '~/components/Menu';
 import type { Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import Delete from '../dialogs/delete';
 import Expire from '../dialogs/expire';
 import Move from '../dialogs/move';

app/routes/machines/dialogs/routes.tsx

@@ -4,7 +4,7 @@ import Dialog from '~/components/Dialog';
 import Link from '~/components/Link';
 import Switch from '~/components/Switch';
 import type { Machine, Route } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 
 interface RoutesProps {
 	machine: Machine;

app/routes/machines/machine.tsx

@@ -18,7 +18,7 @@ import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import Tooltip from '~/components/Tooltip';
 import type { Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { pull } from '~/utils/headscale';

app/routes/machines/overview.tsx

@@ -7,7 +7,7 @@ import Code from '~/components/Code';
 import { ErrorPopup } from '~/components/Error';
 import Link from '~/components/Link';
 import type { Machine, Route, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { pull } from '~/utils/headscale';

app/routes/settings/components/agent.tsx

@@ -1,8 +1,8 @@
-import Link from '~/components/Link';
-import Button from '~/components/Button';
-import { Link as RemixLink } from 'react-router';
 import { ArrowRightIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import { Link as RemixLink } from 'react-router';
+import Button from '~/components/Button';
+import Link from '~/components/Link';
+import cn from '~/utils/cn';
 
 export default function AgentSection() {
 	return (
@@ -10,10 +10,10 @@ export default function AgentSection() {
 			<div className="flex flex-col w-2/3">
 				<h1 className="text-2xl font-medium mb-4">Local Agent</h1>
 				<p className="text-gray-700 dark:text-gray-300">
-					Headplane provides a local agent that can be installed on a
-					server to provide additional features including viewing device
-					information and SSH access via the web interface (soon).
-					To learn more about the agent visit the{' '}
+					Headplane provides a local agent that can be installed on a server to
+					provide additional features including viewing device information and
+					SSH access via the web interface (soon). To learn more about the agent
+					visit the{' '}
 					<Link
 						to="https://github.com/tale/headplane/blob/main/docs/Headplane-Agent.md"
 						name="Headplane Agent Documentation"
@@ -34,5 +34,5 @@ export default function AgentSection() {
 				</div>
 			</RemixLink>
 		</>
-	)
+	);
 }

app/routes/settings/overview.tsx

@@ -1,8 +1,8 @@
-import Link from '~/components/Link';
-import Button from '~/components/Button';
-import { Link as RemixLink } from 'react-router';
 import { ArrowRightIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import { Link as RemixLink } from 'react-router';
+import Button from '~/components/Button';
+import Link from '~/components/Link';
+import cn from '~/utils/cn';
 
 import AgentSection from './components/agent';
 

app/routes/users/overview.tsx

@@ -10,7 +10,7 @@ import Card from '~/components/Card';
 import { ErrorPopup } from '~/components/Error';
 import StatusCircle from '~/components/StatusCircle';
 import type { Machine, User } from '~/types';
-import { cn } from '~/utils/cn';
+import cn from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
 import { loadConfig } from '~/utils/config/headscale';
 import { del, post, pull } from '~/utils/headscale';

app/utils/cn.ts

@@ -1,5 +1,5 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
 export default cn;